Crear aplicacion web en .net MVC con Bootstrap, JQUERY, AJAX,SQL y JSON

Arquitectura de software MVC, la cual se encarga de separar los datos de una aplicación representando al Modelo, la interfaz de usuario representando la Vista, y la lógica de control que representa al Controlador.

En bundle:

using System.Web;
using System.Web.Optimization;

namespace WebApplication3
{
public class BundleConfig
{
// Para obtener más información sobre las uniones, visite https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

// Utilice la versión de desarrollo de Modernizr para desarrollar y obtener información. De este modo, estará
// para la producción, use la herramienta de compilación disponible en https://modernizr.com para seleccionar solo las pruebas que necesite.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));

//Agregamos la ruta y el nombre del archivo js que vamos a utilizar
bundles.Add(new ScriptBundle("~/bundles/funcionesJS").Include(
"~/Scripts/BSD/funcionesJS.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/BSD/Style1.css"));
}
}
}

en Layout:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - BSD</title>
@*CSS de Bootstrap*@
@Styles.Render("~/Content/css")
@*Modernzr*@
@Scripts.Render("~/bundles/modernizr")
@*CSS y JS de Iconos Fontawesome*@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
@*CSS de datatables.net*@
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">

<script src="~/Scripts/echarts/echarts.js.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container body-content">


@RenderBody()
<hr />


<footer>
<p>© @DateTime.Now.Year - Mi aplicación ASP.NET</p>
</footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

@*archivo personalizado JS*@
@Scripts.Render("~/bundles/funcionesJS")

@*Script de Datatable*@
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>


</body>
</html>

En Controller: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
// agregamos el nombre de espacio donde se encuentran los Repositorios
using WebApplication3.Models;

 

namespace WebApplication3.Controllers
{
public class BSDController : Controller
{


//Creamos el objeto repositorios para ocupar los metodos de CRUD
Repositorios repositorio = new Repositorios();

// GET: BSD
public ActionResult Index()
{
return View();
}

/// <summary>
/// Creamos un método de acción denominado MostrarConsultaPersonas()
/// en el BSDController, para general la lista de la consulta en el formato Json.
/// </summary>
/// <returns></returns>
//HttpGet para indicar que es una consulta de datos:
[HttpGet]
//JsonResult es un tipo de ActionResult en MVC.
//Ayuda a enviar el contenido en formato JSON (JavaScript Object Notation)
public JsonResult MostrarConsultaPersonas()
{
//declaramos los parametros, en este caso no tiene, la podemos quitar si queremos.
var Parametros = new object[] { };
//Mandamos a traer los datos del repositorio que enviará en formato JSON
var Datos = repositorio.ConsultaPersonas();
//Creamos la variable donde los datos se convertiran en JSON y se almacenarán.
//Debe ser verdare para mostrar los datos
//El tipo de contenido predeterminado para JSON es application/json; y el el ContentEncoding el juego de caracteres es utf-8.
//JsonRequestBehavior: esta propiedad tiene dos opciones. Esos son AllowGet y DenyGet. La opción predeterminada es DenyGet. Cuando envía datos en formato JSON, utilizando Obtener solicitud, es necesario especificar la propiedad como AllowGet, de lo contrario, muestra el error como "La solicitud se bloquearía ya que los datos JSON se consideran información de datos confidenciales".
var jsonResult = Json(new { success = true, data = Datos }, "application/json", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet);
//MaxJsonLength nos ayuda a obtener o establecer la longitud máxima de contenido JSON que enviará. El valor predeterminado para esto es 2097152 caracteres, que es igual a 4 MB de datos de cadena Unicode. Incluso puede aumentar el tamaño según sea necesario, para eso tendrá una idea más adelante en este artículo.
jsonResult.MaxJsonLength = int.MaxValue;
//Regresamos los datos en el formato JSON
return jsonResult;
}


public JsonResult AgregarPersonasBD(string Nombre, string Apellido, string Sexo, string Telefono, string Email, int Edad)
{
var parametros = new object[]{ Nombre, Apellido, Sexo, Telefono, Email, Edad };
var Datos = repositorio.AgregarPersona(Nombre, Apellido, Sexo, Telefono, Email, Edad);
var jsonResult = Json(new { success = true, data = Datos}, "application/json", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet);

jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}

public JsonResult EliminarPersonaBD(int Id)
{
var parametros = new object[] { Id };
var Datos = repositorio.EliminarPersona(Id);
var jsonRsult = Json(new{success=true, data=Datos },"application/json",System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet);
jsonRsult.MaxJsonLength = int.MaxValue;
return jsonRsult;
}

public JsonResult ModoficarPersonaBD(int Id, string Nombre, string Apellido, string Sexo, string Telefono, string Email, int Edad) {
var parametros = new object[] { Id, Nombre, Apellido, Sexo, Telefono, Email, Edad };
var Datos = repositorio.ModificarPersona(Nombre, Apellido, Sexo, Telefono, Email, Edad, Id);
var jsonResult = Json(new { success=true, data=Datos },"application/json", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}


}
}

En Style1:

body {

/*Fondo de imagen el el cuerpo de la pagina*/
background: url(../../Content/BSD/img/background.jpg) no-repeat center center fixed;

/*tamaño de imagen completa*/
background-size: cover;
}

.margensuperior {
/*margen superior*/
margin-top: 8%;
/*margen inferior*/
margin-bottom: 0%;
}
.margen{
/*margen superior*/
margin-top: 3%;
}

/*Alinea Texto a label izquierda*/
.text-left {
text-align: left !important;
}


.user-img {
/*margen superior*/
margin-top: -8%;
/*margen inferior*/
margin-bottom: 0%;
}

.user-img img {
/*tamaño de imagen*/
width: 40%;
height: 40%;
/*borde de la imagen*/
border-radius: 50%;
}

.table-hover tbody tr:hover {
color: #212529;
background-color: #ccc !important;
}

.color-tabla {
background-color:#fff;
border-radius:10px;

padding: 15px;
}
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}

tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}

 

En Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication3.Models
{
public class PersonaModels
{
//Agregamos las propiedades de la BD

public int Id { get; set; }
public string Nombre { get; set; }
public string Apellido { get; set; }
public string Sexo { get; set; }
public string Telefono { get; set; }
public string Email { get; set; }
public int Edad { get; set; }
}
}

 

En Index

@{
ViewBag.Title = "Prueba";
}

<!--Contenido de la página-->
<div class="container">

<!--Inicia Contenido de Registro/////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row margensuperior">

<!--Card Registro-->
<div class="card col-md-12 modal-content modal-dialog text-center">

<div class="user-img img">
<img src="~/Content/BSD/img/default-avatar.jpg" class="user-img img" alt="...">
</div>

<div class="card-body">
<h3 class="card-title">Registro de Usuarios</h3>

<!--Formulario de Registro-->

<form class="text-left">

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputNombre">Nombre :</label>
<input type="text" class="form-control" id="nombre" placeholder="Nombre">
</div>
<div class="form-group col-md-6">
<label for="inputApellido">Apellido :</label>
<input type="text" class="form-control" id="apellido" placeholder="Apellido">
</div>
</div>

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputSexo">Sexo :</label>
<select id="sexo" class="form-control">
<option selected value="">Seleccionar...</option>
<option value="M">Mujer</option>
<option value="H">Hombre</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputEdad">Edad</label>
<input type="number" maxlength="2" class="form-control" id="edad" placeholder="Edad">
</div>
</div>

<div class="form-group">
<label for="inputTelefono">Telefono</label>
<input type="tel" class="form-control" id="telefono" placeholder="Numero de telefono">
</div>

<div class="form-group">
<label for="inputEmail">Correo Electrónico</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>

<div class="text-center">
<button type="button" onclick="ValidarDatos();" class="btn btn-primary"><i class="fas fa-sign-in-alt"></i>Agregar Registro</button>
</div>

</form>

<!--Finaliza Formulario-->
</div>
</div>
<!--Terninar Card-->
</div>
<!--Termina contenido de Registro-->
<!--Contenido de la tabla(Datatable)/////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row color-tabla">
<div class="col-lg-12">
<table id="mytable" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">

<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Sexo</th>
<th scope="col">Telefono</th>
<th scope="col">Email</th>
<th scope="col">Edad</th>
<th scope="col" class='text-center'>Acciones</th>
</tr>
</thead>
<tbody class="col-md-12" id="bodytable">
<!--Datos de la tabla-->
</tbody>
</table>
</div>
</div>
<!--Ternima contenido de la tabla(Datatable)-->


<!--Contenido de modal para la modificacion de registro//////////////////////////////////////////////////////////////////////////////-->
<div class="row">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modificar Registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="text-left">

<input type="hidden" class='form-control' name='idM' id='idM'>

<div class="form-row">
<div class="form-group col-md-6">
<label for="inpoutNombre">Nombre :</label>
<input type="text" class="form-control" id="nombreM" placeholder="Nombre">
</div>
<div class="form-group col-md-6">
<label for="inputApellido">Apellido :</label>
<input type="text" class="form-control" id="apellidoM" placeholder="Apellido">
</div>
</div>

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputSexo">Sexo :</label>
<select id="sexoM" class="form-control">
<option selected value="">Seleccionar...</option>
<option value="M">Mujer</option>
<option value="H">Hombre</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputEdad">Edad</label>
<input type="number" maxlength="2" class="form-control" id="edadM" placeholder="Edad">
</div>
</div>

<div class="form-group">
<label for="inputTelefono">Telefono</label>
<input type="tel" class="form-control" id="telefonoM" placeholder="Numero de telefono">
</div>

<div class="form-group">
<label for="inputEmail">Correo Electrónico</label>
<input type="email" class="form-control" id="emailM" placeholder="[email protected]">
</div>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar Cambios</button>
</div>

</form>
</div>
</div>
</div>
</div>
</div>
<!--Termina contenido de modal para modificar registros-->


<!--Aqui una Grafica-->
<div class="row">
<div class="col-lg-12 margen">
<div class="card">
<div class="card-body">
<div id="echart1" style="width:100%; height:400px;" class="col-lg-12"></div>
</div>
</div>
</div>
</div>
<!--Termina la Grafica-->

</div>
<!--Termina el contenido de la página-->

 

 

en webconfig

<connectionStrings>
<!--Aquí agregamos la coneccion de BD
..........Enlace de coneccion .........nombre del proveedor de BD ...............Nombre del Servidor..............nombre de la BD...........Seguridad, Usuario y contraseña para coneccion al Servidor de BD-->
<add name="ConexionBD_Registro" providerName="System.Data.SqlClient" connectionString="Data Source=SONYVAIOSQLEXPRESS;Initial Catalog=Registro;Integrated Security=true;User ID=sa;Password=12345;MultipleActiveResultSets=True" />
</connectionStrings>

en Repositorios:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//Agregamos lo snombres de espacios para la conexion a la BD, su configuracion y Dapper para mapear los objetos de las operaciones CRUD
using System.Data.SqlClient;
using System.Configuration;
using Dapper;

namespace WebApplication3.Models
{
public class Repositorios
{

// Declaramos la cadena de conexión para leer datos de la base de datos Registro.
//SqlConnection es una clase que Representa una conexión a una base de datos de SQL Server. No puede heredarse
//ConfigurationMAnager Proporciona acceso a archivos de configuración para aplicaciones cliente.
//ConectionStrings asigna el nombre a la cadena de conexion.
//creamos una isntancia u objeto SqlConnection
SqlConnection ConexionBD = new SqlConnection(ConfigurationManager.ConnectionStrings["ConexionBD_Registro"].ConnectionString);

//IEnumerable es una Interfaz que Expone un enumerador, que admite una iteración simple sobre una colección no genérica.
public IEnumerable<PersonaModels> ConsultaPersonas()
{
//Creamos el Query que vamos a utilizar para la consulta
string sql = "exec Consulta_Personas;";
// regresamos los datos de la cosnulta del Sql Query
return ConexionBD.Query<PersonaModels>(sql);
}

/// <summary>
/// Metodo para Agregar unregistro a la BD Persona
/// </summary>
/// <param name="Nombre"></param>
/// <param name="Apellido"></param>
/// <param name="Sexo"></param>
/// <param name="Telefono"></param>
/// <param name="Email"></param>
/// <param name="Edad"></param>
/// <returns></returns>
public int AgregarPersona(string Nombre, string Apellido, string Sexo, string Telefono, string Email, int Edad) {

string Sql = "Insert into Persona Values('"+Nombre+ "','" + Apellido + "','" + Sexo + "','" + Telefono + "','" + Email + "',"+ Edad +" )";

var id = ConexionBD.Execute(Sql);
return id;
}

/// <summary>
/// Funcion para Eliminar una persona de la BD
/// </summary>
/// <param name="id"></param>
/// <returns></returns>

//public int EliminarPersona(int Id)
public IEnumerable<PersonaModels> EliminarPersona(int Id)
{
string Sql = "Delete from Persona where id =" + Id + ";";

return ConexionBD.Query<PersonaModels>(Sql);
//var id = ConexionBD.Execute(Sql);
//return id;
}

/// <summary>
/// Funcion para Modificar los datos de la BD
/// </summary>
/// <param name="Nombre"></param>
/// <param name="Apellido"></param>
/// <param name="Sexo"></param>
/// <param name="Telefono"></param>
/// <param name="Email"></param>
/// <param name="Edad"></param>
/// <param name="Id"></param>
/// <returns></returns>
public IEnumerable<PersonaModels> ModificarPersona(string Nombre, string Apellido, string Sexo, string Telefono, string Email, int Edad, int Id) {

string Sql = "update Persona SET Nombre = '"+Nombre+ "', Apellido = '" + Apellido + "', Sexo = '" + Sexo + "', Telefono = '" + Telefono + "', Email = '" + Email + "', Edad = " + Edad + " where Id =" + Id+ "";

return ConexionBD.Query<PersonaModels>(Sql);
}
}
}

 en funciones.js:

$(document).ready(function () {
console.log('listo!');
obtenerPersona();
CargarGrafica();
});

//Modal
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})

//Datatable - Obetener persona y mostrarla en Datatable
function obtenerPersona() {
//Destruir Datatable
var table = $('#mytable').DataTable();
table.destroy();
//Vaciar -Tabla de datos
$("#bodytable").empty();
$.ajax({
url: 'http://localhost:53553/BSD/MostrarConsultaPersonas',
data: {},
type: 'GET',
dataType: 'json',
success: function (response) {
for (var i = 0; i < response.data.length; i++) {
//Valores para sexo (h y m)
var S = response.data[i].Sexo;
var sex;
if (S == 'H') sex = 'Hombre';
if (S == 'M') sex = 'Mujer';
if (S == '') sex = 'Nulo';
//Imprimir datos en tabla
$("#bodytable").append(
"<tr>" +
"<th>" + response.data[i].Id + "</th>" +
"<td>" + response.data[i].Nombre + "</td>" +
"<td>" + response.data[i].Apellido + "</td>" +
"<td>" + sex + "</td>" +
"<td class='text-xl-center'>" + response.data[i].Telefono + "</td>" +
"<td class='text-justify'>" + response.data[i].Email + "</td>" +
"<td class='text-justify'>" + response.data[i].Edad + "</td>" +
"<td class = 'text-center'><button type='button' onclick='EliminarPersona(" + response.data[i].Id + ")' class='btn btn-danger'><i class='far fa-trash-alt'></i></button>" +
"<button type='button' onclick='BuscarPersona()' class='click btn btn-success'><i class='far fa-edit'></i></button></td>" +
"</tr>"
);
}
$('#mytable').DataTable({
columns: [
{ 'data': 'Id' },
{ 'data': 'Nombre' },
{ 'data': 'Apellido' },
{ 'data': 'Sexo' },
{ 'data': 'Telefono' },
{ 'data': 'Email' },
{ 'data': 'Edad' },
{ 'data': 'Accion' }
],

//Exportar datos:
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
},

error: function (jqXHR, status, error) {
alert('Disculpe, existió un problema');
},
complete: function (jqXHR, status) {
}
});
}

//Grafica echart
function CargarGrafica() {

$.ajax({
// la URL para la petición
url: 'http://localhost:53553/BSD/MostrarConsultaPersonas',

// la información a enviar
// (también es posible utilizar una cadena de datos)
data: {},

// especifica si será una petición POST o GET
type: 'GET',

// el tipo de información que se espera de respuesta
dataType: 'json',

// código a ejecutar si la petición es satisfactoria;
// la respuesta es pasada como argumento a la función
success: function (response) {

var arregloNombres = [];
var arregloEdades = [];

for (var i = 0; i < response.data.length; i++) {

var Nombres = response.data[i].Nombre.toString();
var Edades = response.data[i].Edad;
arregloNombres.push(Nombres);
arregloEdades.push(Edades);

}

var myChart = echarts.init(document.getElementById('echart1'));

// specify chart configuration item and data
var option = {
title: {
text: 'Edad de Personas Registradas'
},
tooltip: {},
legend: {
data: ['Edad']
},
xAxis: {
data: arregloNombres
},
yAxis: {
max: 100,
min: 0
},
series: [{
name: 'Edad',
type: 'bar',
data: arregloEdades
}]
};

// use configuration item and data specified to show chart
myChart.setOption(option);
},

// código a ejecutar si la petición falla;
// son pasados como argumentos a la función
// el objeto jqXHR (extensión de XMLHttpRequest), un texto con el estatus
// de la petición y un texto con la descripción del error que haya dado el servidor
error: function (jqXHR, status, error) {
alert('Disculpe, existió un problema');
},

// código a ejecutar sin importar si la petición falló o no
complete: function (jqXHR, status) {
//alert('Petición realizada');
}
});

}

//Validacion de datos para formulario
function ValidarDatos() {
var Nombre = $('#nombre').val();
var Apellido = $('#apellido').val();
var Sexo = $('#sexo').val();
var Telefono = $('#telefono').val();
var Email = $('#email').val();
var Edad = $('#edad').val();

if (Nombre == "" & Apellido == "" & Sexo == "" & Telefono == "" & Edad=="" & Email == "") {

alert('Todos los campos son necesarios!');
}

else {

//Validar datos
//validacion de nombre
if (!/[a-z.]+/.test(Nombre)) {
alert("!Tu nombre debe contener letras!")
return (false)
}

//validacion de apellido
if (!/[a-z.]+/.test(Apellido)) {
alert("!Tu apellido debe contener letras!")
return (false)
}

//validacion de sexo
if (Sexo == "") {
alert("!Selecciona tu sexo !")
return (false)
}

//Validacion de Edad
if (!/[0-9]/.test(Edad)) {
alert("!Tu edad debe tener 1 o 2 numeros!")
return (false)
}
if (Edad.length != 2) {
alert("!Debes ingresar maximo 2 numeros para tu edad")
return (false)
}

//Validacion de telefono
if (!/[0-9]/.test(Telefono)) {
alert("!Tu numero de telefomo solo debe contener numeros!")
return (false)
}

if (Telefono.length != 10) {
alert("!Debes ingresar 10 numeros para tu telefono")
return (false)
}

//Validacion de email
if (!/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(Email)) {
alert("!Tu email es incorrecto!")
return (false)
}

$.ajax({
url: 'http://localhost:53553/BSD/AgregarPersonasBD',
data: {
"Nombre": Nombre,
"Apellido": Apellido,
"Sexo": Sexo,
"Telefono": Telefono,
"Email": Email,
"Edad": Edad,
},
type: 'POST',
dataType: 'json',
success: function (response) {
obtenerPersona();
CargarGrafica();
},
error: function (jqXHR, status, error) {
alert('Disculpe, existió un problema');
},
complete: function (jqXHR, status) {
alert('Los Datos se guardaron Correctamente');
$("#nombre").val("");
$("#apellido").val("");
$("#sexo").val("");
$("#telefono").val("");
$("#email").val("");
$("#edad").val("");
}
});
}
}

//Emilinar Datos
function EliminarPersona(Id) {

$.ajax({
url: 'http://localhost:53553/BSD/EliminarPersonaBD',
data: { "id": Id },
type: 'POST',
dataType: 'json',
success: function () {
obtenerPersona();
CargarGrafica();
},
error: function (jqXHR, status, error) {
alert('Disculpe, existió un problema');
},
complete: function (jqXHR, status) {
alert('Los Datos se eliminaron correctamente');
}
});
}

function ValidacionModals() {

var idM = $("#idM").val();

var nombreM = $("#nombreM").val();

var apellidoM = $("#apellidoM").val();

var sexoM = $("#sexoM").val();

var telefonoM = $("#telefonoM").val();

var emailM = $("#emailM").val();


if (nombreM == "" && apellidoM == "" && sexoM == "" && telefonoM == "" && emailM == "") {

alert("¡Ingresa todos los datos requeridos!");
}
else {


//validacion de nombre
if (!/[a-z.]+/.test(nombreM)) {
alert("!Tu nombre debe contener letras!")
return (false)
}

//validacion de apellido
if (!/[a-z.]+/.test(apellidoM)) {
alert("!Tu apellido debe contener letras!")
return (false)
}

//validacion de sexo
if (sexoM == "") {
alert("!Selecciona tu sexo !")
return (false)
}


//Validacion de telefono
if (!/[0-9]/.test(telefonoM)) {
alert("!Tu numero de telefomo solo debe contener numeros!")
return (false)
}

if (telefonoM.length != 10) {
alert("!Debes ingresar 10 numeros para tu telefono")
return (false)
}

//Validacion de email
if (!/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(emailM)) {
alert("!Tu email es incorrecto!")
return (false)
}

//Ajax - Muestra los datos solicitados en una tabla

$.ajax({
// la URL para la petición
url: 'http://localhost:55321/Login/UpdatePersonas',

// la información a enviar
// (también es posible utilizar una cadena de datos)
data: {
"Id": idM,
"Nombre": nombreM,
"Apellido": apellidoM,
"Sexo": sexoM,
"Telefono": telefonoM,
"Email": emailM,
"Edad": edadM,
},

// especifica si será una petición POST o GET
type: 'POST',

// el tipo de información que se espera de respuesta
dataType: 'json',

// código a ejecutar si la petición es satisfactoria;
// la respuesta es pasada como argumento a la función
success: function () {
obtenerPersona();
},

// código a ejecutar si la petición falla;
// son pasados como argumentos a la función
// el objeto jqXHR (extensión de XMLHttpRequest), un texto con el estatus
// de la petición y un texto con la descripción del error que haya dado el servidor
error: function (jqXHR, status, error) {
alert('Disculpe, existió un problema');
},

// código a ejecutar sin importar si la petición falló o no
complete: function (jqXHR, status) {

alert('Los Datos se guardaron Correctamente');
}
});

}
}

function BuscarPersona() {

$('#mytable tbody').on('click', 'tr', function () {
//var Inicializacion = 0;

var table = $('#mytable').DataTable();

var Id = table.row(this).data()["Id"];
var Nombre = table.row(this).data()["Nombre"];
var Apellido = table.row(this).data()["Apellido"];
var Sexo = table.row(this).data()["Sexo"];
var Telefono = table.row(this).data()["Telefono"];
var Email = table.row(this).data()["Email"];
var Edad = table.row(this).data()["Edad"];

var sex = (Sexo === "Hombre") ? "H" : "M";

$("#exampleModal").modal("show");

$("#idM").val(Id);
$("#nombreM").val(Nombre);
$("#apellidoM").val(Apellido);
$("#sexoM").val(sex);
$("#telefonoM").val(Telefono);
$("#emailM").val(Email);
$("#edadM").val(Edad);
});

}

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP