Uso De MVC, Entity Framework, JQuery Para Obtener Y Publicar Con Valid

WEB API es la mejor opción para crear un servicio orientado a recursos mediante HTTP/Restful y funciona bien con aplicaciones basadas en MVC. Para más detalles visita mi enlace.

Descripción

En esta sesión, le mostraré cómo insertar registros utilizando la API web de Asp.net o publicar datos en SQL Server. En esta sesión, puede ver las operaciones de obtención y publicación de la API web. De otra manera, puedo decir que insertaremos y recuperaremos registros usando un evento de clic de botón.

Antes de pasar por esta sesión, visite mi sesión anterior.

Código fuente

Pasos a seguir.

Paso 1

Aplicar validación en Modelo.


Vaya a Explorador de soluciones > Entidades (nombre del proyecto) > Satyadabasemodel.tt > Abra Employee.cs.

Referencia del código

//------------------------------------------------------------------------------  
// <auto-generated>  
//    This code was generated from a template.  
//  
//    Manual changes to this file may cause unexpected behavior in your application.  
//    Manual changes to this file will be overwritten if the code is regenerated.  
// </auto-generated>  
//------------------------------------------------------------------------------  
  
namespace Entities  
{  
    using System;  
    using System.Collections.Generic;  
    using System.ComponentModel.DataAnnotations;  
  
    public partial class Employee  
    {  
        public int EmployeeID { get; set; }  
        [Required(ErrorMessage = "First name required", AllowEmptyStrings = false)]  
        public string FirstName { get; set; }  
        [Required(ErrorMessage = "Last name required", AllowEmptyStrings = false)]  
        public string LastName { get; set; }  
        [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",  
            ErrorMessage = "E-mail is not valid")]  
        public string EmailID { get; set; }  
        public string City { get; set; }  
        public string Country { get; set; }  
    }  
} 

Código Descripción

Aquí, he aplicado la validación en el campo de nombre, apellido y correo electrónico. Si el nombre y el apellido estarán vacíos, se mostrará el mensaje de validación. Para el campo de correo electrónico, si el usuario ingresa una dirección de correo no válida con una dirección de dominio incorrecta, el mensaje de validación de correo electrónico se mostrará al usuario final.

Paso 2

Agregue una nueva acción al proyecto SatyaController of SatyaWebApi Web API para Post Data.

Referencia del código

using System;    
using System.Collections.Generic;    
using System.Linq;    
using System.Net;    
using System.Net.Http;    
using System.Web.Http;    
using Entities;    
    
namespace SatyaWebApi.Controllers    
{    
    public class SatyaController : ApiController    
    {    
          
        public HttpResponseMessage Get()    
        {    
            List<Employee> allEmp = new List<Employee>();    
            using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
            {    
                allEmp = dc.Employees.OrderBy(a => a.FirstName).ToList();  
                HttpResponseMessage response;    
                response = Request.CreateResponse(HttpStatusCode.OK, allEmp);    
                return response;    
            }    
        }    
        public HttpResponseMessage Post(Employee emp)    
        {    
            HttpResponseMessage response;    
            if (ModelState.IsValid)    
            {    
                using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())    
                {    
                    dc.Employees.Add(emp);    
                    dc.SaveChanges();    
                }    
                response = Request.CreateResponse(HttpStatusCode.Created, emp);    
    
                //added for get    
    
                List<Employee> allEmp = new List<Employee>();    
                using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
                {    
                    allEmp = dc.Employees.OrderBy(a => a.FirstName).ToList();    
                    HttpResponseMessage response1;    
                    response1 = Request.CreateResponse(HttpStatusCode.OK, allEmp);    
                    return response1;    
                }    
            }    
    
            else    
            {    
                response = Request.CreateResponse(HttpStatusCode.BadRequest, "Error! Please try again with valid data.");    
            }    
            return response;    
        }    
    }    
}   

Código Descripción

En este código, he agregado el método de acción del controlador posterior para realizar los datos posteriores, así como el código agregado sobre la recuperación de datos dentro del método de acción posterior. El siguiente código es para recuperar los datos.

//added for get      
      
                List<Employee> allEmp = new List<Employee>();      
                using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())    
                {      
                    allEmp = dc.Employees.OrderBy(a => a.FirstName).ToList();      
                    HttpResponseMessage response1;      
                    response1 = Request.CreateResponse(HttpStatusCode.OK, allEmp);      
                    return response1;      
                }   

Código para insertar datos,

HttpResponseMessage response;  
           if (ModelState.IsValid)  
           {  
               using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
               {  
                   dc.Employees.Add(emp);  
                   dc.SaveChanges();  
               }  
               response = Request.CreateResponse(HttpStatusCode.Created, emp); 

dc.Employees.Add(emp);  
 dc.SaveChanges(); 

Aquí, el uso del objeto datacontext agrega datos y pasa al parámetro emp en el método de acción posterior y guarda todos los cambios realizados en esto en la base de datos subyacente. 

else  
            {  
                response = Request.CreateResponse(HttpStatusCode.BadRequest, "Error! Please try again with valid data.");  
            } 

Si se encuentra algún problema de conexión o cualquier problema relacionado en el código o datos no válidos durante la operación posterior, se mostrará el mensaje de error al usuario final.

Paso 3

Agregue una nueva acción al HomeController en SatyaConsumingApi para ver los datos de la publicación.

 

Referencia del código

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net.Http;  
using System.Web;  
using System.Web.Mvc;  
using Entities;  
  
namespace SatyaConsumingApi.Controllers  
{  
    public class HomeController : Controller  
    {  
        public ActionResult Part1()  
        {  
            return View();  
        }  
  
        public ActionResult Part2()  
        {  
            List<Employee> list = new List<Employee>();  
            HttpClient client = new HttpClient();  
            var result = client.GetAsync("http://localhost:47250/api/satya").Result;  
            if (result.IsSuccessStatusCode)  
            {  
                list = result.Content.ReadAsAsync<List<Employee>>().Result;  
            }  
            return View(list);  
        }  
        public ActionResult Part3()  
        {  
            return View();  
        }  
  
    }  
} 

Código Descripción

Aquí, la Parte 3 es la nueva acción del controlador mencionada en la aplicación cliente MVC.

Etapa 4

Agregar vista para la acción.

Referencia del código

@{  
    ViewBag.Title = "Satyaprakash - Post Data To Web API Using jQuery With Validation";  
}  
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">  
  
</script>  
  
<style>  
    .error, #error {  
        color: red;  
        display: none;  
    }  
  
    table {  
        font-family: arial, sans-serif;  
        border-collapse: collapse;  
        width: 100%;  
    }  
  
    td, th {  
        border: 1px solid #dddddd;  
        text-align: left;  
        padding: 8px;  
    }  
  
    tr:nth-child(even) {  
        background-color: #dddddd;  
    }  
  
    .button {  
        background-color: #4CAF50;  
        border: none;  
        color: white;  
        padding: 15px 32px;  
        text-align: center;  
        text-decoration: none;  
        display: inline-block;  
        font-size: 16px;  
        margin: 4px 2px;  
        cursor: pointer;  
    }  
  
    .button4 {  
        border-radius: 9px;  
    }  
</style>  
  
<div style="padding:10px ; align-content:center">  
    <fieldset>  
        <legend style="font-family:Arial Black;color:blue">Post Data To Web API Using jQuery With Validation</legend>  
    </fieldset>  
</div>  
  
<div class="container1">  
    <form id="frm1" role="form" style="max-width:500px">  
        <div class="form-group">  
            <div id="error"> </div>  
        </div>  
        <div class="form-group">  
            <label for="firstname" style="color:blue">First Name:</label>  
            <input type="text" class="form-control" id="firstname" placeholder="please enter First Name">  
            <span class="error">Please provide First Name</span>  
        </div>  
        <div class="form-group">  
            <label for="lastname" style="color:blue">Last Name:</label>  
            <input type="text" class="form-control" id="lastname" placeholder="please enter Last Name">  
            <span class="error">Please provide Last Name</span>  
        </div>  
        <div class="form-group">  
            <label for="email" style="color:blue">Email:</label>  
            <input type="text" class="form-control" id="email" placeholder="please enter Email-Id">  
            <span class="error">Invalid email ID</span>  
        </div>  
        <div class="form-group">  
            <label for="city" style="color:blue">City:</label>  
            <input type="text" class="form-control" id="city" placeholder="please enter City">  
        </div>  
        <div class="form-group">  
            <label for="country" style="color:blue">Country:</label>  
            <input type="text" class="form-control" id="country" placeholder="please enter Country">  
        </div>  
        <button type="submit" class="button button4">Submit</button>  
    </form>  
</div>  
  
<div id="updatePanel" style="width:90%; margin:0 auto; padding:10px">  
  
</div>  
  
@section Scripts{  
    <script>  
            $(document).ready(function () {  
                var apiBaseUrl = "http://localhost:47250/";  
                $('#frm1').submit(function (e) {  
                    e.preventDefault();  
                    var isOK = ValidateForm();  
                    if (isOK) {  
                        var emp = {  
                            EmployeeID: 0,  
                            FirstName: $('#firstname').val().trim(),  
                            LastName: $('#lastname').val().trim(),  
                            EmailID: $('#email').val().trim(),  
                            City: $('#city').val().trim(),  
                            Country: $('#country').val().trim()  
                        };  
  
                        //Save  
                        $.ajax({  
                            url: apiBaseUrl+'api/satya',  
                            type: 'POST',  
                            dataType: 'json',  
                            data: emp,  
                            success: function (d) {  
                                bootbox.alert('Data Is Successfully Saved!');  
                                var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');  
                                var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Full Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');  
                                $table.append($header);  
                                $.each(d, function (i, val) {  
                                    var $row = $('<tr/>');  
                                    $row.append($('<td/>').html(val.FirstName + ' ' + val.LastName));  
                                    $row.append($('<td/>').html(val.EmailID));  
                                    $row.append($('<td/>').html(val.City));  
                                    $row.append($('<td/>').html(val.Country));  
                                    $table.append($row);  
                                });  
                                $('#updatePanel').html($table);  
  
                                var frm = document.getElementById('frm1');  
                                frm.reset();  
                            },  
                            error: function () {  
                                $('#error').html('Error! please try with valid data.').show();  
                            }  
                        });  
                    }  
                });  
            });  
            function ValidateForm() {  
                var isAllValid = true;  
                $('.error').hide();  
                $('#error').empty();  
                $('.form-group').removeClass('has-error');  
                if ($('#firstname').val().trim()=="") {  
                    $('#firstname').focus();  
                    $('#firstname').siblings('.error').show();  
                    $('#firstname').parents('.form-group').addClass('has-error');  
                    isAllValid = false;  
                }  
                if ($('#lastname').val().trim() == "") {  
                    $('#lastname').focus();  
                    $('#lastname').siblings('.error').show();  
                    $('#lastname').parents('.form-group').addClass('has-error');  
                    isAllValid = false;  
                }  
                if ($('#email').val().trim() != "") {  
  
                    var expr = /^([a-zA-Z0-9_\-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;  
                    if (!expr.test($('#email').val().trim())) {  
                        $('#email').focus();  
                        $('#email').siblings('.error').show();  
                        $('#email').parents('.form-group').addClass('has-error');  
                        isAllValid = false;  
                    }  
                }  
                return isAllValid;  
            }  
    </script>  
} 

Código Descripción

Creé una función de script para validar el control de formulario llamado "ValidateForm()". Si se valida con éxito, se realizará la operación de publicación de datos y luego recuperará los datos después de la operación de publicación exitosa. Luego, todos los campos de entrada se restablecerán; de lo contrario, se mostrará el mensaje de error debido a datos no válidos.

$.ajax({  
                            url: apiBaseUrl+'api/satya',  
                            type: 'POST',  
                            dataType: 'json',  
                            data: emp,  
                            success: function (d) {  
                                bootbox.alert('Data Is Successfully Saved!');  
                                var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');  
                                var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Full Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');  
                                $table.append($header);  
                                $.each(d, function (i, val) {  
                                    var $row = $('<tr/>');  
                                    $row.append($('<td/>').html(val.FirstName + ' ' + val.LastName));  
                                    $row.append($('<td/>').html(val.EmailID));  
                                    $row.append($('<td/>').html(val.City));  
                                    $row.append($('<td/>').html(val.Country));  
                                    $table.append($row);  
                                });  
                                $('#updatePanel').html($table);  
  
                                var frm = document.getElementById('frm1');  
                                frm.reset();  
                            },  
                            error: function () {  
                                $('#error').html('Error! please try with valid data.').show();  
                            }  
                        }); 

La referencia de CDN debe agregarse para la compatibilidad con mensajes de alerta de bootbox.

bootbox.alert('Data Is Successfully Saved!'); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">  
  
</script> 

Paso 5

Agregue bootstrap css para una buena apariencia en _Layout.cshtml.

@* @Styles.Render("~/Content/css")*@  
    @* Add bootstrap css for good looks *@  
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />  
    @Scripts.Render("~/bundles/modernizr") 

PRODUCCIÓN

La vista de la Parte 3 se verá como se muestra a continuación.

 

Para Validaciones de Nombre y Apellido....

Para la validación del campo de correo electrónico...

 

Para un mensaje de alerta exitoso, publique datos usando la biblioteca javascript de bootbox.

 

Después de publicar correctamente los datos, obtén datos o vincúlalos en la tabla.

 

Compruebe la base de datos para la operación de inserción de registros.

 

Página web responsiva para tabletas y teléfonos móviles.

 

Imagen gif para una mejor comprensión.

 

RESUMEN

  • Publicar y obtener operaciones utilizando un método de acción de controlador en Asp.Net Web API.
  • Publicar datos con validación de control de formulario.
  • Biblioteca javascript de Bootbox para mensajes de alerta.
  • Soporte de respuesta móvil.

Fuente: https://www.c-sharpcorner.com/article/asp-net-web-api-using-mvc-entity-framework-and-jquery-for-post-data-with-valida/ 

#aspdotnet #mvc #entityframework 

What is GEEK

Buddha Community

Uso De MVC, Entity Framework, JQuery Para Obtener Y Publicar Con Valid

Uso De MVC, Entity Framework, JQuery Para Obtener Y Publicar Con Valid

WEB API es la mejor opción para crear un servicio orientado a recursos mediante HTTP/Restful y funciona bien con aplicaciones basadas en MVC. Para más detalles visita mi enlace.

Descripción

En esta sesión, le mostraré cómo insertar registros utilizando la API web de Asp.net o publicar datos en SQL Server. En esta sesión, puede ver las operaciones de obtención y publicación de la API web. De otra manera, puedo decir que insertaremos y recuperaremos registros usando un evento de clic de botón.

Antes de pasar por esta sesión, visite mi sesión anterior.

Código fuente

Pasos a seguir.

Paso 1

Aplicar validación en Modelo.


Vaya a Explorador de soluciones > Entidades (nombre del proyecto) > Satyadabasemodel.tt > Abra Employee.cs.

Referencia del código

//------------------------------------------------------------------------------  
// <auto-generated>  
//    This code was generated from a template.  
//  
//    Manual changes to this file may cause unexpected behavior in your application.  
//    Manual changes to this file will be overwritten if the code is regenerated.  
// </auto-generated>  
//------------------------------------------------------------------------------  
  
namespace Entities  
{  
    using System;  
    using System.Collections.Generic;  
    using System.ComponentModel.DataAnnotations;  
  
    public partial class Employee  
    {  
        public int EmployeeID { get; set; }  
        [Required(ErrorMessage = "First name required", AllowEmptyStrings = false)]  
        public string FirstName { get; set; }  
        [Required(ErrorMessage = "Last name required", AllowEmptyStrings = false)]  
        public string LastName { get; set; }  
        [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",  
            ErrorMessage = "E-mail is not valid")]  
        public string EmailID { get; set; }  
        public string City { get; set; }  
        public string Country { get; set; }  
    }  
} 

Código Descripción

Aquí, he aplicado la validación en el campo de nombre, apellido y correo electrónico. Si el nombre y el apellido estarán vacíos, se mostrará el mensaje de validación. Para el campo de correo electrónico, si el usuario ingresa una dirección de correo no válida con una dirección de dominio incorrecta, el mensaje de validación de correo electrónico se mostrará al usuario final.

Paso 2

Agregue una nueva acción al proyecto SatyaController of SatyaWebApi Web API para Post Data.

Referencia del código

using System;    
using System.Collections.Generic;    
using System.Linq;    
using System.Net;    
using System.Net.Http;    
using System.Web.Http;    
using Entities;    
    
namespace SatyaWebApi.Controllers    
{    
    public class SatyaController : ApiController    
    {    
          
        public HttpResponseMessage Get()    
        {    
            List<Employee> allEmp = new List<Employee>();    
            using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
            {    
                allEmp = dc.Employees.OrderBy(a => a.FirstName).ToList();  
                HttpResponseMessage response;    
                response = Request.CreateResponse(HttpStatusCode.OK, allEmp);    
                return response;    
            }    
        }    
        public HttpResponseMessage Post(Employee emp)    
        {    
            HttpResponseMessage response;    
            if (ModelState.IsValid)    
            {    
                using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())    
                {    
                    dc.Employees.Add(emp);    
                    dc.SaveChanges();    
                }    
                response = Request.CreateResponse(HttpStatusCode.Created, emp);    
    
                //added for get    
    
                List<Employee> allEmp = new List<Employee>();    
                using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
                {    
                    allEmp = dc.Employees.OrderBy(a => a.FirstName).ToList();    
                    HttpResponseMessage response1;    
                    response1 = Request.CreateResponse(HttpStatusCode.OK, allEmp);    
                    return response1;    
                }    
            }    
    
            else    
            {    
                response = Request.CreateResponse(HttpStatusCode.BadRequest, "Error! Please try again with valid data.");    
            }    
            return response;    
        }    
    }    
}   

Código Descripción

En este código, he agregado el método de acción del controlador posterior para realizar los datos posteriores, así como el código agregado sobre la recuperación de datos dentro del método de acción posterior. El siguiente código es para recuperar los datos.

//added for get      
      
                List<Employee> allEmp = new List<Employee>();      
                using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())    
                {      
                    allEmp = dc.Employees.OrderBy(a => a.FirstName).ToList();      
                    HttpResponseMessage response1;      
                    response1 = Request.CreateResponse(HttpStatusCode.OK, allEmp);      
                    return response1;      
                }   

Código para insertar datos,

HttpResponseMessage response;  
           if (ModelState.IsValid)  
           {  
               using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
               {  
                   dc.Employees.Add(emp);  
                   dc.SaveChanges();  
               }  
               response = Request.CreateResponse(HttpStatusCode.Created, emp); 

dc.Employees.Add(emp);  
 dc.SaveChanges(); 

Aquí, el uso del objeto datacontext agrega datos y pasa al parámetro emp en el método de acción posterior y guarda todos los cambios realizados en esto en la base de datos subyacente. 

else  
            {  
                response = Request.CreateResponse(HttpStatusCode.BadRequest, "Error! Please try again with valid data.");  
            } 

Si se encuentra algún problema de conexión o cualquier problema relacionado en el código o datos no válidos durante la operación posterior, se mostrará el mensaje de error al usuario final.

Paso 3

Agregue una nueva acción al HomeController en SatyaConsumingApi para ver los datos de la publicación.

 

Referencia del código

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net.Http;  
using System.Web;  
using System.Web.Mvc;  
using Entities;  
  
namespace SatyaConsumingApi.Controllers  
{  
    public class HomeController : Controller  
    {  
        public ActionResult Part1()  
        {  
            return View();  
        }  
  
        public ActionResult Part2()  
        {  
            List<Employee> list = new List<Employee>();  
            HttpClient client = new HttpClient();  
            var result = client.GetAsync("http://localhost:47250/api/satya").Result;  
            if (result.IsSuccessStatusCode)  
            {  
                list = result.Content.ReadAsAsync<List<Employee>>().Result;  
            }  
            return View(list);  
        }  
        public ActionResult Part3()  
        {  
            return View();  
        }  
  
    }  
} 

Código Descripción

Aquí, la Parte 3 es la nueva acción del controlador mencionada en la aplicación cliente MVC.

Etapa 4

Agregar vista para la acción.

Referencia del código

@{  
    ViewBag.Title = "Satyaprakash - Post Data To Web API Using jQuery With Validation";  
}  
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">  
  
</script>  
  
<style>  
    .error, #error {  
        color: red;  
        display: none;  
    }  
  
    table {  
        font-family: arial, sans-serif;  
        border-collapse: collapse;  
        width: 100%;  
    }  
  
    td, th {  
        border: 1px solid #dddddd;  
        text-align: left;  
        padding: 8px;  
    }  
  
    tr:nth-child(even) {  
        background-color: #dddddd;  
    }  
  
    .button {  
        background-color: #4CAF50;  
        border: none;  
        color: white;  
        padding: 15px 32px;  
        text-align: center;  
        text-decoration: none;  
        display: inline-block;  
        font-size: 16px;  
        margin: 4px 2px;  
        cursor: pointer;  
    }  
  
    .button4 {  
        border-radius: 9px;  
    }  
</style>  
  
<div style="padding:10px ; align-content:center">  
    <fieldset>  
        <legend style="font-family:Arial Black;color:blue">Post Data To Web API Using jQuery With Validation</legend>  
    </fieldset>  
</div>  
  
<div class="container1">  
    <form id="frm1" role="form" style="max-width:500px">  
        <div class="form-group">  
            <div id="error"> </div>  
        </div>  
        <div class="form-group">  
            <label for="firstname" style="color:blue">First Name:</label>  
            <input type="text" class="form-control" id="firstname" placeholder="please enter First Name">  
            <span class="error">Please provide First Name</span>  
        </div>  
        <div class="form-group">  
            <label for="lastname" style="color:blue">Last Name:</label>  
            <input type="text" class="form-control" id="lastname" placeholder="please enter Last Name">  
            <span class="error">Please provide Last Name</span>  
        </div>  
        <div class="form-group">  
            <label for="email" style="color:blue">Email:</label>  
            <input type="text" class="form-control" id="email" placeholder="please enter Email-Id">  
            <span class="error">Invalid email ID</span>  
        </div>  
        <div class="form-group">  
            <label for="city" style="color:blue">City:</label>  
            <input type="text" class="form-control" id="city" placeholder="please enter City">  
        </div>  
        <div class="form-group">  
            <label for="country" style="color:blue">Country:</label>  
            <input type="text" class="form-control" id="country" placeholder="please enter Country">  
        </div>  
        <button type="submit" class="button button4">Submit</button>  
    </form>  
</div>  
  
<div id="updatePanel" style="width:90%; margin:0 auto; padding:10px">  
  
</div>  
  
@section Scripts{  
    <script>  
            $(document).ready(function () {  
                var apiBaseUrl = "http://localhost:47250/";  
                $('#frm1').submit(function (e) {  
                    e.preventDefault();  
                    var isOK = ValidateForm();  
                    if (isOK) {  
                        var emp = {  
                            EmployeeID: 0,  
                            FirstName: $('#firstname').val().trim(),  
                            LastName: $('#lastname').val().trim(),  
                            EmailID: $('#email').val().trim(),  
                            City: $('#city').val().trim(),  
                            Country: $('#country').val().trim()  
                        };  
  
                        //Save  
                        $.ajax({  
                            url: apiBaseUrl+'api/satya',  
                            type: 'POST',  
                            dataType: 'json',  
                            data: emp,  
                            success: function (d) {  
                                bootbox.alert('Data Is Successfully Saved!');  
                                var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');  
                                var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Full Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');  
                                $table.append($header);  
                                $.each(d, function (i, val) {  
                                    var $row = $('<tr/>');  
                                    $row.append($('<td/>').html(val.FirstName + ' ' + val.LastName));  
                                    $row.append($('<td/>').html(val.EmailID));  
                                    $row.append($('<td/>').html(val.City));  
                                    $row.append($('<td/>').html(val.Country));  
                                    $table.append($row);  
                                });  
                                $('#updatePanel').html($table);  
  
                                var frm = document.getElementById('frm1');  
                                frm.reset();  
                            },  
                            error: function () {  
                                $('#error').html('Error! please try with valid data.').show();  
                            }  
                        });  
                    }  
                });  
            });  
            function ValidateForm() {  
                var isAllValid = true;  
                $('.error').hide();  
                $('#error').empty();  
                $('.form-group').removeClass('has-error');  
                if ($('#firstname').val().trim()=="") {  
                    $('#firstname').focus();  
                    $('#firstname').siblings('.error').show();  
                    $('#firstname').parents('.form-group').addClass('has-error');  
                    isAllValid = false;  
                }  
                if ($('#lastname').val().trim() == "") {  
                    $('#lastname').focus();  
                    $('#lastname').siblings('.error').show();  
                    $('#lastname').parents('.form-group').addClass('has-error');  
                    isAllValid = false;  
                }  
                if ($('#email').val().trim() != "") {  
  
                    var expr = /^([a-zA-Z0-9_\-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;  
                    if (!expr.test($('#email').val().trim())) {  
                        $('#email').focus();  
                        $('#email').siblings('.error').show();  
                        $('#email').parents('.form-group').addClass('has-error');  
                        isAllValid = false;  
                    }  
                }  
                return isAllValid;  
            }  
    </script>  
} 

Código Descripción

Creé una función de script para validar el control de formulario llamado "ValidateForm()". Si se valida con éxito, se realizará la operación de publicación de datos y luego recuperará los datos después de la operación de publicación exitosa. Luego, todos los campos de entrada se restablecerán; de lo contrario, se mostrará el mensaje de error debido a datos no válidos.

$.ajax({  
                            url: apiBaseUrl+'api/satya',  
                            type: 'POST',  
                            dataType: 'json',  
                            data: emp,  
                            success: function (d) {  
                                bootbox.alert('Data Is Successfully Saved!');  
                                var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');  
                                var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Full Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');  
                                $table.append($header);  
                                $.each(d, function (i, val) {  
                                    var $row = $('<tr/>');  
                                    $row.append($('<td/>').html(val.FirstName + ' ' + val.LastName));  
                                    $row.append($('<td/>').html(val.EmailID));  
                                    $row.append($('<td/>').html(val.City));  
                                    $row.append($('<td/>').html(val.Country));  
                                    $table.append($row);  
                                });  
                                $('#updatePanel').html($table);  
  
                                var frm = document.getElementById('frm1');  
                                frm.reset();  
                            },  
                            error: function () {  
                                $('#error').html('Error! please try with valid data.').show();  
                            }  
                        }); 

La referencia de CDN debe agregarse para la compatibilidad con mensajes de alerta de bootbox.

bootbox.alert('Data Is Successfully Saved!'); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">  
  
</script> 

Paso 5

Agregue bootstrap css para una buena apariencia en _Layout.cshtml.

@* @Styles.Render("~/Content/css")*@  
    @* Add bootstrap css for good looks *@  
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />  
    @Scripts.Render("~/bundles/modernizr") 

PRODUCCIÓN

La vista de la Parte 3 se verá como se muestra a continuación.

 

Para Validaciones de Nombre y Apellido....

Para la validación del campo de correo electrónico...

 

Para un mensaje de alerta exitoso, publique datos usando la biblioteca javascript de bootbox.

 

Después de publicar correctamente los datos, obtén datos o vincúlalos en la tabla.

 

Compruebe la base de datos para la operación de inserción de registros.

 

Página web responsiva para tabletas y teléfonos móviles.

 

Imagen gif para una mejor comprensión.

 

RESUMEN

  • Publicar y obtener operaciones utilizando un método de acción de controlador en Asp.Net Web API.
  • Publicar datos con validación de control de formulario.
  • Biblioteca javascript de Bootbox para mensajes de alerta.
  • Soporte de respuesta móvil.

Fuente: https://www.c-sharpcorner.com/article/asp-net-web-api-using-mvc-entity-framework-and-jquery-for-post-data-with-valida/ 

#aspdotnet #mvc #entityframework 

Einar  Hintz

Einar Hintz

1602560783

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.

Sub-topics discussed :

  • Form design for insert and update operation.
  • Display forms in modal popup dialog.
  • Form post using jQuery Ajax.
  • Implement MVC CRUD operations with jQuery Ajax.
  • Loading spinner in .NET Core MVC.
  • Prevent direct access to MVC action method.

Create ASP.NET Core MVC Project

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From new project window, Select Asp.Net Core Web Application_._

Image showing how to create ASP.NET Core Web API project in Visual Studio.

Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.

Showing project template selection for .NET Core MVC.

Setup a Database

Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.

Showing list of NuGet Packages for Entity Framework Core

Now let’s define DB model class file – /Models/TransactionModel.cs.

public class TransactionModel
{
    [Key]
    public int TransactionId { get; set; }

    [Column(TypeName ="nvarchar(12)")]
    [DisplayName("Account Number")]
    [Required(ErrorMessage ="This Field is required.")]
    [MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
    public string AccountNumber { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Beneficiary Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BeneficiaryName { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Bank Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BankName { get; set; }

    [Column(TypeName ="nvarchar(11)")]
    [DisplayName("SWIFT Code")]
    [Required(ErrorMessage = "This Field is required.")]
    [MaxLength(11)]
    public string SWIFTCode { get; set; }

    [DisplayName("Amount")]
    [Required(ErrorMessage = "This Field is required.")]
    public int Amount { get; set; }

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }
}

C#Copy

Here we’ve defined model properties for the transaction with proper validation. Now let’s define  DbContextclass for EF Core.

#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup

How To Validate Password And Confirm Password Using JQuery

In this post I will show you how to validate password and confirm password using jQuery, Validation is basic and important feature for authentication user so here i will give you demo about password and confirm password validation using jquery.

In jquery we are using keyup event to check whether password and confirm password is match or not.

Read More : How To Validate Password And Confirm Password Using JQuery

https://websolutionstuff.com/post/how-to-validate-password-and-confirm-password-using-jquery

#javascript #jquery #validation #validate password and confirm password #validate password in jquery #validate password and confirm password in jquery

joe biden

1615785369

Converta e-mails EML para Adobe PDF com o conversor de EML para PDF

Para converter arquivos EML em formato PDF, o Datavare é o aplicativo mais adequado. O aplicativo oferece muitas vantagens para que os usuários possam converter os arquivos facilmente. Isso ajuda a fazer uma conversão direta. O aplicativo é mais adequado para cada usuário e, portanto, converte os arquivos EML de uma forma precisa e sem erros. Qualquer usuário pode fazer a conversão de arquivos EML para o formato PDF, pois o aplicativo é muito fácil de operar. Usuários sem formação técnica também podem usar este aplicativo incrível sem qualquer problema.

Embora o aplicativo seja muito avançado, ainda assim, com sua interface gráfica amigável, é fácil converter arquivos EML para o formato PDF. Para tal não é necessária qualquer tipo de assistência técnica. A tarefa de conversão é fácil e simples de fazer com este aplicativo de terceiros. É um aplicativo altamente compatível que funciona perfeitamente em qualquer versão do Windows. Para usar o aplicativo, não é necessário que a versão do Windows seja a mais recente ou a mais antiga.

Além disso, há muitas vantagens em usar esse aplicativo notável. Vamos falar sobre algumas dessas vantagens que ela confere:

  • Concede conversão direta
  • Transfere arquivos em alta velocidade
  • Sem restrição de tamanho
  • Aplicação independente
  • Conversão sem erros

Essas vantagens tornam o aplicativo mais adequado para uso. Vale a pena usar este aplicativo para converter arquivos EML em formato PDF. Baixe sua versão de teste agora.

Passos para conversão

Para continuar a tarefa de conversão, é necessário seguir alguns passos. O processo de conversão ocorre em um processo passo a passo. Essas etapas são muito fáceis de executar por qualquer usuário. Não há necessidade de nenhuma orientação técnica para auxiliar essas etapas.

Agora, vamos apenas dar uma olhada nessas etapas simples, depois de baixar e iniciar o aplicativo;
Passo 1- Abra o aplicativo e escolha os arquivos EML que você deseja apenas converter.
Etapa 2 - Escolha o local onde deseja salvar os arquivos convertidos.
Etapa 3- Clique no botão converter agora.

Com essas 3 etapas fáceis, você pode converter seus arquivos EML em formato PDF.

Essas etapas são muito fáceis, e o aplicativo também fornece instantâneos adequados das etapas fornecidas para a assistência adequada do usuário. Além disso, uma interface de usuário fácil é fornecida pelo aplicativo para oferecer suporte a seus usuários. Em primeiro lugar, use a versão demo do aplicativo.

Características principais

Com muitas vantagens, o aplicativo também disponibiliza alguns recursos fundamentais aos seus usuários para a melhor conversão dos arquivos EML. Vejamos alguns desses recursos:

Conversão perfeita
Com uma velocidade rápida, é imprescindível que seus arquivos sejam convertidos na perfeição, sem nenhuma alteração dos dados. Este aplicativo é adequado para converter seus dados na perfeição.

Conversão seletiva
É necessário que os arquivos que você escolher sejam os que somente devem ser convertidos. Portanto, este aplicativo inteligente converte apenas os arquivos que você seleciona para a conversão. Não, outros arquivos EML são convertidos para o formato PSF.

Conversão em lote
Os dados que você escolher são convertidos em lotes. Isso significa que você pode escolher os arquivos que deseja converter ou pode escolher a pasta. Somando-se a isso, a filtragem de arquivos é fornecida no modo de arquivo

Salve os dados de acordo
Você pode escolher os arquivos a serem convertidos, bem como o local. O aplicativo oferece suporte ao salvamento personalizado de dados. Isso significa que, sem qualquer obrigação, você pode salvar seus dados de forma fácil e adequada. Esses recursos fornecem um resultado proveitoso para os usuários.

Declaração final

Os usuários podem baixar o EML para PDF Converter para converter seus arquivos EML para o formato PD. O aplicativo é fácil de usar em qualquer versão do Windows. O usuário pode converter quantos arquivos quiser sem qualquer obrigação, uma vez que adquira a versão licenciada do aplicativo.

Recursos como conversão em alta velocidade, excelente precisão e grande compatibilidade tornam o uso do aplicativo mais útil. Este aplicativo independente executa a tarefa de conversão diretamente sem qualquer problema. Portanto, experimente a versão demo gratuita do aplicativo agora e examine-o convertendo seus poucos arquivos EML em formato PDF.
Se você enfrentar algum tipo de problema também pode entrar em contato com o número de atendimento ao cliente fornecido pelo aplicativo ao seu usuário. Este serviço de ajuda ao cliente está disponível 24 horas por dia, 7 dias por semana.

Mais informações:- https://www.datavare.com/software/eml-to-pdf-converter-expert.html

#conversor de eml para pdf #migração de eml para pdf #exportador de eml para pdf #converter eml para pdf #importar eml para pdf

Implement Custom method in Asp.Net MVC using Entity Framework with Repository Pattern

#aspdotnetexplorer
#repository
#pattern
https://www.youtube.com/watch?v=q6Y1asskM3g

#asp.net mvc #entity framework #repository pattern #asp.net mvc using entity framework