jueves, 27 de marzo de 2014

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.



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



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

No hay comentarios:

Publicar un comentario

 
Powered by Blogger