Tutorial de ASP.NET JQuery AJAX, JSON y LINQ : Insertar registro en una tabla

Siguiendo con el post anterior Tutorial de ASP.NET JQuery AJAX usando WebMethods y JSON consulta LinQ, ahora vamos a no solo traer datos del servidor, vamos a insertar los datos enviados en la base de datos.

Podrá ver como utilizando JQuery podemos enviar datos de un formulario HTML a un metodo POST, para que estos datos sean insertado en una tabla.


En el post anterior ya habiamos creado el master y una primera pagina de pruebas.

Ahora vamos a crear un archivo aspx, mejor dicho una pagina, que contenga nuestro formulario.

	<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="InsertExample.aspx.vb" Inherits="InsertExample" %>
	<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
	</asp:Content>
	<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
	<h2>
	Ejemplo de uso de JQuery</h2>
	<hr />
	<h3>
	Segundo ejemplo</h3>
	<h4>
	Insertar un registro en una tabla en la BD utilizando JQuery AJAX y JSON</h4>
	<div>
	<p>
	<input type="text" id="txt_nombre" placeholder="Nombre" />
	</p>
	<p>
	<input type="text" id="txt_paterno" placeholder="Ap. Paterno" />
	</p>
	<p>
	<input type="text" id="txt_materno" placeholder="Ap. Materno" />
	</p>
	<p>
	<input type="text" id="txt_ingreso" placeholder="Ingreso" />
	</p>
	<p>
	<select id="cmb_genero">
	<option>---Genero---</option>
	<option value='F'>Femenino</option>
	<option value='M'>Masculino</option>
	</select>
	</p>
	<p>
	<button type="submit" id="btn_submit">Guardar</button>
	</p>
	</div>
	<script type="text/javascript">
	/* When the page was loaded */
	$(function () {
	$("#btn_submit").click(function () {
	$.ajax({
	type: "POST",
	url: "WSUsuarios.asmx/agregar_usuario",
	data: '{"nombre": "' + $("#txt_nombre").val() + '", "paterno": "' + $("#txt_paterno").val() + '", "materno": "' + $("#txt_materno").val() + '", "ingreso": "' + $("#txt_ingreso").val() + '", "genero": "' + $("#cmb_genero").val() + '"}',
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	success: function (response) {
	if (response.d === "Success") {
	alert("Registrado con exito");
	} else {
	alert(response.d);
	}
	}
	});
	return false;
	});
	});
	</script>
	</asp:Content>

view raw InsertExample.aspx.html hosted with ❤ by GitHub

Con este formulario la idea es ingresar registros en esta tabla.

Vamos a explicar, el codigo Javascript, no creo necesario explicar el codigo HTML.

Dicho codigo nos da como resultado lo siguiente:

En el javascript tenemos

$("#btn_submit").click(function () {
                $.ajax({
                    type: "POST",
                    url: "WSUsuarios.asmx/agregar_usuario",
                    data: '{"nombre": "' + $("#txt_nombre").val() + '", "paterno": "' + $("#txt_paterno").val() + '", "materno": "' + $("#txt_materno").val() + '", "ingreso": "' + $("#txt_ingreso").val() + '", "genero": "' + $("#cmb_genero").val() + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d === "Success") {
                            alert("Registrado con exito");
                        } else {
                            alert(response.d);
                        }
                    }
                });
                return false;
            });

Primero referenciamos al boton btn_submit, usamos el selector # de JQuery para seleccionar por id, agregamos el listener del evento click, y dentro de el definimos nuestra llamada.

Creamos una llamada ajax, con una configuracion similar como la explicada en el post Tutorial de ASP.NET JQuery AJAX usando WebMethods y JSON consulta LinQ, es importante resaltar que en este caso llamada sera al WebMethod agregar_usuario, el cual recibirá como parámetros los campos de nuestra tabla.

Para capturar los valores de los elementos tipo input, utilizamos el metodo val(), asi por ejemplo para capturar el valor del txt_nombre, hacemos este codigo, $("#txt_nombre").val().

Algo que no explique en el post anterior es la estrutura de los datos que se envian al servidor, lo que enviamos es una cadena JSON, que debe tener un formato como el siguiente { "key": "value" }, las doble comillas es parte del formato y deben estar presentes.

Por ultimo definimos que hacer cuando nuestro servidor devuelva que todo fue un exito, esto lo hacemos dentro de success, igual que en la vez anterior, la respuesta se carga en la variable response.

En este caso solo mostraremos el mensaje utilizando la función alert de Javascript.

Y esto es lo que obtendremos

Y asi se ve nuestros datos cuando viajan por la red:

Y en nuestra tabla

Ahora explicaremos que ocurre en el servidor, veamos el codigo

	Imports System.Web
	Imports System.Web.Services
	Imports System.Web.Services.Protocols
	Imports System.Linq
	Imports System.Data.Linq
	Imports DataContext
	Imports Newtonsoft.Json.Linq
	' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
	<System.Web.Script.Services.ScriptService()> _
	<WebService(Namespace:="http://tempuri.org/")> _
	<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
	<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
	Public Class WSUsuarios
	Inherits System.Web.Services.WebService
	<WebMethod()> _
	Public Function ver_usuario(ByVal nombre As String) As String
	Dim dbx As New TestContext
	Dim record = (From u In dbx.Usuarios Where u.nombre.Equals(nombre) Select u).FirstOrDefault
	Dim result = JObject.FromObject(record)
	Return result.ToString
	End Function
	<WebMethod()> _
	Public Function agregar_usuario(ByVal nombre As String, ByVal paterno As String, ByVal materno As String, ByVal ingreso As String, ByVal genero As String) As String
	Dim result As String = "Success"
	Dim dbx As New TestContext
	Dim record As New Usuario
	With record
	.nombre = nombre
	.paterno = paterno
	.materno = materno
	.ingreso = CInt(ingreso)
	.genero = CChar(genero)
	End With
	dbx.Usuarios.InsertOnSubmit(record)
	dbx.SubmitChanges()
	Return result
	End Function
	<WebMethod()> _
	Public Function listar_usuarios() As String
	Dim dbx As New TestContext
	Dim records = (From u In dbx.Usuarios Select u)
	Dim recordsJson As New JObject
	With recordsJson
	.Add(New JProperty("sEcho", 1))
	.Add(New JProperty("iTotalRecords", records.Count))
	.Add(New JProperty("aaData", New JArray( _
	From r As Usuario In records _
	Select New JObject( _
	New JProperty("nombre", r.nombre), _
	New JProperty("paterno", r.paterno), _
	New JProperty("materno", r.materno), _
	New JProperty("ingreso", r.ingreso), _
	New JProperty("genero", CStr(r.genero))
	))))
	End With
	Return recordsJson.ToString
	End Function
	End Class

view raw WSUsuarios.vb hosted with ❤ by GitHub

En el método agregar_usuario, creamos nuestro Contexto, que es quien maneja nuestra conexion a la base de datos.
Creamos un nuevo objeto de nuestra tabla, Dim record As New Usuario, asignamos sus valores y lo insertamos en nuestra tabla, dbx.Usuarios.InsertOnSubmit(record), hacemos un submit para que se ejecuten los cambios dbx.SubmitChanges().

Y eso es todo.

El codigo lo pueden encontrar en mi repositorio Github