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:

image

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:

image

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.

image

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!

4 comentarios en “WebMatrix, insertando datos mediante jQuery y Razor”

  1. Hola Chalalo un favor será posible que compartas el código fuente debido a que no me genera el mismo resultado.. muchas gracias por el aporte

    saludos!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *