3. Use o componente Repetidor para exibir o conjunto de dados
Introdução relacionada
Existem várias maneiras de exibir dados em ASP.NET, entre as quais o Repeater é outro componente existente. O DataGrid sempre exibirá os dados em uma "tabela". Quando quisermos exibir os dados de uma forma mais livre, com certeza usaremos o controle Repeater.
Ele define o formato de saída dos dados na forma de Template.
ETAPA 1. Crie uma página Podemos criar um componente Repetidor para exibir dados alterando a página original. Renomeie Location1.htm para Location1.aspx. Exclua a parte original da página e crie um Dataset como no capítulo anterior, filtrando Region_IDEnterValue=1. Vamos usar o controle Repeater para criar páginas dinâmicas.
jPara usar modelos para definir o formato de saída, primeiro crie uma tabela. Podemos ver isso através da página ApplicationàDatabases
A estrutura do banco de dados.
[Figura 3-1 Estrutura do banco de dados]
Com base na estrutura do banco de dados, projete as tabelas a seguir.
[Figura 3-2 Diagrama de modelo]
kOs dados precisam estar vinculados à tabela abaixo. Arraste o item de dados de Ligações no painel Aplicativo para sua posição.
[Figura 3-3 Caixa de diálogo Vinculação]
Após a vinculação de dados, você obtém a seguinte página:
[Figura 3-4 Página após vinculação de dados]
Parece um déjà vu, já que o Dreamwaver MX continua a tradição do UltraDev de destacar dados. ③ O formulário de representação de dados também pode ser selecionado na caixa de diálogo Vinculação. Depois de clicar no item de dados na página, o formulário de representação de dados pode ser selecionado para os dados correspondentes na Vinculação.
[Figura 3-5 Formulário de representação de dados]
Se quiser usar esta tabela como modelo para exibir todos os itens de dados, você precisará selecionar toda esta tabela. Clique em "+" no item Server Behaviors no painel Application e selecione o item Repeat Region
[Figura 3-6 Selecionar região de repetição] [Figura 3-7 Selecionar método de repetição]
Determine o método que deseja repetir em Repetir região e clique em OK. Agora você pode pressionar “F12” para visualizar a página.
PASSO 2 Analise o código (Nota: Para exibir o código, todos os códigos a seguir possuem espaços após "<" e antes de ">". Pedimos desculpas pelo transtorno!)
<ASP:Repetidor runat="servidor" DataSource='< %# DataSet1.DefaultView % >' >
<ItemTemplate>
< largura da tabela = "75%" borda = "0" >
<tr>
< td width="18%" >Nome do local</td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Container) % > </ /td >
< /tr>
<tr>
< td >Cidade< /td >
< td width="35%" > < %# DataSet1.FieldValue("CIDADE", Container) % > </ /td >
<td width="19%" >Endereço< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /tr>
<tr>
< td >Estado</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Contêiner) % > < /td >
< td >Código< /td >
< td > < %# DataSet1.FieldValue("CÓDIGO", Contêiner) % > < /td >
< /tr>
<tr>
<td >Telefone</td >
< td > < %# DataSet1.FieldValue("TELEFONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr>
< /tabela>
</ItemTemplate>
</ASP:Repetidor>
ASP.net exibe todos os dados repetidamente criando um modelo ItemTemple, portanto, se você deseja definir o estilo Repetidor, pode fazê-lo definindo o modelo.
Também podemos adicionar outros modelos para obter o efeito desejado.
AlternatingItemTemplate: implementa dados de exibição cruzada. Dados de exibição cruzada com o modelo do ItemTemplate original
SepartorTemplate: modelo separador. Pode ser usado para separar linhas de dados.
HeaderTemplate: modelo de cabeçalho. Mostrado na parte superior com todos os dados.
FooterTemplate: modelo de rodapé. Mostrado na parte inferior com todos os dados.
Seu formato de design é igual ao ItemTemplate. Basta cercar a parte que você deseja modelar com marcadores.
Existem atalhos para inserir código através do Dreamwaver MX. Clique na guia ASP.NET do painel Inserir e clique em marca, a caixa de diálogo de adição de marca aparecerá. Selecione o projeto Templates em Tags ASP.NET. Você pode então selecionar o código que deseja adicionar. O Dreamwaver MX adicionará o código na posição onde estava o cursor de entrada original.
[Figura 2-1 Caixa de diálogo Adicionar marcador]
A seguir está o código para AlternatingItemTemplate, SepartorTemplate, HeaderTemplate e FooterTemplate, que pode ser inserido em < ASP:Repeater > < /ASP:Repeater >.
< headertemplate >< font color="#666666" size="4" >Todos
Localização< /font >< /headertemplate >
<AlternatingItemTemplate>
< largura da tabela = "75%" border = "0" bgcolor = "#CCCCCC" >
<tr>
< td width="17%" >Nome do local</td >
<td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Contêiner) % >
</ /td >
< /tr>
<tr>
< td >Cidade< /td >
< td width="34%" > < %# DataSet1.FieldValue("CIDADE", Container) % > </ /td >
<td width="24%" >Endereço< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /tr>
<tr>
<td >Estado</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Contêiner) % > < /td >
< td >Código< /td >
< td > < %# DataSet1.FieldValue("CÓDIGO", Contêiner) % > < /td >
< /tr>
<tr>
<td >Telefone</td >
< td > < %# DataSet1.FieldValue("TELEFONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr>
< /tabela>
< /AlternatingItemTemplate >
< separatortemplate >< hr width="70%" align="left" >
</separatortemplate>
< footertemplate >< font color="#666666" size="4" >Fim< /font >< /footertemplate >
Quando o IIS analisa o código, ele coloca o modelo na posição relativa com base nas palavras-chave e obtém a página solicitada originalmente.
A página gerada pelo programa acima é a seguinte:
[Figura 2-1 Página final]
O componente Repetidor pode criar uma página mais livre, mas cada linha pode exibir apenas um conjunto de dados. Se você deseja criar uma página mais livre, vamos para a próxima seção e usar o controle DataList para exibir os dados.