Versão em inglês: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_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: Continua
Sys.UI.Data.DataNavigator: Continua
Sys.UI.Data.XSLTView: Continua Este artigo é o primeiro deles: Usando o controle ASP.NET Atlas ListView para exibir dados de lista
Na maioria dos programas da Web atuais, precisamos exibir alguns dados de lista para o usuário. O controle de servidor GridView no ASP.NET fornece essa função, e o controle de cliente ListView no Atlas também pode fornecer funções semelhantes no lado do cliente e executar no modo AJAX. Embora você possa usar um controle GridView tradicional mais o UpdatePanel do Atlas para fornecer a mesma operação AJAX, essa implementação é menos eficiente e não é uma abordagem "pura" do Atlas. O método recomendado é usar o controle de cliente ListView do Atlas. Não se preocupe, o controle ListView do Atlas é tão simples quanto o GridView, e os dois são semelhantes em muitos conceitos, como o ItemTemplate. No entanto, deve-se notar que o IDE atual não fornece uma função de percepção inteligente para scripts Atlas. Além disso, os scripts Atlas não possuem verificações em tempo de compilação, portanto, você deve ter cuidado extra ao escrever código.
Ao usar ListView, você deve fornecer alguns modelos necessários (Template) para informar ao Atlas como renderizar seu conteúdo. Existem os seguintes modelos em ListView:
layoutTemplate: Este modelo é usado para renderizar o contêiner contendo itens da lista (por exemplo, usando a tag <table>), o cabeçalho da lista (por exemplo, usando a tag <thead>), a cauda, etc Você deve especificar um layoutTemplate para o ListView. E este modelo deve conter um modelo itemTemplate e, opcionalmente, um modelo separatorTemplate.
itemTemplate: Este modelo é usado para renderizar um item na lista (por exemplo, usando a tag <tr>). Este modelo deve ser colocado em layoutTemplate.
separatorTemplate: Este modelo é usado para renderizar o elemento separador entre os itens da lista (por exemplo, usando a tag <hr>). Este modelo deve ser colocado em layoutTemplate.
vazioTemplate.: Este modelo é usado para renderizar o ListView quando não existe nenhum item. Neste momento, pode não haver nenhum item no objeto DataSource relacionado ao ListView ou ele pode estar em processo de obtenção do servidor.
Existem também algumas propriedades em ListView:
itemCssClass: especifica a classe css do item item.
alternatingItemCssClass: a classe css do item item que especifica o intervalo.
selectedItemCssClass: especifica a classe css do item selecionado.
separatorCssClass: especifica a classe css que separa os elementos.
itemTemplateParentElementId: este atributo especifica o elemento pai de itemTemplate e separatorTemplate. Dessa forma, os elementos itemTemplate e separatorTemplate podem ser renderizados repetidamente.
OK, vamos usar um exemplo para ilustrar como usar o controle ListView:
Primeiro, escrevemos um Web Service que retorna um DataTable em .NET. Observe que aqui herdaremos da classe base Microsoft.Web.Services.DataService e adicionaremos o atributo DataObjectMethod definido no namespace System.ComponentModel ao método de serviço. No início do método de serviço, usamos System.Threading.Thread.Sleep(2000) para simular um atraso de rede de 2 segundos para que o conteúdo do emptyTemplate possa ser visto.
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
classe pública MyService: Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
DataTable pública GetListData()
{
System.Threading.Thread.Sleep(2000);
DataTable dt = new DataTable("MinhaListaDados");
dt.Columns.Add("Nome", typeof(string));
dt.Columns.Add("E-mail", typeof(string));
DataRow novaRow;
para (int i = 0; i < 5; ++i)
{
novaRow = dt.NewRow();
newRow["Nome"] = string.Format("Dflying {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(novaLinha);
}
retornar dt;
}
}
Em seguida, adicione alguns controles/tags necessários na página ASP.NET: <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- Elemento para myList (contêiner) -->
<div id="minhaLista"></div>
<!-- Elementos de layout -->
<div style="display: nenhum;">
</div>
Na tag acima, adicionamos três tags: um controle ScriptManager obrigatório. Uma div com o id myList é usada para permitir que o Atlas coloque o ListView renderizado aqui. Uma div oculta que define nosso modelo. Os elementos neste div oculto não são visíveis na página e são usados apenas para fornecer ao Atlas os modelos necessários.
Adicionamos o seguinte modelo ListView a esta div oculta:
<!-- Layout Template -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
<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>
<!-- Modelo de item separador -->
<tr id="myList_separatorTemplate">
<td colspan="3">Separador</td>
</tr>
</tbody>
</tabela>
<!-- Modelo vazio -->
<div id="myList_emptyTemplate">
Sem dados
</div>
No código acima você pode ver todos os quatro modelos que mencionei. Especifique também um id para cada modelo, que será usado na declaração do script Atlas abaixo. Neste exemplo irei renderizar esse ListView como uma Tabela HTML, infelizmente os elementos separados ficarão feios (uma linha em branco).
Por fim, adicione a instrução de script Atlas à página:
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<ligações>
<binding dataContext="listDataSource" dataPath="data" 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="texto" />
</ligações>
</label>
</template>
</itemTemplate>
<separadorTemplate>
<template layoutElement="myList_separatorTemplate" />
</separatorTemplate>
<modelo vazio>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Aqui adicionei um objeto DataSource do cliente Atlas para obter dados do Web Service. Não falaremos muito sobre DataSource aqui (pode ser apresentado em artigos subsequentes). Vamos dar uma olhada na definição relacionada a ListView: Na definição de ListView, especificamos o atributo itemTemplateParentElementId. Em seguida, um segmento de ligação é definido dentro do ListView para vincular os dados obtidos do DataSource ao ListView. Também definimos quatro segmentos de modelo, cada um dos quais usa layoutElement para associar aos quatro modelos definidos acima. Observe que para o primeiro controle de rótulo no modelo layoutTemplate, especificamos um transformador Add em sua ligação para alterar a ordem de 0 para 1 (para Atlas Transformer, consulte meu artigo: http://dflying.cnblogs. com/archive/2006/04/05/367908.html ).
Você terminou, vamos executá-lo.