[Invitación] WebCast MSDN–CSS3 se toma el mundo!

Como tesoro de guerra de los desarrolladores Web están Photoshop, HTML, JavaScript y, por supuesto, CSS. Mientras CSS comenzó con un papel de menor importancia, cada vez más está tomando el control. Esta sesión examinará el CSS3 más reciente e importante, ¿cómo se puede aplicar a los proyectos en este momento?, ¿qué beneficios puede tener? y ¡lo que podemos esperar tener a nuestra disposición en el futuro al seguir CSS tomando al mundo!

Regístrate en:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032509178&Culture=es-AR

Fecha : 18/04/2012 a las 16:00 horas Chile , 14:00 horas Bogotá

Nos vemos allá!
Saludos!

@chalalo

Tutorial Asp.net Web API con MongoDB – Parte 2.2

Estamos ya en la segunda parte de la segunda parte (2.2), Lengua fuera del tutorial en donde estamos viendo MongoDB + ASP.NET Web API + jQuery. En este post vamos a ver el listar datos y el eliminar.

Url del post anterior:
http://geeks.ms/blogs/gperez/archive/2012/03/19/tutorial-asp-net-web-api-con-mongodb-parte-2-1.aspx

Importante

He hecho cambios desde el post anterior, que nos van ayudar a acceder desde jQuery, el primero tiene que ver con la generación del ObjectID de la clase Farmacia, ahora es un StringObjectIdGenerator, el cual permite generar una clave única de tipo String, debido a que el retorno hacia jQuery, con la solución anterior, tenía la siguiente estructura:

"timestamp":1298346771,
"machine":8775338,
"pid":20092,
"increment":0

Que corresponde, como antes mencionaba, al objeto ObjectID, por lo que leyendo la documentación encontré que era más acertado para trabajar con jQuery el StringObjectIdGenerator que permite generar una clave pero que tenga el formato de un String, por lo que mi clase Farmacia queda finalmente de la siguiente forma:

public class Farmacia
{

[BsonId(IdGenerator = typeof(StringObjectIdGenerator))]

public String Id { get; set; }

[BsonRequired]

public string Nombre { get; set; }

[BsonRequired]

public string Direccion { get; set; }

[BsonIgnoreIfNull]

public string Telefono {get;set;}

[BsonRequired]

public string Comuna { get; set; }

public string Latitud { get; set; }

public string Longitud { get; set; }

[BsonRequired]

public string Fecha { get; set; }

}

También hice un cambio en el tipo de retorno del método PostFarmacia del ejemplo anterior, ahora retorna un HttpResponseMessage, que es el adecuado para enviar responses con código de estado.

     

Ahora bien al formulario anterior solo vamos agregar una lista con cero diseño, con el nombre de la farmacia y al lado un botón eliminar. A continuación te dejo el video con el funcionamiento final.

(PD: sí, el título dice Regitros en vez de Registros, pero bueno se entiende no?)

Como está de moda el estilo metro, agregué en la funcionalidad un gif animado con el loading metro’s style, para darle un look (si es que este demo tiene algún look) un poco mejor. T dejo el gif para que lo utilices en tus desarrollos (así que dale al botón derecho y guardar!)

animated_loader

Veamos ahora el controlador y modelo para las dos acciones, Listar y Borrar.

Nuevas acciones del Controlador FarmaciaController

public IEnumerable<Farmacia> ListFarmacias()

{

   try

     {

       System.Threading.Thread.Sleep(4000);

       FarmaciaModels fm = new FarmaciaModels();

       var lista = fm.ListFarmacias();

       if (lista != null)

       {

          return lista;

        }

        throw new HttpResponseException(HttpStatusCode.NotFound);

      }
     
catch (Exception){

        throw new HttpResponseException(HttpStatusCode.InternalServerError);

      }

  }

 

    

public HttpResponseMessage DeleteFarmacia(string id)

{

    try

      {

        FarmaciaModels fm = new FarmaciaModels();

        fm.DeleteFarmacia(id);

        return new HttpResponseMessage(HttpStatusCode.NoContent);

      }

      catch (Exception)

     {

       throw new HttpResponseException(HttpStatusCode.InternalServerError);

     }

  }

     

Puedes observar en la primera acción que hago una pausa de 4 segundos (para que se vea el loading, que esta muy cool Sonrisa), luego voy a consultar al modelo sobre los datos, luego según si obtengo o no resultados y si hay o no erro, devuelvo código HTTP según la situación. La acción DeleteFarmacia  (ojo, se debe empezar por Delete, para que podamos accederla correctamente), recibe el id como un string (que fue uno de los cambios que hice), luego le pasamos la responsabilidad al modelo para que borre el registro desde MongoDB.

Métodos en el Modelo FarmaciaModels

public IEnumerable<Farmacia> ListFarmacias()

{

   MongoDatabase db = Db();

   MongoCollection<Farmacia> farmacias = db.GetCollection<Farmacia>("farmacias");

   return farmacias.FindAll().ToList<Farmacia>();

}

public void DeleteFarmacia(string id)

{

  MongoDatabase db = Db();

  MongoCollection<Farmacia> farmacias =
                                  db.GetCollection<
Farmacia> ("farmacias"
);

  db.GetCollection<Farmacia>("farmacias").FindAndRemove(Query.EQ("_id", id),
                                                  
SortBy.Ascending("id"
));

}

Anteriormente ya había comentado que estábamos simplificando al máximo nuestros métodos. El primero de ellos obtiene la colección de farmacias y simplemente la retorna. El segundo método, obtiene la referencia hacia la colección y utilizamos el método FindAndRemove de la API de Mongodb, para buscar y eliminar el elemento a partir de una consulta sobre MongoDB, que es Query.EQ("_id", id), es decir, buscamos y eliminamos por el Id.

Para poder acceder a la acción ListaFarmacias  del controlador debemos agregar una nueva mapa en la Ruta:

routes.MapHttpRoute(

    name: "AccionesAPI",

    routeTemplate: "api/{controller}/{action}/{id}",

    defaults: new

    {

       id = UrlParameter.Optional

     }

);

Con esto podemos acceder al controlador y la acción, y el parámetro id es opcional.

Ahora el Front End

Nuestro Front End tiene ciertas modificaciones al del ejemplo anterior, los cuales son más que nada , una lista para agregar las farmacias y unas cuantas funciones más de JavaScript, partamos por el código HTML que agregué:

<div id="div_lista">
        <h2>Listado de Registros de Farmacias</h2>
        <div id="cargando"></div>
        <ul id="lista"></ul>
</div>

Funciones Javascript

   function listaFarmacias() {

            $("#cargando").html("<img src=’animated_loader.gif’ />");

            $.ajax({

                url: "http://localhost:51753/Api/Farmacia/ListFarmacias",

                type: "GET",

                contentType: "application/json;charset=utf-8",

                cache:false,

                statusCode: {

                    200: function (farmacia) {

                        muestraFarmacias(farmacia);

                    },

                    400: function () {

                        $("#mensaje").text("Error en la Petición");

                    },

                    404: function () {

                        $("#mensaje").text("Datos no Encontrados");

                    },

                    500: function () {

                        $("#mensaje").text("Error en el servidor");

                    }

 

                }

 

            });

        }

La función de listaFarmacias la cual llama a la acción ListaFarmacias y en el caso que la respuesta tenga un statusCode 200, es decir, todo ok, hacemos una llamada a la función muestraFarmacias pasándole la data que fue retornada desde el servidor.

function muestraFarmacias(farmacias) {

  var li = "";

  $("#lista").empty();

  var href = null;

  $.each(farmacias, function (index, farmacia) {

    li += "<li>" + farmacia.Nombre + "<button class=’botonEliminar’ id=’" +
          farmacia.Id +
"’>Borrar</button></li>"
;

  });

   $("#lista").append(li);

   $("#cargando").empty();

}

Esta función esta encargada de crear los items de lista, cada ítem tiene un botón asociado cuyo id es el Id proveniente del servidor, es decir el Id del registro obtenido desde MongoDB, esto sirve para asociar el botón al registro en particular, además podrás notar que el botón tiene una clase asociada, de manera que podemos atachar a esa clase el evento click:

$(".botonEliminar").live("click", function () {

            var id = $(this).attr("id");

            $.ajax({

                url: "http://localhost:51753/Api/Farmacia",

                data: JSON.stringify({ id: id }),

                cache: false,

                type: "DELETE",

                contentType: "application/json;charset=utf-8",

                statusCode: {

                    204: function () {

                        listaFarmacias();

                    }

                }

            });

        });

Con este manejo del evento click, hacemos la llamada al eliminar, fíjate que debemos especificar en type Delete para que pueda hacer referencia a la acción DeleteFarmacia del controlador, puedes ver más detalles de la función $.ajax de jQuery en http://api.jquery.com/jQuery.ajax/ , finalmente si recibimos la respuesta 204, volvemos a listar las farmacias.

Eso es todo por ahora, continúo luego con el modificar y el acceso desde dispositivos móviles.

Saludos!
@chalalo

Tutorial Asp.net Web API con MongoDB – Parte 2.1

Hola, vamos a ver la primera parte de la segunda parte (suena raro, o la parte 2.1) del tutorial de MongoDB y ASP.NET Web API, la primera parte esta en:

http://geeks.ms/blogs/gperez/archive/2012/03/11/tutorial-asp-net-web-api-con-mongodb-parte-1.aspx

Debido a que he estado corto de tiempo, preferí escribir de inmediato el insertar datos desde jQuery , pasando por Web API a MongoDB. Bueno acá vamos Sonrisa

Formulario de Ingreso con un poco de HTML5

Voy a utilizar un formulario muy sencillo con validación required de HTML5, como ves , además cambiamos el mensaje de la validación con la propiedad Title, puedes notar que para cambiarlo en Firefox ocupamos x-moz-errormessage (espero que esto no sea así en el futuro, y que exista una propiedad estándar) . Luego el estilo de los labels es display: block para que el orden quede vertical.

image image

Veamos el código del formulario:

 

  <form id=”formulario”>

        <label for=”Nombre”>Nombre:</label>

        <input type=”text” id=”Nombre” name=”Nombre” required

            title=”Debe ingresar el Nombre de la farmacia”

            x-moz-errormessage=”Debe ingresar el Nombre de la farmacia”/>

 

        <label for=”Direccion”>Dirección:</label>

        <input type=”text” id=”Direccion” name=”Direccion” required

            title=”Debe ingresar la Dirección”

            x-moz-errormessage=”Debe ingresar la Dirección” />

 

        <label for=”Telefono”>Telefono:</label>

        <input type=”tel” id=”Telefono” name=”Telefono” required

              title=”Debe ingresar el telefono”

              x-moz-errormessage=”Debe ingresar el telefono” />

 

        <label for=”Comuna”>Comuna:</label>

        <input type=”tel”  id=”Comuna”  name=”Comuna” required

              title=”Debe ingresar la Comuna”

              x-moz-errormessage=”Debe ingresar la Comuna” />

 

        <label for=”Latitud”>Latitud:</label>

        <input type=”number” id=”Latitud” name=”Latitud”  required

              title=”Debe ingresar la Latitud”

              x-moz-errormessage=”Debe ingresar la Latitud” />

 

 

       <label for=”Longitud”>Longitud:</label>

        <input type=”number”  id=”Longitud”  name=”Longitud” required

              title=”Debe ingresar la Longitud”

              x-moz-errormessage=”Debe ingresar la Longitud” />

 

 

        <label for=”Fecha”>Fecha:</label>

        <input type=”date”  id=”Fecha” name=”Fecha” required

              title=”Debe ingresar la Fecha”

              x-moz-errormessage=”Debe ingresar la Fecha” />

 

        <input type=”submit” value=”Guardar” />

    </form>

Bastante simple, nada del otro mundo, ahora veamos el código jQuery para el envío de datos:

<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();

          $.ajax({

                url: “http://localhost:51753/Api/Farmacia”,

                type: “POST”,

                contentType: “application/json;charset=utf-8”,

                data: JSON.stringify($(this).serializeObject()),

                statusCode: {

                    200: function (farmacia) {

                        alert(“Registro Insertado”);

                    },

                    500: function () {

                        alert(“Error al Insertar”);

                    }

                }

            });

        });

 

        $.fn.serializeObject = function () {

            var o = {};

            var a = this.serializeArray();

            $.each(a, function () {

                if (o[this.name] !== undefined) {

                    if (!o[this.name].push) {

                        o[this.name] = [o[this.name]];

                    }

                    o[this.name].push(this.value || );

                } else {

                    o[this.name] = this.value || ;

                }

            });

            return o;

        };

    });

</script>

Como vez, lo primero que hacemos es prevenir el evento por default del botón submit, de manera que no exista una recarga de página, luego configuramos la petición Ajax, vamos enviar estos datos por POST y esto repercute, como veremos más adelante, en el nombre del controlador. Los datos los voy a enviar mediante JSON, para esto ocupo una función de serialización y luego utilizamos la función JSON.stringify para dar el formato correcto, puedes ver más sobre esta función acá:http://msdn.microsoft.com/en-us/library/cc836459(v=vs.85).aspx

De hecho cuando lo ejecutemos e inspeccionemos JSON.stringify($(this).serializeObject()) veremos:

image

Ahora revisemos como vamos a recibir estos datos, veamos el controlador, en nuestro caso seguimos en el controlador

Acción en el Controlador FarmaciaController

  public HttpStatusCode PostFarmacia(Farmacia farmaciaInsert)

   {

      try

        {

          FarmaciaModels fm = new FarmaciaModels();

          fm.PostFarmacia(farmaciaInsert);

          return HttpStatusCode.OK;

        }

         catch (Exception)

         {

        throw new HttpResponseException(HttpStatusCode.InternalServerError);

        }

   }

Este controlador esta simplificado para fines del ejemplo, cabe destacar que debido a que nombre de nuestro método comienza con “Post” no necesitamos crear una nueva ruta customizada, el Método PostFarmacia puede ser invocado con  URL /Api/Farmacia, y este método será invocado bajo el contexto de un request HTTP POST.


Podría devolver además alguna variable desde el modelo, pero para nosotros por el momento va a estar ok. Si inspeccionamos el objeto farmaciaInsert veremos que los datos vienen correctamente:

 

image

En caso de resultar todo ok, devolvemos el statusCode en 200, es decir OK Pulgar hacia arriba, y en el caso contrario levantamos una excepción con un error 500 (HttpStatusCode.InternalServerError) . Estos Status Code son los que estamos evaluando con jQuery y de ello dependerá la respuesta que demos al usuario.

Modelo

Al igual que nuestro controlador, el modelo esta simplificado al máximo, de manera de centrarnos en lo importante para el ejemplo. Instanciamos una colección de farmacias, a la cual le insertamos el objeto farmaciaInsert

public void PostFarmacia(Farmacia farmaciaInsert)

{

   MongoCollection<Farmacia> farmacias = Db().GetCollection<Farmacia>
                                       (
“farmacias”
);

   farmacias.Insert(farmaciaInsert);

}

Ahora cuando nuestro proceso esté terminado veremos que se ejecuta la sección asociada al Status Code :200

image

Y si revisamos con el IDE MongoVUE, veremos el dato ingresado:

image

 

Y todo con unas pocas líneas de código Sonrisa
Saludos!
@chalalo

[Utilidad] Metro Studio 1, software que nos permite obtener iconos Metro Style :)

image

Por esas cosas de la vida he encontrado un software que me parece de mucha utilidad, que nos permite obtener iconos de tipo Metro, que nos van a servir para nuestras aplicaciones Metro para Windows 8 o para Windows Phone, se llama MEtro Studio 1 y lo puedes descargar tras un pequeño registro acá:

http://www.syncfusion.com/downloads/metrostudio

Como ves, el clásico siguiente siguiente siguiente……..

image

Luego de la instalación vamos a ver una gran cantidad de iconos agrupados por categoría:

image

Con la posibilidad de modificar cada uno de ellos en tamaño, fondo, y otras características, para luego descargarlo como PNG

image

Bueno, eso un pequeño tip que nunca está demás

@chalalo

Tutorial Asp.net Web API con MongoDB – Parte 1

Hola, en esta primera parte del un tutorial en el cual vamos a estar trabajando con ASP.NET Web API junto a MongoDB, adicionalmente vamos a utilizar también jQuery y Windows Phone 7 como cliente.

El contexto de la aplicación es el siguiente, existen farmacias de turno, que se pueden consultar mediante la ciudad y la fecha. Entonces la idea es disponibilizar esta información mediante la Web Api, por lo tanto la primera parte de este tutorial tiene que ver con esta consulta.

Entonces el tutorial se dividirá en las siguientes partes:

  • Parte 1 : Creación de Proyecto, Controlador , consulta de datos con jQuery
  • Parte 2: Inserción , Borrado y Modificación
  • Parte 3: Autorización
  • Parte 4: Consumo de datos mediantes WP7
  • Como esta es la parte 1 , vamos a revisar paso a paso lo que necesitamos para comenzar:

    Primero , crear un proyecto ASP.NET MVC 4 Web Application:

    image

    Luego se nos presenta una pantalla con las distintas plantillas con las que podemos trabajar, obviamente vamos a seleccionar Web API

    image

    Luego ya tenemos la estructura del proyecto. Paso siguiente es hacer referencia a las librerías de MongoDB, para mayor información revisa este post que hice sobre ello: http://geeks.ms/blogs/gperez/archive/2011/12/02/tutorial-mongodb-con-asp-net-mvc-ejemplo-pr-225-ctico.aspx

    image

    En mi caso voy a crear mi propio controlador, no voy a utilizar el que viene por defecto, así que agrego un nuevo controlador, seleccionado Add, Controller

     

    image

    Agrego entonces mi “FarmaciaController” utilizando el template Empty API Controller,

    image

    El template seleccionado nos entrega un controlador vacío, al cual agregaremos la acción que necesitamos, consultar por ciudad y fecha.

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Web.Http;
    using FarmaciasWebAPI.Models;

    namespace FarmaciasWebAPI.Controllers

    {    public class FarmaciaController : ApiController    {

            public Farmacia GetFarmacia(string comuna, string fecha) {

              FarmaciaModels fm = new FarmaciaModels();
              Farmacia farmacia = fm.GetFarmacia(comuna, fecha);
              if (farmacia != null){
                   return farmacia;
              }
              throw new HttpResponseException(HttpStatusCode.NotFound);
            }

        }
    }

     Es una buena práctica devolver una excepción del tipo HttpStatusCode.NotFound, ya que de esta manera podemos manejas los estados del Http Response en jQuery de manera más cómoda. Como puedes ver, instanciamos el modelo y  ejecutamos su método GetConsulta. Veamos el código del modelo:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MongoDB.Bson.IO;
    using MongoDB.Bson.Serialization;
    using MongoDB.Bson.Serialization.Attributes;
    using MongoDB.Bson.Serialization.Conventions;
    using MongoDB.Bson.Serialization.IdGenerators;
    using MongoDB.Bson.Serialization.Options;
    using MongoDB.Bson.Serialization.Serializers;
    using MongoDB.Driver.Builders;
    using MongoDB.Driver.GridFS;
    using MongoDB.Driver.Wrappers;
    using MongoDB.Driver;
    using MongoDB.Bson;

     namespace FarmaciasWebAPI.Models
    {
        public class FarmaciaModels    {

         private MongoDatabase Db()  {
           string connectionString = “mongodb://localhost”;
           MongoServer server = MongoServer.Create(connectionString);
           MongoDatabase db = server.GetDatabase(“farmaciasTurno”);
           return db;
       }

       public Farmacia GetFarmacia(String comuna, string fecha)
      {

        MongoDatabase db = Db();
       
    MongoCollection<Farmacia> farmacias =
                                      db.GetCollection<
    Farmacia>(“farmacias”
    );

        var query = Query.And(
                      Query.EQ(“Comuna”,comuna),
                      Query.EQ(“Fecha”,fecha)
                  );

        Farmacia farmacia = farmacias.FindOne(query);
        return farmacia;
       }

      }
    }

    Puedes ver que tenemos la conexión, obviamente en ambientes del producción vamos a necesitar el string de conexión con autenticación.
    Veamos el método GetFarmacias que recibe los parámetro comuna y fecha para luego ejecutar la consulta sobre la colección que se obtiene desde mongo.
    El clase farmacia tiene la siguiente estructura:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MongoDB.Bson.Serialization.Attributes;
    using MongoDB.Bson.Serialization.IdGenerators;
    using MongoDB.Bson; 

    namespace FarmaciasWebAPI.Models{

        public class Farmacia
        {  [BsonId(IdGenerator = typeof(CombGuidGenerator))]
            public Guid Id { get; set; }

           [BsonRequired]
            public string Nombre { get; set; }

           [BsonRequired]
            public string Direccion { get; set; }

           [BsonIgnoreIfNull]
            public string Telefono {get;set;}

           [BsonRequired]
            public string Comuna { get; set; }

            public string Latitud { get; set; }
            public string Longitud { get; set; }

            [BsonRequired]
            public string Fecha { get; set; }

        }

    }

    Pero se me queda algo en el tintero, debemos modificar el global.asax  para agregar un MapRoute nuevo, de manera que nos permita llamar a un controlador con la acción que ya vimos, es decir con dos parámetros.

       routes.MapHttpRoute(
                    name: “ConsultaDefaulWebApi”,
                    routeTemplate: “api/{controller}/{comuna}/{fecha}”,
                    defaults: new { }
       );

       (En este caso los parámetros no son opcionales)

    Ahora podemos ejecutar nuestro proyecto,a modo de ejemplo ingreso la siguiente URL:

    http://localhost:<puerto>/Api/Farmacia/Concepcion/27-04-2012

    Y vemos:

    image

    Ahora que estamos ok con nuestro BackEnd, vamos a programar el front-end, de manera muy sencilla, la idea es que al presionar un botón buscar, veamos la información de la farmacia solicitada y que podamos ocupar la información de Latitud y Longitud para geo referenciarla:

    image

    El código JavaScript es el siguiente:

    <script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js”></script>
    <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true” ></script>

    <script>
        $(document).ready(function () {
            $(“#buscar”).on({
                click: function () {
                    var data = “/Concepcion/27-04-2012”;
                    $.ajax({
                        url: “http://localhost:51753/Api/Farmacia” + data,
                        type: “GET”,
                        contentType: “application/json;charset=utf-8”,
                        statusCode: {
                            200: function (farmacia) {
                                muestraMapa(farmacia);
                            },
                            400: function () {
                                $(“#mensaje”).text(“Error en la Petición”);
                            },
                            404: function () {
                                $(“#mensaje”).text(“Datos no Encontrados”);
                            },
                            500:function(){
                                $(“#mensaje”).text(“Error en el servidor”);
                            }
                        }

                    });
                }
            });

    function muestraMapa(farmacia)
    {
      $(“#mensaje”).text(farmacia.Nombre + ” “ +
                          farmacia.Direccion + ” “ +
                          farmacia.Comuna + 
                          ” Fono:” + farmacia.Telefono);

       var lat = farmacia.Latitud;
       var lon = farmacia.Longitud;
       var options = { zoom: 13,
            center: new google.maps.LatLng(lat, lon), 
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }

       var map = new google.maps.Map($(“#canvas”).get(0), options);
                var marker = new google.maps.Marker({ position: new
                                                google.maps.LatLng(lat, lon) });

                marker.setMap(map); 
     }

     });

    Como puedes apreciar agregamos un manejador para el evento click del botón, el cual utiliza la función $.ajax de jQuery, puedes notar que no ocupo la propiedad data, más bien una variable data que tiene los parámetros como ruta. Luego y dependendiedo del  código del HTTP Response podemos decidir que hacer. El código 200 corresponde a OK, por lo que vamos a la función muestraMapa, que hace uso de la API de Google para geolocalización para mostrar el mapa y el marker en la posición solicitada.
    Como vez, bastante sencillo, espero que este ejemplo te sirva.
    Saludos!
    @chalalo

    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!