Versão em inglês: http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html
Nesta série, apresentarei alguns dos controles mais avançados do Atlas Sys.UI.Data, incluindo:
Sys.UI.Data.ListView : Exibir dados da lista usando o controle ASP.NET Atlas ListView
Sys.UI.Data.ItemView: exibir dados individuais de uma coleção usando o controle ASP.NET Atlas ItemView
Sys.UI.Data.DataNavigator: Use o controle ASP.NET Atlas PageNavigator para implementar a navegação de paginação do lado do cliente
Sys.UI.Data.SortBehavior: Continua
Sys.UI.Data.XSLTView: Continua Este é o terceiro artigo: Use o controle ASP.NET Atlas PageNavigator para implementar a navegação de paginação do lado do cliente e colocar todos os registros em uma página definitivamente não é uma boa ideia, especialmente quando você tem centenas ou milhares de registros. Seus usuários precisam ficar arrastando a barra de rolagem ou até mesmo usar Control+F para encontrar o conteúdo que procuram, o que trará uma experiência de usuário muito ruim. Neste momento, será muito mais fácil exibir os dados na paginação. Alguns controles do lado do servidor ASP.NET possuem recursos internos de paginação e navegação de página, como DataGrid e GridView. Da mesma forma, o controle do cliente Atlas Sys.UI.Data.DataNavigator também fornece funções semelhantes, o que melhorará muito nossa eficiência de desenvolvimento.
O controle DataNavigator funcionará com o controle DataView (consulte: Introdução ao controle no namespace Atlas Sys.Data - DataView e DataFilter). Sabemos que o controle DataView não fornece métodos relacionados à navegação de página, portanto, só podemos definir diretamente sua propriedade pageIndex para implementar a navegação. Embora não seja difícil, em muitos casos não é uma boa ideia, porque muitos desenvolvedores descuidados como eu muitas vezes esquecem de verificar o valor limite do pageIndex, causando problemas desnecessários. Esta é uma das razões pelas quais o Atlas fornece o controle DataNavigator. O controle DataNavigator servirá como proxy para o controle DataView e fornecerá uma interface de navegação de página fácil de usar.
O objeto DataNavigator possui apenas um atributo:
dataView: uma referência a um objeto DataView. Este DataNavigator aplicará a ele a operação de navegação de página. Você deve sempre especificar esta propriedade.
Além disso, para usar o controle DataNavigator, você também precisa fornecer alguns botões Atlas com algumas propriedades commandName especificadas para acionar as operações de navegação de página correspondentes. A propriedade pai desses botões deve ser definida como esse controle DataNavigator para garantir que o DataNavigator possa capturar os comandos emitidos por esses botões.
Você pode especificar o atributo commandName do seu Button como as cinco strings a seguir, cada uma com um significado diferente:
page: Converte o índice da página atual no valor especificado no argumento do comando. Com este comando podemos alterar rapidamente o índice da página.
nextpage: Muda para a próxima página (se a próxima página existir).
previouspage: Muda para a página anterior (se existir uma página anterior).
primeira página: muda para a primeira página.
lastpage: muda para a última página.
OK, a introdução chata como o MSDN acabou aqui, vamos nos familiarizar com o uso do DataNavigator através de um exemplo.
Primeiro precisamos expor um Web Service para que a página do Atlas possa utilizá-lo. O serviço Web retornará 100 registros. A seguir está o código deste Web Service, que é muito fácil de entender e não será repetido aqui.
Serviço Web
usando o sistema;
usando System.Collections;
usando System.Collections.Generic;
usando System.ComponentModel;
usando System.IO;
usando System.Web;
usando System.Web.Caching;
usando System.Web.Services;
usando System.Web.Services.Protocols;
usando Microsoft.Web.Services
;
// Para simplificar, este exemplo demonstra o armazenamento e a manipulação
// os objetos de dados na memória também podem ser usados.
//
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
classe pública MyDataService: DataService
{
Lista estática<Entrada> _data;
objeto estático _dataLock = novo objeto();
lista estática privada<Entrada> Dados
{
pegar
{
if (_dados == nulo)
{
bloqueio(_dataLock)
{
if (_dados == nulo)
{
_dados = new 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())));
}
}
}
}
retornar _dados;
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
entrada pública[] SelectRows()
{
return MyDataService.Data.ToArray();
}
}
entrada de classe pública
{
string privada _nome;
string privada _email;
private int _id;
[DataObjectField(verdadeiro,verdadeiro)]
ID interno público
{
obter {retornar _id};
definir {_id = valor};
}
[DataObjectField(falso)]
[DefaultValue("Nova linha")]
nome da string pública
{
obter {retornar _nome};
definir {_nome = valor};
}
[DataObjectField(falso)]
[Valor Padrão("")]
string pública E-mail
{
obter {retornar _e-mail};
definir {_e-mail = valor};
}
entrada pública()
{
_id = -1;
}
entrada pública (int id, nome da string, descrição da string)
{
_id = id;
_nome = nome;
_e-mail = descrição;
}
}
Então, na página ASPX, precisamos considerar e definir as quatro partes a seguir:
um controle ScriptManager para conter os arquivos de script relacionados ao Atlas Framework necessários para a página. Normalmente, é isso que toda página do Atlas deve incluir.
Um espaço reservado div (id é dataContents, consulte o código). O Atlas colocará o ListView paginado renderizado aqui.
Um div (controle DataNavigator) como contêiner e um conjunto de botões (botões de comando) contidos nele são usados para implementar funções de navegação de página.
Uma div oculta usada para colocar o modelo ListView.
A seguir está o código das quatro partes acima. Em relação ao modelo do controle ListView, consulte meu artigo: Usando o controle ASP.NET Atlas ListView para exibir dados de lista.
<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- Elemento para ListView paginado (contêiner) -->
<div id="dataContents">
</div>
<!-- PageNavigator -->
<div id="pageNavigator">
<input type="button" id="btnFirstPage" value="<<"
<input type="button" id="btnPrevPage" value="<"
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<input type="button" id="btnNextPage" value=">"
<input type="button" id="btnLastPage" value=">>"
</div>
<!-- Modelos -->
<div style="visibilidade: oculto; exibição: nenhum">
<table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<thead>
<tr>
<td><span>Não.</span></td>
<td><span>Nome</span></td>
<td><span>E-mail</span></td>
</tr>
</thead>
<!-- Repetir modelo -->
<tbody id="myList_itemTemplateParent">
<!-- Repetir modelo de item -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
</tbody>
</tabela>
<!-- Modelo vazio -->
<div id="myList_emptyTemplate">
Sem dados
</div>
</div>
Finalmente, é hora de escrever a definição do script XML para o Atlas, que possui as seguintes cinco partes:
Parte 1: Controle do cliente Atlas DataSource, usado para obter dados do Web Service que definimos acima.
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
Parte 2: Um controle DataView (consulte: Introdução aos controles no namespace Atlas Sys.Data - DataView e DataFilter), usado para paginar os 100 dados obtidos na primeira parte.
<dataView id="view" pageSize="12">
<ligações>
<binding dataContext="dataSource" dataPath="data" property="data" />
</ligações>
</dataView>
Parte 3: Um controle ListView (consulte: Usando o controle ASP.NET Atlas ListView para exibir dados de lista), usado para exibir dados paginados.
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
<ligações>
<binding dataContext="view" dataPath="filteredData" property="data"/>
</ligações>
<modelo de layout>
<template layoutElement="myList_layoutTemplate"/>
</layoutTemplate>
<itemTemplate>
<template layoutElement="myList_itemTemplate">
<label id="lblIndex">
<ligações>
<binding dataPath="$index" transform="Adicionar" propriedade="texto"/>
</ligações>
</label>
<label id="lblName">
<ligações>
<binding dataPath="Nome" propriedade="texto"/>
</ligações>
</label>
<label id="lblEmail">
<ligações>
<binding dataPath="Email" property="text"/>
</ligações>
</label>
</template>
</itemTemplate>
<modelo vazio>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Parte 4: Botões de controle e comando do DataNavigator. Observe que temos quatro botões aqui, cada um com um atributo commandName diferente, que também corresponde a uma operação do DataNavigator no DataView. Ao mesmo tempo, as propriedades pai desses botões são definidas para este objeto DataNavigator.
<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="Página Anterior">
<ligações>
<binding property="enabled" dataPath="hasPreviousPage"/>
</ligações>
</button>
<button id="btnNextPage" parent="pageNavigator" command="NextPage">
<ligações>
<binding property="enabled" dataPath="hasNextPage"/>
</ligações>
</button>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />
Parte 5: Duas Etiquetas, mostrando o número total de páginas e o número de série da página atual respectivamente.
<label id="lblPageNumber">
<ligações>
<binding dataContext="view" property="text" dataPath="pageIndex" transform="Adicionar"/>
</ligações>
</label>
<label id="lblPageCount">
<ligações>
<binding dataContext="view" property="text" dataPath="pageCount"/>
</ligações>
</label>
OK, teste no navegador:
