paulo.arancibia

Entre las novedades de ASP.NET 3.5 se encuentran los controles ListView, DataPager y LinqDataSource, para mostrarles el funcionamiento de cada uno de ellos prepare esta pequeña demo donde podrán apreciar las funcionalidades básicas de los mismos.

Para comenzar vamos a definir nuestro modelo de datos usando el designer de Linq To SQL, para ello vamos a agregar un archivo dbml a nuestra solución.

Luego arrastraremos las tablas de las cuales obtendremos los datos al designer.

Ahora es tiempo de crear un nuevo Data Source, para ello arrastraremos a nuestra página un control LinqDataSource y pasaremos a configurarlo, primero elegiremos el contexto que vamos a utilizar.

Luego seleccionaremos la tabla y campos que consultaremos.

Finalizado este paso, es tiempo de añadir a nuestra página un ScriptManager, un UpdatePanel y dentro de este ultimo un control ListView, luego pasaremos a la parte de código y configuraremos el control de la siguiente manera.

<LayoutTemplate>

<ul id=”itemcontainer” runat=”server” class=”players_list”></ul>

</LayoutTemplate>

<ItemTemplate>

<li>

<img src=’<%#Eval(”Photo”) %>‘ /><br />

<%#Eval(“Name”) %><br/>

Position: <%#Eval(“Position”) %>ǀ Age: <%#Eval(“Age”) %><br/>

</li>

</ItemTemplate>

</asp:ListView>

Como podrán apreciar he configurado el DataSourceID para que use el LinqDataSource que creamos previamente, luego agregue un elemento LayoutTemplate, el cual será el contenedor de nuestros datos y finalmente añadí un ItemTemplate, el cual define la apariencia de cada uno de los items a presentar, tanto el LayoutTemplate como el ItemTemplate, son los elementos del ListView que más se van a utilizar, pero el mismo posee muchos más, que nos permiten configurar y personalizar aun más la apariencia del mismo.

Como último paso, agregaremos un control DataPager, el cual nos permitirá añadir la función de paginación al ListView, para ello arrastraremos un control DataPager a nuestra página y lo configuraremos de la siguiente manera.

<asp:DataPager ID=”DataPager1″ runat=”server” class=”pager” PagedControlID=”ListView1″ PageSize=”10″>

<Fields>

<asp:NumericPagerField />

</Fields>

</asp:DataPager>

La configuración de este control es muy simple, solo debemos seleccionar a que control lo vamos a enlazar utilizando la propiedad PagedControlID, en este caso será nuestro ListView, luego elegiremos la cantidad de items por página y la apariencia del mismo, yo en este caso elegí NumericPagerField, pero hay un par de opciones más que podemos utilizar.

Cabe aclarar que por el momento el DataPager que viene incluido en la Beta 2 de Orcas no trabaja muy bien con consultas personalizadas, así que tengan esto en cuenta si comienzan a experimentar con estos controles.

Ya para terminar les dejo una imagen de los controles en funcionamiento.