WebMatrix, insertando datos mediante jQuery y Razor
Hola, este pequeño post es debido a que recibido varias consultas sobre un ejemplo sencillo de inserción y selección de datos utilizando Webmatrix, con la sintaxis Razor y jQuery.
Lo primero que vamos a hacer es crear la página del formulario, que va a ser muy sencilla:
El código principal de esta pagina es el siguiente:
<form id="formulario" action="GuardaDatos.cshtml">
<label for="tx_nombre">Nombre</label>
<input type="text" name="tx_nombre" id="tx_nombre" />
<label for="tx_nombre">Apellido</label>
<input type="text" name="tx_apellido" id="tx_apellido" />
<label for="tx_edad">Edad</label>
<input type="text" name="tx_edad" id="tx_edad" />
<input type="submit" value="Guardar" />
</form>
<div id="listado">
</div>
Vemos el formulario y el div que va a contener al listado de datos que van a estar almacenados en la BD.
Ahora el JavaScript asociado al evento submit (envio) del formulario:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$('#formulario').submit(function(event) {
event.preventDefault();
var url = $(this).attr('action');
var datos = $(this).serialize();
$.post(url, datos, function(resultado) {
$('#listado').html(resultado);
});
});
});
</script>
Vemos la referencia ha jQuery, luego el manerjo del evento submit, puedes ver que agrego PreventDefault, esto es para prevenir el compotamiento por default del submit, que sería redireccionar a la página GuardaDatos.cshtml. Luego ocupamos la abreviación de $.ajax de jquery, $.post , en donde indicamos la url, en datos enviamos el formulario serializado y luego el resultado que sería el listado de la BD con el registro ya insertado, se va a mostrar en el div #listado
He creado una tabla Personas de la base en la Base de Datos Personas.sdf. De tal manera de poder ir registrando los datos:
Ahora revisemos el código de la página GuardaDatos.cshtml
@{
if (IsPost){
var nombre= Request["tx_nombre"];
var apellido = Request["tx_apellido"];
var edad = Request["tx_edad"];
var respuesta="";
if (String.IsNullOrEmpty(nombre)||
String.IsNullOrEmpty(apellido)||
String.IsNullOrEmpty(edad)) {
<h2>Error, datos sin valores</h2>
}else{
var mibase = Database.Open("Personas");
var sqlInsertar ="Insert into Personas (nombre,
apellido,edad) values (@0,@1,@2)";
mibase.Execute(sqlInsertar,nombre,apellido,edad);
var sql = "SELECT id, nombre, apellido, edad FROM Personas
ORDER BY id";
var Personas = mibase.Query(sql);
<ul>
@foreach (var p in Personas){
<li>@p.nombre,@p.apellido, Edad: @p.edad </li>
}
</ul>
}
}else{
<h2>Request no viene de un post!</h2>
}
}
La sintaxis Razor nos facilita bastante las cosas, primero preguntamos si estamos llamando a esta página mediante un request mediante Post ( si no, enviamos mensaje de error), luego obtenemos los parámetros (Estos son los que se serializaron del formulario anterior). Validamos que los datos tenga valores, y luego ingresamos los datos, para luego hacer un sql para obtener los datos y mostrarlos en una lista. Todo lo que sea impreso en pantalla, ya sea los mensajes de error o la lista, será lo que almacenará en la variable resultado en la llamada Ajax de jQuery.
Obviamente es un ejemplo muy simple no hay validaciones del lado del cliente ni diseño,pero lo importante era crear el ejemplo para que se entendiera.
Saludos!