[ASP.NET VNext] WebForms Model Binding, Parte 1

Siguiendo la serie que nos entrega ScottGu sobre las nuevas características que traerá la próxima versión de ASP.NET, en este post (que es una traducción-adaptación del post de Scott) veremos lo nuevo sobre Model Binding en WebForms.

El Original puedes encontrarlo en:
http://weblogs.asp.net/scottgu/archive/2011/09/05/web-forms-model-binding-part-1-selecting-data-asp-net-vnext-series.aspx

Antecedentes del enlace de datos de hoy

Los WebForms incluyen una serie de datasources(por ejemplo SqlDataSource, EntityDataSource, LinqDataSource) que nos permiten de manera declarativa unir datos directamente desde el servidor a webcontrols, muchos desarrolladores prefieren mantener un control total sobre sus lógica de acceso a datos y escribir esta lógica con su propio código.

En las versiones Anteriores de Web Forms, esto podría lograrse mediante el seteo de la propiuedad DataSource directamente y luego llamar al método DataBind() del control en el code-behind. Esto funciona muy bien en muchos escenarios, sin embargo, en controles de enlaces de datos mas enriquecidos como el Gridview, que permiten operaciones automáticas como ordenación, paginación y edición, esto es insuficiente.

Otra opción disponible hoy en día es utilizar ObjectDataSource. Este control permite la separación mas limpia de código de la interfaz de usuario con la capa de acceso a datos y permite proporcionar la funcionalidades automáticas como la paginación y ordenamiento. Sin embargo, aunque funciona bien para la sección de los datos, todavía es complicado cuando se realiza two-way databinding, solo es compatible con propiedades simples(sin “profundidad” en la unión de tipos complejos) y a menudo obliga a los desarrolladores a escribir gran cantidad de código complejo para manejar muchos escenarios (incluyendo los más comunes, como la validación)

Introducción al Model Binding

ASP.NET vNext incluye un nuevo soporte  “Model Binding” para WebForm. Este nuevo modelo de enlaces tiene como objetivo simplificar el trabajo con el código que se centra con la lógica de acceso a datos, al tiempo de conservar las ventajas del 2-way data-binding. Incorpora el mismo patrón de modelo de binding que se introdujo  por primera vez con ASP.NET MVC, y que ahora funciona realmente bien con el modelo de Webforms. Se hace sencillo utilizar escenarios CRUD con formularios Web – y nos permite hacerlo a traves de cualquier tecnología de acceso a datos (EF,Linq to Sql, NHibernate,ADO.NET,etc)

Este post es parte de una serie de tutoriales de como sacar el máximo provecho de las capacidades de este nuevo modelo de enlace. En este post se demostrara como se utiliza esta nueva característica para recuperar datos, permitir la ordenación y paginación dentro de un GridView.

Recuperar datos utilizando el SelectMethod

Este modelo es un enfoque centrado en el  código de enlace de dato. Permite escribir métodos helper CRUD en el code behind de la página, para luego fácilmente conectarlos a cualquier control de servidor dentro de la pagina. Estos controles luego se encargarán de llamar a los métodos en el momento adecuado del ciclo de vida de la página y del binding de datos.

Para ver un ejemplo simple de esto en acción, vamos a utilizar un control <asp:gridview>.El Gridview que vamos a ver tiene 4 columnas , 3 de ellas son campos Boundfield, y el cuarto un TemplateField. Ten en cuenta que la forma en que se ha establecido la propiedad ModelType en el Gridview el objeto Categorías, esto permite utilizar el data-binding tipado con el template field.

<asp:GridView ID="categoriesGrid" runat="server" ModelType="WebApplication1.Model.Category"

    SelectMethod="GetCategories" AutoGenerateColumns="false">

    <Columns>

        <asp:BoundField DataField="CategoryID" HeaderText="ID" />

        <asp:BoundField DataField="CategoryName" HeaderText="Name" />

        <asp:BoundField DataField="Description" HeaderText="Description" />

        <asp:TemplateField HeaderText="# of Products">

            <ItemTemplate><%# Item.Products.Count %></ItemTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>

Se ha configurado el Gridview para recuperar los datos utilizando Model Binding, establecemos la propiedad SelectMethod del gridview para que apunte al método GetCategories() dentro del code-behind. Este método es el siguiente:

public IQueryable<Category> GetCategories() {

 

    var northwind = new Northwind();

    return northwind.Categories.Include(c => c.Products);

}

Se está utilizando EF Code First para ejecutar una query Linq que devuelve una lista de categorías de la base de datos Neptuno.

Cuando se ejecuta la pagina, el gridview llamada al método GetCategories para recuperar automáticamente los datos y lo hace de este modo:

image

Evitar N+1 Select

Algo que podemos notar es que en el código anterior es que estamos utilizando: incluye (c => c.Products), esta extensión helper le dice a EF que permite además de recuperar la información por categorías, que incluya los productos relaciones, evitando tener que realizar una llamada independiente a la base de datos para recuperar esta información por cada fila que es retornada)

El ordenado y soporte de paginación

Podriamos haber retornado las categorías de nuestro GetCategories() usando IEnumerable<Category>, o un tipo que implemente la interface como List<Category>. En su lugar, retornamos los datos utilizando una interfaz IQueryable<Category>

public IQueryable<Category> GetCategories() {

var northwind = new Northwind();
return northwind.Categories.Include(c => c.Products);

}

Los beneficios de utilizar esta interfaz es que permite la ejecución demorada de la  consulta, y permite un control del enlace de datos para modificar la consulta antes de ejecutarla.Esto es particularmente útil como los controles de paginación y ordenamiento. Esto controles pueden añadir automáticamente el orden y el número de página  en una consulta IQueryable<T> antes de ejecutarla. Esto tiene la ventaja de hacer estas acciones de ordenamiento y localización de la página activa muy fácil de implementar en al código, así también como de asegurarse que las operaciones que incluyen la paginación y ordenamiento se ejecutan en la base de datos y son eficientes ( y no se pagina en el cliente)

Para habilitar la ordenación y la paginación en el GridView, se establecen las propiedades AllowSorting y AllowPaging se establece en true, y especificamos un valor para la cantidad de registros por página de 5. También se especifica el atributo SortExpression adecuado a dos de las columnas.

<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false"

    AllowSorting="true" AllowPaging="true" PageSize="5"

    ModelType="WebApplication1.Model.Category"

    SelectMethod="GetCategories">

    <Columns>

        <asp:BoundField DataField="CategoryID" HeaderText="ID" SortExpression="CategoryID" />

        <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" />

        <asp:BoundField DataField="Description" HeaderText="Description" />

        <asp:TemplateField HeaderText="# of Products">

            <ItemTemplate><%# Item.Products.Count %></ItemTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>

El resultado de la ejecución es el siguiente:

image

Solo las categorías visibles en la grilla son obtenidas desde la BD, EF optimiza la consulta para llevar a cabo la operación de ordenación y de la paginación como parte de la consulta a la BD, haciendo eficiente este proceso incluso con grandes volúmenes de datos.

Video rápido sobre el tema
http://www.asp.net/vnext/videos/aspnet-vnext-videos-model-binding-part-1-selecting-data

Al igual que el post anterior, espero que te sirva para saber lo que viene de nuevo en la próxima versión de Visual Studio

Saludos!
Chalalo

Un comentario en “[ASP.NET VNext] WebForms Model Binding, Parte 1”

Deja un comentario

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