Versión en inglés: http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_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: muestra datos individuales de una colección utilizando el control ASP.NET Atlas ItemView
Sys.UI.Data.DataNavigator: use el control ASP.NET Atlas PageNavigator para implementar la navegación de paginación del lado del cliente
Sys.UI.Data.SortBehavior: continuará
Sys.UI.Data.XSLTView: continuará Este es el tercer artículo: Utilice el control PageNavigator de ASP.NET Atlas para implementar la navegación de paginación del lado del cliente y colocar todos los registros en una página Definitivamente no es una buena idea, especialmente cuando tienes cientos o miles de registros. Sus usuarios deben seguir arrastrando la barra de desplazamiento o incluso usar Control+F para encontrar el contenido que buscan, lo que brindará una experiencia de usuario muy pobre. En este momento, será mucho más fácil de usar mostrar los datos en la paginación. Algunos controles del lado del servidor ASP.NET tienen capacidades integradas de paginación y navegación de páginas, como DataGrid y GridView. De manera similar, el control del cliente Atlas Sys.UI.Data.DataNavigator también proporciona funciones similares, lo que mejorará en gran medida nuestra eficiencia de desarrollo.
El control DataNavigator funcionará con el control DataView (consulte: Introducción al control en el espacio de nombres Atlas Sys.Data - DataView y DataFilter). Sabemos que el control DataView no proporciona métodos relacionados con la navegación de la página, por lo que solo podemos configurar directamente su propiedad pageIndex para implementar la navegación. Aunque no es difícil, en muchos casos no es una buena idea, porque muchos desarrolladores descuidados como yo a menudo olvidan verificar el valor límite de pageIndex, lo que causa problemas innecesarios. Esta es una de las razones por las que Atlas proporciona el control DataNavigator. El control DataNavigator servirá como proxy para el control DataView y proporcionará una interfaz de navegación de páginas fácil de usar.
El objeto DataNavigator tiene un solo atributo:
dataView: una referencia a un objeto DataView. Este DataNavigator le aplicará la operación de navegación de página. Siempre debe especificar esta propiedad.
Además, para utilizar el control DataNavigator, también debe proporcionar algunos botones Atlas con algunas propiedades de nombre de comando especificadas para activar las operaciones de navegación de página correspondientes. La propiedad principal de estos botones debe establecerse en este control DataNavigator para garantizar que DataNavigator pueda capturar los comandos emitidos por estos botones.
Puede especificar el atributo CommandName de su botón como las siguientes cinco cadenas, cada una con un significado diferente:
página: convierte el índice de la página actual al valor especificado en el argumento del comando. Con este comando podremos cambiar rápidamente el índice de la página.
página siguiente: cambia a la página siguiente (si la página siguiente existe).
página anterior: cambia a la página anterior (si existe una página anterior).
primera página: cambia a la primera página.
última página: cambia a la última página.
Bien, la introducción aburrida como MSDN terminó aquí, familiaricémonos con el uso de DataNavigator a través de un ejemplo.
Primero necesitamos exponer un servicio web para que la página Atlas pueda usarlo. El servicio web devolverá 100 registros. El siguiente es el código de este Servicio Web, que es muy fácil de entender y no se repetirá aquí.
Servicio Web
usando Sistema;
usando System.Collections;
usando System.Collections.Generic;
usando System.ComponentModel;
usando System.IO;
usando System.Web;
usando System.Web.Caching;
utilizando System.Web.Services;
utilizando System.Web.Services.Protocols;
utilizando Microsoft.Web.Services;
//
// Para simplificar, este ejemplo demuestra cómo almacenar y manipular
// También se pueden utilizar los objetos de datos en la memoria.
//
[WebService(Espacio de nombres = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
clase pública MyDataService: Servicio de datos
{
Lista estática<Entrada> _data;
objeto estático _dataLock = nuevo objeto();
Lista estática privada<Entrada> Datos
{
conseguir
{
si (_data == nulo)
{
bloquear(_dataLock)
{
si (_data == nulo)
{
_data = nueva Lista<Entrada>();
para (int i = 0; i < 100; i++)
{
_data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format(" Dflying{0}@dflying.net ", i.ToString())));
}
}
}
}
devolver _datos;
}
}
[Método de objeto de datos (tipo de método de objeto de datos. Seleccionar)]
Entrada pública[] SelectRows()
{
devolver MyDataService.Data.ToArray();
}
}
entrada de clase pública
{
cadena privada _nombre;
cadena privada _correo electrónico;
privado int _id;
[DataObjectField (verdadero, verdadero)]
identificación interna pública
{
obtener {return_id}
establecer { _id = valor }
}
[CampoObjetoDeDatos(falso)]
[Valor predeterminado ("Nueva fila")]
Nombre de cadena pública
{
obtener {return_name}
establecer { _nombre = valor }
}
[CampoObjetoDeDatos(falso)]
[Valor predeterminado ("")]
cadena pública de correo electrónico
{
obtener {return_email}
establecer { _correo electrónico = valor }
}
entrada pública()
{
_id = -1;
}
Entrada pública (int id, nombre de cadena, descripción de cadena)
{
_id = identificación;
_nombre = nombre;
_correo electrónico = descripción;
}
}
Luego, en la página ASPX, debemos considerar y definir las siguientes cuatro partes:
un control ScriptManager que contiene los archivos de script relacionados con Atlas Framework necesarios para la página. Normalmente, esto es lo que debe incluir cada página del Atlas.
Un div de marcador de posición (la identificación es contenido de datos, consulte el código). Atlas colocará aquí el ListView paginado renderizado.
Un div (control DataNavigator) como contenedor y un conjunto de botones (botones de comando) contenidos en él se utilizan para implementar funciones de navegación de páginas.
Un div oculto utilizado para colocar la plantilla ListView.
El siguiente es el código de las cuatro partes anteriores. Con respecto a la plantilla del control ListView, consulte mi artículo: Uso del control ListView de ASP.NET Atlas para mostrar datos de lista.
<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- Elemento para ListView paginado (contenedor) -->
<div id="contenido de datos">
</div>
<!-- PageNavigator -->
<div id="páginaNavigator">
<tipo de entrada="botón" id="btnFirstPage" valor="<<"
<tipo de entrada="botón" id="btnPrevPage" valor="<"
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<tipo de entrada="botón" id="btnNextPage" valor=">"
<tipo de entrada="botón" id="btnLastPage" valor=">>"
</div>
<!-- Plantillas -->
<div style="visibilidad: oculto; visualización: ninguna">
<table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<cabeza>
<tr>
<td><span>Nº</span></td>
<td><span>Nombre</span></td>
<td><span>Correo electrónico</span></td>
</tr>
</thead>
<!-- Repetir plantilla -->
<tbody id="myList_itemTemplateParent">
<!-- Repetir plantilla de elemento -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblNombre" /></td>
<td><span id="lblEmail" /></td>
</tr>
</tbody>
</tabla>
<!-- Plantilla vacía -->
<div id="myList_emptyTemplate">
Sin datos
</div>
</div>
Finalmente, es hora de escribir la definición del script XML para Atlas, que consta de las siguientes cinco partes:
Parte 1: DataSource de control del cliente Atlas, utilizado para obtener datos del servicio web que definimos anteriormente.
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
Parte 2: un control DataView (consulte: Introducción a los controles en el espacio de nombres Atlas Sys.Data - DataView y DataFilter), utilizado para paginar los 100 datos obtenidos en la primera parte.
<dataView id="ver" pageSize="12">
<enlaces>
<enlace dataContext="dataSource" dataPath="datos" propiedad="datos" />
</enlaces>
</dataView>
Parte 3: Un control ListView (consulte: Uso del control ListView de ASP.NET Atlas para mostrar datos de lista), utilizado para mostrar datos paginados.
<listView id="contenido de datos" itemTemplateParentElementId="myList_itemTemplateParent" >
<enlaces>
<binding dataContext="ver" dataPath="filteredData" propiedad="datos"/>
</enlaces>
<plantilla de diseño>
<plantilla diseñoElement="myList_layoutTemplate"/>
</layoutTemplate>
<plantilla de elemento>
<plantilla diseñoElement="myList_itemTemplate">
<etiqueta id="lblIndex">
<enlaces>
<binding dataPath="$index" transform="Agregar" propiedad="texto"/>
</enlaces>
</etiqueta>
<etiqueta id="lblName">
<enlaces>
<ruta de datos vinculante="Nombre" propiedad="texto"/>
</enlaces>
</etiqueta>
<etiqueta id="lblEmail">
<enlaces>
<binding dataPath="Correo electrónico" propiedad="texto"/>
</enlaces>
</etiqueta>
</plantilla>
</itemTemplate>
<plantilla vacía>
<plantilla diseñoElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Parte 4: Botones de control y comando del DataNavigator. Observe que aquí tenemos cuatro botones, cada uno con un atributo CommandName diferente, que también corresponde a una operación de DataNavigator en DataView. Al mismo tiempo, las propiedades principales de estos botones se establecen en este objeto DataNavigator.
<dataNavigator id="páginaNavigator" dataView="vista"/>
<botón id="btnFirstPage" parent="pageNavigator" comando="PrimeraPágina" />
<botón id="btnPáginaPrevia" padre="páginaNavigator" comando="PáginaPrevia">
<enlaces>
<propiedad vinculante="habilitada" dataPath="hasPreviousPage"/>
</enlaces>
</botón>
<botón id="btnNextPage" parent="pageNavigator" comando="NextPage">
<enlaces>
<propiedad vinculante="habilitada" dataPath="hasNextPage"/>
</enlaces>
</botón>
<botón id="btnLastPage" parent="pageNavigator" comando="ÚltimaPágina" />
Parte 5: Dos etiquetas, que muestran el número total de páginas y el número de serie de la página actual, respectivamente.
<label id="lblPageNumber">
<enlaces>
<binding dataContext="ver" propiedad="texto" dataPath="pageIndex" transform="Agregar"/>
</enlaces>
</etiqueta>
<etiqueta id="lblPageCount">
<enlaces>
<enlace dataContext="ver" propiedad="texto" dataPath="pageCount"/>
</enlaces>
</etiqueta>
Bien, pruébalo en el navegador:
