DataList vs Listview

En una de las pasadas charlas, me hicieron una muy buena pregunta: -¿Qué debo usar DataList o ListView?. Recuerden que ListView es uno de los nuevos controles de .Net 3.5.

En cuanto a funcionalidades tenemos que el control DataList admite la selección, edición, y eliminación, y por otro lado el control ListView admite selección, edición, eliminación, inserción, y ordenamiento, y con la ayuda del control DataPager, el control ListView soporta paginación built-in, ósea agregas el control, configuras declarativamente y listo.

Recuerden que los dos controles son para visualizar data, ósea es independiente si lo usas con un ObjectDataSource, LinqDataSource, SqlDataSource, o lo cargas programáticamente.

Vayamos a un ejemplo, para ver la diferencia en el diseño, y el render que estos dos controles producen:

Por cierto recuerden que hay dos niveles en los uso de controles para mostrar data, directamente proporcionales, a más funcionalidad built-in menos controlamos el html generado. Por ejemplo con el GridView, habilitando propiedades tenemos paginación, ordenamiento y más, con el DataList tenemos menos funcionalidades (selección, edición) pero la generación del html es más flexible, y en el control Repeater no tiene ninguna funcionalidad pero nosotros controlamos completamente la generación del html.

Digamos que el control ListView es la evolución de un control Repetaer y DataList juntos, y mucho mejor.

Ahora vayamos con la diferencia entre el control ListView y el DataList:

Si queremos hacer lo hemos puesto arriba con un control ListView sería así:

   1: <asp:ListView ID="lstvAds" DataSourceID="LinqDataSource1" 
   2:    ItemPlaceholderID="itemContainer" runat="server">
   3:     <LayoutTemplate>
   4:         <ul class="classifiedlist">
   5:             <asp:PlaceHolder ID="itemContainer" runat="server" />
   6:         </ul>
   7:     </LayoutTemplate>
   8:     <ItemTemplate>
   9:         <li><a href='<%# Eval("Id", "ShowAd.aspx?id={0}") %>'>
  10:             <img border="0" width="56" height="56" ....
  11:                 src='<%# Eval("PreviewImageId","...") %>' /></a>
  12:             <br /><b><%# Eval("Title") %></b> -
  13:             <%# Eval("Price","{0:c2}") %>
  14:         </li>
  15:     </ItemTemplate>
  16: </asp:ListView>

Para explicar un poco, este modelo de templates. LayoutTemplate, es el estructura base para la distribución de nuestros elementos, en este caso es una lista. ¿Cómo sabe el ListView donde colocar al elemento?, hablamos del clásico ItemTemplate, pues usando el control PlaceHolder le estamos indicado que este será el lugar del elemento. Este es un modo de usarlo, en la ayuda de MSDN, encontrarán otro modo. De ItemTemplate, que decir?, ya lo conocen todos no?

Si quiero hacer lo mismo, pero con un DataList tendría que ser algo así:

   1: <asp:DataList RepeatDirection="Horizontal" ID="dtAds" 
   2:      DataSourceID="LinqDataSource1" runat="server"
   3:      RepeatLayout="Flow">
   4:     <ItemTemplate>
   5:         <ul class="classifiedlist">
   6:             <li><a href='<%# Eval("Id", "ShowAd.aspx?id={0}") %>'>
   7:                 <img border="0" width="56" height="56" ...
   8:                     src='<%# Eval("PreviewImageId","...") %>' /></a>
   9:                 <br /><b><%# Eval("Title") %></b> -
  10:                 <%# Eval("Price","{0:c2}") %>
  11:             </li>
  12:         </ul>
  13:     </ItemTemplate>
  14: </asp:DataList>

En cuanto al DataList, para lograr algo parecido debemos hacer que el tipo de Layout sea Flow, y no un Table. Ahora en cuanto al ItemTemplate, noten que hemos puesto el elemento <ul> dentro de el, otra posibilidad hubiera sido colocarlo dentro del HeaderTemplate, y dentro del FooterTemplate colocar el </ul>. Aunque el html generado no sería el que esperamos, más adelante veremos el porque.

El html generado por el ListView es:

   1: <div id="ctl00_Main_UpdatePanel1">
   2:     <ul class="classifiedlist">
   3:         <li><a href='ShowAd.aspx?id=16'>
   4:             <img border="0" width="56" ...
   5:                 src='PhotoDisplay.ashx?photoid=17&amp;size=small' /></a>
   6:             <br />
   7:             <b>Soda Stereo</b> - S/. 30.00 </li>
   8:         <li><a href='ShowAd.aspx?id=15'>
   9:             <img border="0" width="56" ...
  10:                 src='PhotoDisplay.ashx?photoid=16&amp;size=small' /></a>
  11:             <br />
  12:             <b>Red Bull</b> - S/. 23.00 </li>
  13:     </ul>
  14: </div>

Y el html generado por el DataList:

   1: <div id="ctl00_Main_UpdatePanel1">
   2:     <span id="ctl00_Main_dtAds"><span>
   3:         <ul class="classifiedlist">
   4:             <li><a href='ShowAd.aspx?id=16'>
   5:                 <img border="0" width="56" ...
   6:                     src='PhotoDisplay.ashx?photoid=17&amp;size=small' /></a>
   7:                 <br />
   8:                 <b>Soda Stereo</b> - S/. 30.00 </li>
   9:         </ul>
  10:     </span><span>
  11:         <ul class="classifiedlist">
  12:             <li><a href='ShowAd.aspx?id=15'>
  13:                 <img border="0" width="56" ...
  14:                     src='PhotoDisplay.ashx?photoid=16&amp;size=small' /></a>
  15:                 <br />
  16:                 <b>Red Bull</b> - S/. 23.00 </li>
  17:         </ul>
  18:     </span></span>
  19: </div>  

A primera vista podemos apreciar que el html generado por el ListView es más limpio que el generado por el control DataList, noten que los dos están dentro de un UpdatePanel de ahí el div contenedor, pero noten que además el control DataList genera un elemento span para el control en si, y por cada ítem, también genera un elemento span. Pero el ListView genera html puro, por así llamarlo. Digamos que es como una diferencia entre el control Literal y el control Label, recuerden que el uso de este elemento span por la mayoría de controles de ASP.NET al hacer render, es lo que permite darle colores, diseño, y todo eso directamente a través de las propiedades del control, o usando por ejemplo los ItemStyle, y todos los ABCStyle. En cambio los que no usan span, como control Literal, Repeater o el ListView, nosotros podemos personalizar completamente el diseño del html a generar.

Por cierto, si hubiéramos puesto el elemento <ul> en el HeaderTemplate y el elemento </ul>, en el FooterTemplate, del control DataList, el resultado generado sería algo así:

   1: <div id="ctl00_Main_UpdatePanel1">
   2:     <span id="ctl00_Main_dtAds"><span>
   3:         <ul class="classifiedlist">
   4:     </span><span>
   5:         <li><a href='ShowAd.aspx?id=16'>
   6:             <img border="0" width="56" height="56" class="col_photo" alt="Ad preview photo."
   7:                 src='PhotoDisplay.ashx?photoid=17&amp;size=small' /></a>
   8:             <br />
   9:             <b>Soda Stereo</b> - S/. 30.00 </li>
  10:     ...
  11: </div>

Noten que el elemento <ul>, colocado dentro del HeaderTemplate, también es contenido dentro de un control span, y debido a esto podemos usar el HeaderStyle, para personalizar el diseño del título de mi lista. Y en esto caso parece que sería mejor el primero modelo, ya que este último va contra las reglas de anidación, y a su vez esto va contra los estándares.

Quedo claro las diferencias?, digamos que el control ListView es una mixtura del control Repeater, podemos personalizar el contenido html generado a nuestro antojo, y el control DataList, podemos implementar funciones de selección, edición, y eliminación, pero además es recargado ya que podemos implementar ordenamiento, inserción, y paginación, claro con la ayuda del control DataPager.

Y que debo usar?, pues depende del escenario, pero me parece que el ListView va a dejar atrás al control DataList, sobretodo si estamos acostumbrados a explotar el uso de CSS.

Algunos artículos usando el control ListView:

P.D.: Nadie dijo que con el control Repeater no se pueda paginar, o por ahí alguien diga yo he hecho inserciones con el Repeater :S, pero de manera built-in por así llamarlo, no permiten estas funcionalidades.

Saludos,


Post cruzado
Published 3/12/2007 2:09 por Sergio Tarrillo
Archivado en: ,
Comparte este post:
http://geeks.ms/blogs/sergiotarrillo/archive/2007/12/03/54385.aspx

Comentarios

# re: DataList vs Listview

muy bueno, gracias por compratir tus conocimientos

Tuesday, September 30, 2008 5:27 PM por Paolo

# gLHYQTVqIBwjBs

Every time this kind of crap is brought up it just lowers the respect that whites can give blacks. ,

Friday, October 23, 2009 12:33 AM por Sad46

# re: DataList vs Listview

Muchisimas gracias! Me fue de gran utilidad!

Un saludo desde Paraguay.

Tuesday, May 25, 2010 11:47 PM por Pablo Vergara