Mostrar datos de lista utilizando el control ASP.NET Atlas ListView

Autor：Eve Cole Fecha de actualización：2009-06-30 16:12:55

Versión en inglés: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html

En esta serie, presentaré algunos de los controles más avanzados en Atlas Sys.UI.Data, que incluyen:

Sys.UI.Data.ListView : Mostrar datos de la lista usando el control ASP.NET Atlas ListView
Sys.UI.Data.ItemView: continuará
Sys.UI.Data.DataNavigator: continuará
Sys.UI.Data.XSLTView: Continuará Este artículo es el primero de ellos: Uso del control ListView de ASP.NET Atlas para mostrar datos de lista

En la mayoría de los programas web actuales, necesitamos mostrar algunos datos de lista al usuario. El control del servidor GridView en ASP.NET proporciona esta función, y el control del cliente ListView en Atlas también puede proporcionar funciones similares en el lado del cliente y ejecutarse en modo AJAX. Aunque puede utilizar un control GridView tradicional más el UpdatePanel de Atlas para proporcionar la misma operación AJAX, esta implementación es menos eficiente y no es un enfoque "puro" de Atlas. El método recomendado es utilizar el control de cliente ListView de Atlas en su lugar. No se preocupe, el control ListView de Atlas es tan simple como GridView y los dos son similares en muchos conceptos, como ItemTemplate. Sin embargo, cabe señalar que el IDE actual no proporciona una función de percepción inteligente para los scripts de Atlas. Además, los scripts de Atlas no tienen comprobaciones en tiempo de compilación, por lo que se debe tener mucho cuidado al escribir código.

Cuando utilice ListView, debe proporcionarle algunas plantillas necesarias (Plantilla) para indicarle a Atlas cómo representar su contenido. Existen las siguientes plantillas en ListView:

layoutTemplate: esta plantilla se utiliza para representar el contenedor que contiene los elementos de la lista (por ejemplo, usando la etiqueta <table>), el encabezado de la lista (por ejemplo, usando la etiqueta <thead>), la cola, etc Debe especificar una plantilla de diseño para ListView. Y esta plantilla debe contener una plantilla itemTemplate y, opcionalmente, una plantilla separatorTemplate.
itemTemplate: esta plantilla se utiliza para representar un elemento en la lista (por ejemplo, usando la etiqueta <tr>). Esta plantilla debe colocarse en layoutTemplate.
separatorTemplate: esta plantilla se usa para representar el elemento separador entre elementos de la lista (por ejemplo, usando la etiqueta <hr>). Esta plantilla debe colocarse en layoutTemplate.
plantilla vacía.: Esta plantilla se utiliza para representar ListView cuando no existen elementos. En este momento, es posible que no haya ningún elemento en el objeto DataSource relacionado con ListView, o puede que esté en proceso de obtenerse del servidor.
También hay algunas propiedades en ListView:

itemCssClass: especifica la clase CSS del elemento.
alternatingItemCssClass: la clase CSS del elemento que especifica el intervalo.
selectedItemCssClass: especifica la clase CSS del elemento seleccionado.
separatorCssClass: especifica la clase CSS que separa elementos.
itemTemplateParentElementId: este atributo especifica el elemento principal de itemTemplate y separatorTemplate. De esta manera, los elementos itemTemplate y separatorTemplate se pueden representar repetidamente.
Bien, usemos un ejemplo para ilustrar cómo usar el control ListView:

Primero, escribimos un servicio web que devuelve una tabla de datos en .NET. Tenga en cuenta que aquí heredaremos de la clase base Microsoft.Web.Services.DataService y agregaremos el atributo DataObjectMethod definido en el espacio de nombres System.ComponentModel al método de servicio. Al comienzo del método de servicio, utilizamos System.Threading.Thread.Sleep(2000) para simular un retraso de red de 2 segundos para que se pueda ver el contenido de la plantilla vacía.

[WebService(Espacio de nombres = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
clase pública MiServicio: Microsoft.Web.Services.DataService {

[DataObjectMethod(DataObjectMethodType.Select)]
Tabla de datos pública GetListData()
{
System.Threading.Thread.Sleep(2000);

DataTable dt = new DataTable("MyListData");
dt.Columns.Add("Nombre", tipo de(cadena));
dt.Columns.Add("Correo electrónico", tipo de (cadena));
Fila de datos nueva fila;
para (int i = 0; i < 5; ++i)
{
nuevaFila = dt.NuevaFila();
newRow["Nombre"] = string.Format("Dflying {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(nuevaFila);
}
devolver dt;
}
}

Luego, agregue algunos controles/etiquetas necesarios en la página ASP.NET: <atlas:ScriptManager ID="ScriptManager1" runat="server" />

<div id="miLista"></div>

<div estilo="display: none;">
</div>
En la etiqueta anterior, agregamos tres etiquetas: un control ScriptManager requerido. Se utiliza un div con la identificación myList para permitir que Atlas coloque el ListView renderizado aquí. Un div oculto que define nuestra plantilla. Los elementos de este div oculto no son visibles en la página y solo se utilizan para proporcionar a Atlas las plantillas necesarias.

Agregamos la siguiente plantilla ListView a este div oculto:

<table id="myList_layoutTemplate" border="1" cellpadding="3">
<cabeza>
<tr>
<td><span>Nº</span></td>
<td><span>Nombre</span></td>
<td><span>Correo electrónico</span></td>
</tr>
</thead>

<tbody id="myList_itemTemplateParent">

<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblNombre" /></td>
<td><span id="lblEmail" /></td>
</tr>

<tr id="myList_separatorTemplate">
<td colspan="3">Separador</td>
</tr>
</tbody>
</tabla>

<div id="myList_emptyTemplate">
Sin datos
</div>

En el código anterior puedes ver las cuatro plantillas que mencioné. Especifique también una identificación para cada plantilla, que se utilizará en la declaración del script Atlas a continuación. En este ejemplo, representaré este ListView como una tabla HTML; desafortunadamente, los elementos separados serán feos (una línea en blanco).

Finalmente, agregue la instrucción del script Atlas a la página:

Aquí agregué un objeto DataSource del cliente Atlas para obtener datos del servicio web. No hablaremos mucho sobre DataSource aquí (puede que se presente en artículos posteriores). Echemos un vistazo a la definición relacionada con ListView: en la definición de ListView, especificamos el atributo itemTemplateParentElementId. Luego se define un segmento de enlace dentro de ListView para vincular los datos obtenidos de DataSource a ListView. También definimos cuatro segmentos de plantilla, cada uno de los cuales utiliza layoutElement para asociarse con las cuatro plantillas definidas anteriormente. Tenga en cuenta que para el primer control de etiqueta en la plantilla layoutTemplate, especificamos Agregar transformador en su enlace para cambiar el orden desde 0 hasta 1 (para Atlas Transformer, consulte mi artículo: http://dflying.cnblogs. com/archive/2006/04/05/367908.html ).

Ya terminaste, ejecutémoslo.