Como: Mostrar datos con ASP.NET MVC 4 y Entity Framework

Saludos amigos, en esta ocasión les traigo un tema con el que seguramente muchos de ustedes se están rompiendo la cabeza o se la piensan romper, y esto es el cómo mostrar información en un sitio web con la utilización de Entity Framework y ASP.Net MVC. Bueno, para poder lograr esto primeramente voy a hablar un poco de los elementos que vamos a utilizar para la prueba. En el mercado existen muchos controles y plugins de diversos fabricantes para el objetivo de mostrar datos tabulares desde un origen de datos, y para nosotros son sumamente necesarios, por lo que en este pequeño tutorial voy a utilizar un plugin que me pareció muy útil y espero que para ustedes también, el plugin se llama jQuery Grid Plugin y lo pueden ver en acción con todas sus funcionalidades dentro de su página http://paramquery.com/grid, sin embargo, aquí solo vamos a usar la parte más básica de este que es la de mostrar información.
En este tutorial también vamos a usar ASP.Net MVC 4 por lo que se requieren conocimientos mínimos de esta plataforma, en caso de que no sea así, pueden seguir el tutorial, pero, posiblemente les generen algunas dudas las cuales no se resolverán en este tutorial, sin embargo, pueden comentarlas y con gusto las resolveremos poco a poco. También necesitamos tener conocimientos previos de SQL y LinQ. Ya sin mas preámbulo entremos en el tema que nos atañe, como hacer una página web que nos muestre la información de la base de datos en un grid con el patrón MVC y jQuery.
Lo primero que vamos a hacer es crear un proyecto de tipo ASP.NET MVC 4 Web Application (para este ejemplo estoy usando la versión 2010 de Visual Studio)
 

Cuando les solicite la configuración de su proyecto seleccionen el Basic y View engine RAZOR ya que es la configuración con la que realizaremos el tutorial.

Ya que tengamos creado nuestro proyecto debemos de agregar las librerias de jQuery y jQueryUI las cuales las pueden descargar de aqui o en todo caso usen la instalación de estas a traves de NuGet, sin embargo, si estan pensando en que su pagina se tiene que ver en IE7 ó IE8 entonces les recomiendo que las agreguen manualmente ya que pueden tener problemas con el uso de jQuery, ya que hemos agregado las librerias de jQuery a nuestro proyecto debemos de agregar nuestro plugin para su posterior uso. Lo primero que hay que hacer es descargarlo de su sitio (descárgalo de aquí), ya que lo hemos descargado lo que debemos de hacer es agregar los archivos pqgrid.dev.js y pqgrid.min.js a la carpeta de Scripts y de la misma manera en la carpeta Content agregar pqgrid.dev.css y pqgrid.min.css al igual que las imagenes para el grid, les debe de quedar así.

Bueno, ya que tenemos listo nuestro proyecto, lo primero que debemos de crear es el modelo de entidades el cual es con el que realizaremos la conexión a nuestro origen de información y por lo consiguiente la extracción de la información.
Para este caso lo que vamos a hacer es generar el modelo a partir de una base de datos de la cual queremos mostrar la información, para este tutorial utilizaremos SQL 2008, (aquí pueden descargar un script para la generación de la Base de Datos que utilizare en el ejemplo) para esto vamos a dar clic derecho sobre la carpeta de Models y vamos a agregar un nuevo item, ahi vamos a seleccionar la en el arbol izq Data y posteriormente ADO.NET Entity Data Model el cual llamaremos TutorialModel y lo agregamos al proyecto.

nos preguntara si lo genera vacío o desde la base de datos, nosotros seleccionaremos que lo genere desde la base de datos.

Ahora realice la configuración de su origen de datos.

ya que esta configurada haga clic en siguiente y seleccione en el árbol la entrada de Tables y haga clic en Finalizar.

ya hemos creado nuestro modelo de datos para nuestro sitio, y debe de estar viendo algo así:


ya que tenemos nuestro modelo de datos, entonces, a lo que te truje chencha!!!!, vamos a crear nuestra pagina.
vamos a crear un controlador y una vista correspondiente el controlador lo llamaremos HOME y a la vista Index, en caso de no saber como hacerlo o como funciona, dejen su mensajito y con gusto hago un Tutorial sobre el uso basico de MVC.
Ya que tenemos lista nuestra vista vamos a agregar las referencias a nuestras librerías de jQuery así como al plugin y les debe de quedar mas o menos así:

<script src="../../Scripts/JQuery/jquery-1.10.2.js" type="text/javascript"></script>

<script src="../../Scripts/JQuery/jquery-ui.js" type="text/javascript"></script>

<script src="../../Scripts/Plugins/Grid/pqgrid.dev.js" type="text/javascript"></script>

<script src="../../Scripts/Plugins/Grid/pqgrid.min.js" type="text/javascript"></script>

<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<link href="../../Content/Plugins/Grid/pqgrid.dev.css" rel="stylesheet" type="text/css" />

<link href="../../Content/Plugins/Grid/pqgrid.min.css" rel="stylesheet" type="text/css" />

este será todo el código que necesitamos por el momento.

Vamos a hacer el método de extracción de la información, para esto vamos a ir a nuestro Controlador Home y crearemos el siguiente método.

public JsonResult ObtieneClientes() 
        {
            Models.TutorialMVCEntities Context = new Models.TutorialMVCEntities();
            var _Clientes = Context.Clientes.Select(x => new {Llave = x.ClienteId, Nombre = x.Nombre, ApPaterno = x.apPaterno, ApMaterno = x.apMaterno });
            return Json(_Clientes, JsonRequestBehavior.AllowGet);
        }

esto lo que hace es la extracción desde nuestro modelo a través de una consulta con Linq de la información  y la enviamos a la vista formateada como JSON, ahora vamos a crear la llamada y obtención de esta información dentro de la vista con el siguiente código.

<script>
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: '/Home/ObtieneClientes',
            dataType: 'json',
            success: function (data) {
                /*GRID*/
                obj = { width: 700, height: 400, title: "Información de Clientes", flexHeight: true };
                //Vamos a definir el modelo de columnas para nuestro Grid
                obj.colModel = [{ title: "Id", width: 100, dataType: "integer", dataIndx: "Llave" },
                                                  { title: "Nombre del Cliente", width: 200, dataType: "string", dataIndx: "Nombre" },
                                                  { title: "Ap. Paterno", width: 200, dataType: "string", dataIndx: "ApPaterno" },
                                                  { title: "Ap. Materno", width: 200, dataType: "string", dataIndx: "ApMaterno"}];
                obj.dataModel = {
                    data: data,
                    location: "local",
                    sorting: "local",
                    paging: "local",
                    curPage: 1,
                    rPP: 20,
                    sortIndx: "Llave",
                    sortDir: "up",
                    rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]
                };
                /*GRID*/
            },
            error: function (xhr, ajaxOptions, error) {
                alert(xhr.status);
                alert('Error: ' + xhr.responseText);
            },
            complete: function () { var $grid = $("#Datos").pqGrid(obj); }
        });
    });
</script>

y con esto terminamos ahora a ver el resultado.



y bueno con esto finalizo esta entrada esperando que les haya sido de utilidad.