O ASP.NET 3.5 introduziu dois novos controles de manipulação de dados o ListView e o DataPager
ListView Server controlsque nos permitem exibir dados de uma fonte de dados e com o DataPager podemos paginar os dados exibidos no ListView de maneira muito simples. O listView dá ao usuário total controle sobre o processamento da página. using templates and styles(CSS) the user can generate clean HTML UI according to his needs. usando modelos e estilos (CSS), o usuário pode gerar HTML interface limpa, de acordo com suas necessidades..
ListView: E um controle de dados parecido com o DataList e o DataRepeater com as funcionalidade de edit, insert, e delete , sort, como o GridView. Uma coisa que ele tem que o GridView não possui e a possibilidade de controlar todo seu HTML de output, utilizar css gerando um output mais limpo e de qualidade.
DataPager: E um controle Web utilizado para paginar um controle de data e exibir os controles de navegação de paginas, ele so pode ser utilizado com controles que implementam a interface IPageableItemContainer. O ListView implementa esta interface e portanto pode utilizar o DataPager para fazer o trabalho de paginação de dados, e o que vamos fazer agora em nossa artigo.
Implementando um DataSource no ListView:
Podemos utilizar qualquer controle ASP.NET de DataSource para Bindar os dados no ListView, Colocando o DataSourceID propriedade do ListView para o nome do DataSource que será utilizado.
Podemos utilizar qualquer controle ASP.NET de DataSource para Bindar os dados no controle ListView, fixando o DataSourceID propriedade do controle ListView para o nome do controle de DataSource.
Neste Exemplo Utilizaremos o LinqDataSource para recuperar os dados que serão exibidos no ListView
<asp:ListView ID="lvwExemplo" DataSourceID="LinqDataSource1" runat="server" OnSorting="ListView1Sorting" DataKeyNames="id" OnItemCommand="ItemUpdate">
ListView fornece uma espécie de apoio para a funcionalidade de SORT. It has a sort event, which can be specified by setting the commandName property of the control, which is part of the ListView control to the 'Sort'. Tem um evento, que pode ser especificado através da definição da propriedade do controle commandName, que faz parte do controle ListView ao efetuar o "Sort". The Sort event supports command argument which can be used to identify which control raised the sort event. O evento Sort suporta o command argument que pode ser usado para identificar qual controlo disparou o evento. O evento SORT e registrado no controle atravez da diretiva The handler for sort event is registered by setting the OnSorting property of the ListView to the handler name. OnSorting propriedade do ListView para o manipulador nome.
Exemplo de como utilizar o evento SORT no ListView:
<asp:ListView ID="lvwExemplo" DataSourceID="LinqDataSource1" runat="server" OnSorting="ListView1Sorting" DataKeyNames="id" OnItemCommand="ItemUpdate">
<asp:LinkButton runat="server" ID="lnkOrdenarNome" Texto="Corpo" CommandName="Ordenar" CommandArgument="Nome" />
Manipulando o evento SORT
protected void ListView1Sorting(Object sender, ListViewSortEventArgs e)
{
String strImage;
if (e.SortDirection == SortDirection.Ascending)
strImage = "asc.gif";
else
strImage = "desc.gif";
Image sortSender = (Image)lvwExemplo.FindControl("Image1");
Image sortSubject = (Image)lvwExemplo.FindControl("Image2");
Image sortRecdate = (Image)lvwExemplo.FindControl("Image3");
Image sortBody = (Image)lvwExemplo.FindControl("Image4");
if (e.SortExpression == "From")
{
sortSender.ImageUrl = strImage;
sortSender.Visible = true;
sortSubject.Visible = false;
sortRecdate.Visible = false;
sortBody.Visible = false;
}
else if (e.SortExpression == "Subject")
{
sortSubject.ImageUrl = strImage;
sortSender.Visible = false;
sortSubject.Visible = true;
sortRecdate.Visible = false;
sortBody.Visible = false;
}
else if (e.SortExpression == "recdate")
{
sortBody.ImageUrl = strImage;
sortSender.Visible = false;
sortSubject.Visible = false;
sortRecdate.Visible = true;
sortBody.Visible = false;
}
else if (e.SortExpression == "Body")
{
sortBody.ImageUrl = strImage;
sortSender.Visible = false;
sortSubject.Visible = false;
sortRecdate.Visible = false;
sortBody.Visible = true;
}
else
{
sortSender.Visible = false;
sortSubject.Visible = false;
sortRecdate.Visible = false;
sortBody.Visible = false;
}
}
Entendendo os templates do ListView:
- LayoutTemplate
- ItemTemplate
- ItemSeparatorTemplate
- GroupTemplate
- GroupSeparatorTemplate
- EmptyItemTemplate
- EmptyDataTemplate
- SelectedItemTemplate
- AlternatingItemTemplate
- EditItemTemplate
- InsertItemTemplate
O principal esquema do controle ListView é criada pela definição de um LayoutTemplate. The LayoutTemplate will include controls that acts as a placeholder for the data like Table, Panel, Label or HTML controls like table, div, or span elements that have a runat attribute set to "server". O LayoutTemplate irá incluir controles que funciona como um marcador para os dados,
pois dentro dele serão inseridos os outros controles ele será a moldura dos elementos que o ListView irá exibir.
Item template is the main template which will show the data bounded to the ListView in a repeated manner. Item template é o principal modelo que irá exibir os dados como um repetidor. This template typically contains controls that are data-bound to data columns or other individual data elements. Este template geralmente contém itens data-bound, que são vinculados aos dados de cada coluna ou outros elementos de dados individuais.These two templates are mandatory. Estes dois templates são obrigatórios.
GroupTemplate will be used to group the items.GroupTemplate serão usados para agrupar os itens. The EditItemtemplate, SelectedItemTemplate, InsertItemTemplate are shown at that particular operation like insert, edit, select. ItemSeparatorTemplate, GroupSeparatorTemplate are used to separate the individual items and group Items Separately. O EditItemtemplate, SelectedItemTemplate, InsertItemTemplate são exibidos em operação como inserir, editar, selecionar. ItemSeparatorTemplate, GroupSeparatorTemplate são utilizados para separar os itens individuais e separador de grupo de itens.
We will use each template to embed the necessary HTML controls like table, tr, td, div, span or server controls to display the UI according to our needs.Vamos utilizar cada modelo para incorporar os necessários controlos HTML como tabela, tr, td, div, span ou Server control pra que a exibição da UI saia de acordo com nossas necessidades.
The following example shows the basic structure of a ListView with mandatory templates... O exemplo a seguir mostra a estrutura básica de um ListView com os templates obrigatórios modelos ...
<asp:ListView runat="server" ID="lvwExemplo1" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<table runat="server" id="table1" runat="server">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td id="Td1" runat="server">
<%-- Data-bound content. --%>
<asp:Label ID="NameLabel" runat="server" Text='<%#Eval("Name") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Um itemplaceholder deve ser especificado dentro do LayoutTemplate, pois será nele que o ListView irá inserir o itemTemplate quando compilado. Parece confuso mais não é! Vamos La, primeiro definimos o LayoutTemplate que será a moldura de nosso quando como no exemplo acima colocamos uma Tabela como LayoutTemplate, e dentro dele definimos um itemPlaceholder que será utilizado para repetir o itemPlaceholder com os dados do DataSorce.
Lets Rock!!!
Agora Vamos colocar a mão na massa! Vamos criar um ListView que irá exibir uma lista de clientes.
Preparando o LayoutTemplate
Precisamos criar o LayoutTemplate usando os controles necessários HTML como tabela, tr, td (com estilos) para a formatação e ASP.Net Server Controls (Botões, LinkButtons, DataPager) para exibir os cabeçalhos, assim como rodapés. We need to use a itemplaceholder for displaying the items from data source. Temos de usar uma itemplaceholder para exibir os itens da fonte de dados.
Preparando DataPager
The DataPager control is used to page data and to display navigation controls for data-bound controls that implement the IPageableItemContainer interface. O controle DataPager é usado para exibir a página de dados e controles de navegação de dados vinculada controlos que implementam a interface IPageableItemContainer.
A DataPager control can be associated to the data-bound control by using the PagedControlID property. Um controle DataPager pode estar associada ao controle de dados vinculados usando a propriedade PagedControlID. Alternatively, the DataPager control can be placed inside the data-bound control hierarchy. Alternativamente, o controle DataPager pode ser colocado no interior do controlo de dados vinculado.
DataPager control will display navigation controls by adding the pager fields to the control. Controle DataPager exibirá a navegação do controle adicionando ao campos para o controlo. DataPager supports following types of pager fields. DataPager utiliza os seguintes tipos de campos.
NextPreviousPagerField: Enables to navigate through pages one page at a time, or to jump to the first or last page. NextPreviousPagerField: Permite navegar através das páginas uma página de cada vez, ou para saltar para a primeira ou a última página. It shows first, prev, next, last buttons. Ele mostra os botões primeiro, anterior, próximo e último. The button type may be of Button, Image, LinkButton. O botão pode ser do tipo Button, Imagem, LinkButton.
NumericPagerField: enables to navigate through pages by displaying page numbers on the datapager. NumericPagerField: permite navegar por páginas apresentando números de página sobre o datapager.
TemplatePagerField: we can create custom UI by using TemplatePagerField. TemplatePagerField: podemos criar UI personalizado utilizando TemplatePagerField. We can use Labels, buttons, images to create custom UI as well as programmatic control of the DataPager. Podemos usar Label, botões, para criar imagens personalizadas IU programáticos, bem como o controlo da DataPager.
Para criar o DataPager de acordo com a imagem acima, temos de usar NumericPagerField bem como TemplatePagerField como parte do DataPager Fields. We can use DataPager control's properties like PageSize, TotalRowCount, StartRowIndex to create the TemplatePagerField. Podemos usar propriedades como PageSize do controle DataPager, TotalRowCount, StartRowIndex para criar o TemplatePagerField.
PageSize: qual página esta sendo exibido no DataPager.
TotalRowCount is the no of rows presented in the datasource attached to the DataPager. TotalRowCount: é o numero de linhas apresentados no DataPager.
StartRowIndex is the current first row's index in the data source . StartRowIndex: é a primeira linha, o primeiro registro que será exibido.
<asp:DataPager runat="server" ID="ItemDataPager" PageSize="12" PagedControlID="ListView1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true"
ShowLastPageButton="true" ShowNextPageButton="true" />
<asp:TemplatePagerField>
<PagerTemplate>
<b>showing
<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.StartRowIndex %>" />
to
<asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.StartRowIndex+Container.PageSize %>" />
( of
<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.TotalRowCount%>" />
records)
<br />
</b>
</PagerTemplate>
</asp:TemplatePagerField>
</Fields>
</asp:DataPager>
Preparando ItemTemplate & Alternative ItemTemplate
We need to embed the necessary HTML tags as well as Server controls like checkboxes, labels, buttons in order to get the following look for the ItemTemplates as well as AlternativeItemTemplates.
Precisamos inserir as tags HTML, bem como Server controls como checkboxes, labels, buttons, a fim de obter o layout dos itens dentro do ItemTemplates assim como no AlternativeItemTemplates. The data will be bounded to the properties of the control's by using inline ASP.Net code <% # Eval( "datafieldname" )%>, where datafiledname is the column name in the datasoure. Os dados serão inseridos nos controles usando o código inline do ASP.Net
<% # Eval ( "datafieldname")%>, onde o datafiledname é o nome da coluna no datasoure.
<ItemTemplate>
<tr title="Tooltip text goes here!" onmouseover="this.style.backgroundColor='#FFCCFF'"
onmouseout="this.style.backgroundColor='#FFFFFF'">
<td>
<asp:CheckBox ID="ID" runat="server" />
</td>
<td>
<asp:Label ID="lbFrom" runat="server"> <%#Eval("FirstName")%> </asp:Label>
</td>
<td>
<asp:Label ID="lbSubject" runat="server"><%#Eval("LastName")%></asp:Label>
</td>
<td>
<asp:Label ID="lbrecdate" runat="server"><%#Eval("BirthDate")%></asp:Label>
</td>
<td>
<asp:Label ID="lbBody" runat="server"><%#Eval("Country")%></asp:Label>
</td>
<td>
<asp:Button ID="EditButton" runat="Server" Text="Read" CommandName="Edit" />
</td>
</tr>
</ItemTemplate>
Preparando EditItemTemplate & InsertItemTemplate
Similarly we can create EditItemTemplate as well as InsertItemTemplate, but instead of labels we will use TextBoxes like below. Da mesma forma que vamos criar o EditItemTemplate bem como InsertItemTemplate, mas em vez de Label, vamos utilizar como TextBox
<EditItemTemplate>
<tr>
<td>
<asp:TextBox ID="tbFrom" runat="server" Enabled="false" Text='<%#Bind("FirstName")%>' />
</td>
<td>
<asp:TextBox ID="tbSubject" runat="server" Enabled="false" Text='<%#Bind("LastName")%>' />
</td>
<td>
<asp:TextBox ID="tbrecdate" runat="server" Enabled="false" Text='<%#Bind("BirthDate")%>' />
</td>
<td>
<asp:TextBox ID="tbBody" runat="server" Enabled="false" Text='<%#Bind("Country")%>' />
</td>
<td>
<asp:Button ID="DeleteButton" runat="Server" Text="Delete" CommandName="Delete" />
</td>
</tr>
</EditItemTemplate>
Insert:
<InsertItemTemplate>
<tr>
<td>
<asp:TextBox ID="tbFrom" runat="server" Enabled="true" Text='<%#Bind("FirstName")%>' />
</td>
<td>
<asp:TextBox ID="tbSubject" runat="server" Enabled="true" Text='<%#Bind("LastName")%>' />
</td>
<td>
<asp:TextBox ID="tbrecdate" runat="server" Enabled="false" Text='<%#Bind("BirthDate")%>' />
</td>
<td>
<asp:TextBox ID="tbBody" runat="server" Enabled="true" Text='<%#Bind("Country")%>' />
</td>
<td>
<asp:Button ID="InsertButton" runat="Server" Text="Send" CommandName="Insert" />
</td>
</tr>
</InsertItemTemplate>
Bem pessoal neste artigo pudemos ver como o ListView pode ser bem útil em nossos projetos, ainda mais hoje em dia em que a qualidade dos código HTML gerado levado mais a serio, e com esse controle podemos controlar toda a saída da nossa aplicação. E o mais legal e poder utilizar o controle DataPager para fazer a paginação dos dados de maneira simples e funcional.
Bons Códigos...
Se inscrever