Return(GiS); : ASP.NET MVC 3

Refrescar un WebGrid cada X tiempo de forma asíncrona

Gisela — Sat, 02 Apr 2011 22:37:00 GMT

Con la nueva versión ASP.NET MVC 3, disponemos de una nueva extensión para la creación de grids. Para conocer más detalles sobre este nuevo helper podéis consultar el artículo de Jose M. Aguilar

En este post me gustaría mostraros cómo es posible actualizar de forma asíncrona un grid cada un número determinado de segundos.

Del lado del servidor he adjuntado una base de datos con una única tabla para el ejemplo que os quiero mostrar:

Un repositorio para recuperar los valores:

using System.Linq;

namespace WebGridAsync.Models
{
    public class StuffRepository
    {
        private readonly StuffEntities _model;
        public StuffRepository()
        {
            _model = new StuffEntities();
        }

        public FileViewModel GetFiles(int page = 1)
        {
            var fileViewModel = new FileViewModel();
            var files = _model.Files.ToList();
            fileViewModel.FilesPerPages = 5;
            fileViewModel.NumberOfFiles = _model.Files.Count();
            fileViewModel.Files = files.Skip((page - 1) * fileViewModel.FilesPerPages)
                                       .Take(fileViewModel.FilesPerPages);
            return fileViewModel;
        }

        public void SaveChanges()
        {
            _model.SaveChanges();
        }
    }
}

Y por último un controlador donde lo que vamos a actualizar es el estado de los archivos en cada llamada:

using System.Web.Mvc;
using WebGridAsync.Models;

namespace WebGridAsync.Controllers
{
    public class HomeController : Controller
    {
        private readonly StuffRepository _stuffRepository;
        public HomeController()
        {
            _stuffRepository = new StuffRepository();
        }

        public ActionResult Index(int page = 1)
        {
            return View(GetFilesWithUpdatedStatus());
        }

        public FileViewModel GetFilesWithUpdatedStatus()
        {
            var fileViewModel = _stuffRepository.GetFiles();

            foreach (var myFile in fileViewModel.Files)
            {
                switch (myFile.Status)
                {
                    case "Pending":
                        myFile.Status = "Processing";
                        break;
                    case "Processing":
                        myFile.Status = "Waiting";
                        break;
                    case "Waiting":
                        myFile.Status = "More waiting...";
                        break;
                    case "More waiting...":
                        myFile.Status = "Completed";
                        break;
                    default:
                        myFile.Status = "Pending";
                        break;
                }
            }

            _stuffRepository.SaveChanges();
            return fileViewModel;
        }
    }
}

Por último, necesitamos crear una vista donde hagamos uso del helper WebGrid. Es importante que el mismo esté incluido en un div con un id asociado.

@model WebGridAsync.Models.FileViewModel
@{
    ViewBag.Title = "Async WebGrid";

    WebGrid grid = new WebGrid(rowsPerPage: Model.FilesPerPages, canSort: false);
    grid.Bind(Model.Files, rowCount: Model.NumberOfFiles);
}
<h2>@ViewBag.Message</h2>
<div id="myWebGrid">
    @grid.GetHtml(columns: new[]{
    grid.Column("Name"),
    grid.Column("Date"),
    grid.Column("Status")
})
</div>

Para hacer la llamada asíncrona, necesitamos utilizar algo de código javascript, con la ayuda de JQuery. En la misma página que el grid anterior incluimos lo siguiente:

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        $.ajaxSetup({
            cache: false
        });

        setTimeout(reloadAsync, 5000);
    });

    function reloadAsync() {
        $("#myWebGrid").load("/Home/Index #myWebGrid", function (response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#error").html(msg + xhr.status + " " + xhr.statusText);
            }
            else {
                setTimeout(reloadAsync, 5000);
            }

        });

    }
</script>

Lo que estamos haciendo en realidad es inicializar un timer para que cada 5 segundos solicite los datos al servidor. El método load de JQuery va a realizar una llamada a la acción Index del controlador Home para que este le devuelva la página renderizada. Una vez obtiene el resultado va a localizar el elemento div myWebGrid para reemplazar el que se está visualizando actualmente por el nuevo resultado.

Adjunto el proyecto por si fuera de utilidad

¡Saludos!

Google Maps API v.3.0 y ASP.NET MVC 3 con Razor

Gisela — Thu, 10 Feb 2011 16:12:00 GMT

Gracias a todas las APIs que nos facilita Google, podemos hacer uso prácticamente de todos los servicios que ofrece la compañía a día de hoy. En este post en concreto me gustaría hablaros de cómo utilizar el API de Google Maps en su versión 3.0 para generar mapas dinámicos con una enorme cantidad de funciones. Además, para rizar más el rizo utilizaré ASP.NET MVC 3 con Razor para crear una llamada síncrona y otra asíncrona con la ayuda de JQuery.

Referencias

Para utilizar el API de Google Maps son necesarias las siguientes referencias:

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Nota: Cuando utilizas Google Maps siempre debe especificarse si vas a utilizar un sensor, por ejemplo un GPS, para determinar la ubicación del usuario (importante para los dispositivos móviles). En este caso estableceremos el valor del parámetro sensor a false ya que no entra este escenario dentro del post

¿Por dónde empiezo?

Lo primero que debemos tener en cuenta es que podemos ubicar marcas de dos formas distintas: Indicando las coordenadas del sitio o recuperando las coordenadas a través de una dirección postal. Sin embargo, en el segundo caso tenemos una limitación por parte de la API, la cual sólo nos permite solicitar unas 10 direcciones por consulta, lo cual limita nuestro campo de acción. En este post utilizaremos coordenadas para poder agregar tantas marcas como sea necesario Para ello, he creado un objeto de prueba que almacenará todas las marcas y un repositorio, también de prueba, que nos devolverá tres objetos dentro de una lista para la demo.

Objeto de prueba

namespace GoogleMapsASPNETMVC3.Models
{
    public class GoogleMarker
    {
        public string SiteName { get; set; }
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string InfoWindow { get; set; }
    }
}

Repositorio de prueba

using System.Collections.Generic;

namespace GoogleMapsASPNETMVC3.Models
{
    public class MarkerRepository
    {

        public IList<GoogleMarker> GetMarkers()
        {
            var googleMarkers = new List<GoogleMarker>
                                    {
                                        new GoogleMarker
                                            {
                                                SiteName = "Jardines de Sabatini",
                                                Latitude = 40.421749,
                                                Longitude = -3.713994,
                                                InfoWindow = "InfoWindow de los Jardines de Sabatini"
                                            },
                                        new GoogleMarker
                                            {
                                                SiteName = "Campo del Moro",
                                                Latitude = 40.419658,
                                                Longitude = -3.718801,
                                                InfoWindow = "InfoWindow del Campo del Moro"
                                            },
                                        new GoogleMarker
                                            {
                                                SiteName = "Parque de la Cornisa",
                                                Latitude = 40.413254,
                                                Longitude = -3.716483,
                                                InfoWindow = "InfoWindow del Parque de la Cornisa"
                                            }
                                    };

            return googleMarkers;
        }
    }
}

Llamada síncrona

Para la llamada síncrona lo que vamos a hacer es solicitar la lista de marcas y pasarla a la vista para poder asociarla a la propiedad Model.

[HttpGet]
public ActionResult Sync()
{
     return View(_markerRepository.GetMarkers());
}

Una vez en la vista agregaremos el siguiente código:

@model IEnumerable<GoogleMapsASPNETMVC3.Models.GoogleMarker>
@using System.Threading;
@using System.Globalization;
@{
    ViewBag.Title = "Sync";
    Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
}
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
    var bounds = new google.maps.LatLngBounds();
    var options = {
        zoom : 14,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var googleMap = new google.maps.Map($("#map")[0],options);
    var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });
    @foreach (var marker in Model)
    {
    <text>
        var point = new google.maps.LatLng(@marker.Latitude, @marker.Longitude);
        bounds.extend(point);

        var marker = new google.maps.Marker({
                position: point,
                map: googleMap,
                icon:'/Content/images/cloud_marker.png',
                html: '@marker.InfoWindow'
            });

        google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(this.html);
                infoWindow.open(googleMap, this);
            });
    </text>
    }
    googleMap.fitBounds(bounds);
    });
</script>
<h2>
    Sync</h2>
<div id="map" style="width: 800px; height: 500px;"></div>

Lo primero que hacemos en la parte javascript es la inicialización de unas variables bases como son bounds donde vamos a insertar cada uno de los puntos de coordenadas, googleMap que asignará el espacio dedicado al mapa a un div con id “map” situado abajo del todo e infoWindow que nos servirá para asociar un pop up a cada marca del mapa.

Posteriormente utilizamos la @ para inicializar un foreach, ya que estamos utilizando el motor de vistas Razor, y recorremos cada una de las marcas ubicadas en el Model del tipo GoogleMarker. Como vamos a mezclar código javascript con variables de servidor, debemos hacer el uso de <text></text> para que no interprete todo el código dentro del foreach como código de servidor.

Los pasos que vamos a realizar en cada iteración es la creación de cada conjunto de coordenadas en el mapa a través de google.maps.LatLng para acto seguido usar el resultado como la posición de la marca en el objeto google.maps.Marker en el mapa asociado. En este último podemos asociar distintos tipos de opciones como por ejemplo el icono que queremos mostrar para dicha marca, sombreados, etcétera. En este caso he modificado la imagen por una nube

Además podemos asociar un evento a cada marca para mostrar el típico pop up que aparece cuando haces clic sobre una de ellas. Para ello utilizaremos google.maps.event.Listener donde crearemos la asociación con la clase InfoWindow instanciada al inicio del script.

Por otro lado, si os fijáis de nuevo en el código anterior, he cambiado la cultura a en-US. Esto es debido a que es necesario respetar el signo de separación de los decimales en las coordenadas ya que, de lo contrario, la latitud y longitud recuperadas de la propiedad Model se pintarían con comas y no se mostraría correctamente.

Como resultado obtendríamos la siguiente imagen

Llamada asíncrona

Para la llamada asíncrona el escenario cambia:

@{
    ViewBag.Title = "Async";
}
<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        var bounds = new google.maps.LatLngBounds();
        var options = {
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var googleMap = new google.maps.Map($("#map")[0], options);
        var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });

        $.ajax({
            type: "POST",
            url: "GetMarkersAsync",
            datatype: "json",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {

                    var point = new google.maps.LatLng(data[i].Latitude, data[i].Longitude);

                    bounds.extend(point);

                    var marker = new google.maps.Marker({
                        position: point,
                        map: googleMap,
                        html: data[i].InfoWindow
                    });

                    google.maps.event.addListener(marker, "click", function () {
                        infoWindow.setContent(this.html);
                        infoWindow.open(googleMap, this);
                    });
                }
            }
        });

        googleMap.fitBounds(bounds);
    });
</script>
<h2>
    Async</h2>
<div id="map" style="width: 800px; height: 500px;">
</div>

En este segundo caso estamos utilizando JQuery para la llamada Ajax a una acción llamada GetMarkersAsync, la cual nos devolverá un listado de objetos en JSON con el mismo formato que nuestro objeto de prueba. Para ello, crearemos una acción HttpPost que retorne dicho listado basado en la clase GoogleMarker.

[HttpPost]
public ActionResult GetMarkersAsync()
{
    return Json(_markerRepository.GetMarkers());
}

En este caso el resultado es el mismo que en la llamada síncrona a excepción de los iconos utilizados en las marcas, ya que en el segundo ejemplo he omitido la propiedad icon para que utilice el icono por defecto de Google.

Adjunto el proyecto por si fuera de utilidad

Más información sobre la Google Map API 3.0

¡Saludos!

Razor View Engine para ASP.NET MVC 3

Gisela — Thu, 10 Feb 2011 16:01:00 GMT

Una de las novedades con mejor acogida de la nueva versión del frameworkd ASP.NET MVC 3 ha sido sin duda el nuevo motor de vistas llamado Razor. Si bien es cierto que con las primeras versiones y el motor de vistas aspx muchos programadores se echaban para atrás con ASP.NET MVC, con Razor podremos generar vistas de una forma más sencilla y fluida. En este post voy a comentar algunas de las diferencias y mejoras respecto al anterior view engine predeterminado.

En primer lugar, Razor pasa a ser el motor de vistas por defecto, aunque tenemos disponibles ambos al crear un nuevo proyecto o una nueva vista.

Accediendo a variables de servidor

Si recordáis, cuando trabajamos con el aspx view engine, para acceder al contenido de Model, ViewData, helpers, etcétera necesitábamos añadir las siguientes etiquetas: <%: %>

<p>Please enter your username and password. <%: Html.ActionLink("Register", "Register") %>
if you don't have an account.</p>

Con Razor simplemente utilizaremos @ al inicio y el view engine se encargará de determinar hasta dónde debe procesar.

<p>Please enter your username and password. @Html.ActionLink("Register", "Register") if
you don't have an account.</p>

Recorrer una lista

Para recorrer una lista es bastante similar a como lo haríamos con el motor aspx, con la diferencia del etiquetado para comenzar la sentencia foreach.

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
        <td>
            @item.FirstName
        </td>
        <td>
            @item.LastName
        </td>
        <td>
            @item.Address
        </td>
        <td>
            @item.E_Mail
        </td>
        <td>
            @item.Mobile
        </td>
    </tr>
}

Si nos fijamos en la llave de cierre del bucle, vemos que en Razor no es necesario etiquetar esa llave ya que se supone que pertenece a la llave de apertura abierta anteriormente, caso que no ocurría con aspx view engine:

<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=item.Id }) %> |
            <%: Html.ActionLink("Delete", "Delete", new { id=item.Id }) %>
        </td>
        <td>
            <%: item.FirstName %>
        </td>
        <td>
            <%: item.LastName %>
        </td>
        <td>
            <%: item.Address %>
        </td>
        <td>
            <%: item.E_Mail %>
        </td>
        <td>
            <%: item.Mobile %>
        </td>
    </tr>
<% } %>

Bloques de código

Por otro lado, para utilizar bloques de código bastará con utilizar la arroba y abrir llaves para delimitar el espacio abarcado por el bloque.

@{
    ViewBag.Title = "Loop";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Tag <text>

Otro escenario que se nos puede presentar es que dentro de un bloque de código necesitemos añadir código javascript o HTML que no requiera ser procesado por el motor.

<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>
@if (DateTime.Now.Year == 2011)
{
    <text>while year is 2011 this should be shown.</text>
}

Para que nos hagamos una idea más clara, si no añadimos el tag <text>, algunas partes del código anterior sería interpretadas como palabras clave.

Archivo _ViewStart.cshtml

Para conseguir unas vistas más limpias y concisas, aparece un nuevo archivo llamado _ViewStart.cshtml.

El objetivo del mismo trata de recopilar código común a todas las vistas de la aplicación, simplificando el código de las mismas. Por defecto aparece definido en él el layout utilizado en las vistas, en caso de no ser especificado en las mismas.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Sections

Otra de las novedades dentro de Razor es la posibilidad de crear secciones.

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
<body>
    <div>
        <div id="header">
            <div id="title">
                <h1>
                    My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
            <div id="footer">
                @RenderSection("returngis");
            </div>
        </div>
    </div>
</body>
</html>

Cuando definimos una sección en el layout, el objetivo principal es que la misma pueda ser modificada dinámicamente dependiendo de la vista que solicitemos de la siguiente manera.

@section returngis{
    <p>Este es un ejemplo para <a href="http://www.returngis.net">Returng(GiS);</a></p>
}

Si tenemos varias vistas dependiendo del anterior layout y no todas asignan un valor a la sección definida anteriormente, al acceder a alguna de las vistas sin esta definición saltaría la siguiente excepción:

Este error ocurre debido a que, por defecto, cuando se define una sección se da por hecho que la misma debe estar implementada en cualquier vista que utilice este layout. Para evitar esto, basta con modificar la definición de la sección agregando el parámetro false al final para convertir la sección de obligatorio a opcional.

@RenderSection("returngis", false)

Nuevos helpers

Por último, y no por ello menos importante , se añaden a nuestra lista de helpers 5 más, algunos de ellos imprescindibles:

Chart: A partir de la versión 3 no necesitaremos crear un chart from scratch como hacíamos en este antiguo post. Este helper renderiza exactamente las mismas características que en ASP.NET 4.
WebGrid: Un helper más que necesario el cual renderiza un grid con paginación y ordenación. Gracias a José M. Aguilar tenemos un tutorial de este helper explicando paso a paso cada una de las funcionalidades.
Crypto: Utilizado para crear password hash.
WebImage: Se utiliza para renderizar imágenes.
WebMail: Nos ayuda en el envío de emails.

Espero que sea de utilidad

¡Saludos!