DreamwaverMX e ASP.NET(4)
Autor：Eve Cole
Data da Última Atualização：2009-05-31 21:06:17
4. Use o componente DataList para exibir o conjunto de dados
Introdução relacionada:
DataList é um controle repetidor aprimorado. Além das funções originais do repetidor, ele também pode definir o número de dados exibidos em uma única linha (RepeatColumn), o modelo selecionado (SelectedItemTemple) e o modelo de item editado (EditTemplate). No entanto, DataList organizará os dados de saída em uma tabela e os produzirá, enquanto o Repeater é mais fiel à definição do modelo e não adicionará nenhuma tag HTML. (Nota: Para exibir o código, todos os códigos a seguir possuem espaços após "<" e antes de ">". Pedimos desculpas pelo transtorno!)
PASSO 1Criar página
A página que queremos criar é mostrada abaixo. Ao clicarmos no hiperlink de Detalhe, aparecerão as informações detalhadas, conforme mostrado no primeiro item. Ao clicar em Fechar, os detalhes serão fechados e restaurados à sua aparência original.
[Figura 1-1 Demonstração da página]
Comece selecionando os dados que deseja exibir. Para exibir os dados da Europa (ou seja, Region_ID=3), podemos optar por filtrar os dados de Region_ID=3 nas configurações do conjunto de dados.
[Figura 1-2 Triagem de dados]
Use o controle Datalist para criar uma página que exiba dados brevemente. Vamos primeiro criar uma página sem dados. Em seguida, selecione Comportamento do servidor no painel Aplicativo. Clique em "+" e selecione DataList.
[Figura 1-3 Página de seleção DataList]
Na caixa de diálogo exibida, podemos adicionar modelos de página quando necessário.
u Cabeçalho: modelo de cabeçalho
u Item: modelo de item de dados
u Item alternado: modelo de exibição cruzada
u Editar Item: Modifique o modelo ((não exibido por padrão, deve ser exibido através da resposta do evento)
u Item selecionado: o modelo exibido após a seleção (também deve ser exibido por meio da resposta do evento)
u Separador: modelo separado
u Rodapé: modelo de fundo de mesa
[Figura 1-4 Caixa de diálogo Editar DataList]
Podemos criar o modelo necessário adicionando código HTML ao Conteúdo e também podemos clicar
botão para adicionar itens de dados. Após clicar no botão, a caixa de diálogo do item de dados aparecerá permitindo que você selecione os dados necessários. E adicione-o na caixa de entrada Conteúdo
< %# DataBinder.Eval(Container.DataItem, "item de dados") % >
O código é usado para exibir os dados.
[Figura 1-5 Adicionando itens de dados]
Para obter o efeito de visualização, primeiro adicione o código: Nome do local ao cabeçalho. Usado para exibir o título. Adicione o código ao item:
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >, use Location_name como o título de cada item.
Adicionar código ao item alternativo
< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >
Exiba dados em diferentes cores de fonte.
Embora o Item Selecionado não possa ser exibido imediatamente, devemos também anotar o código para chamada posterior. do seguinte modo:
Endereço:
< %# DataSet1.FieldValue("ADDRESS", Contêiner) % >
<BR>
Cidade:
< %# DataSet1.FieldValue("CIDADE", Contêiner) % >
<BR>
Telefone:
< %# DataSet1.FieldValue("TELEFONE", Container) % >
<BR>
Clique em OK e visualize a página. A imagem abaixo é o efeito do código acima. Implementaremos o efeito de exibição do Item Selecionado em instantes.
[Figura 1-6 visualização inicial]
Uma diferença entre DataList e Repeater é que você pode definir uma única linha para exibir vários dados, que podem ser definidos na janela de edição do DataList.
[Figura 1-7 Configure uma única linha para exibir vários dados]
Selecionar a opção Usar quebras de linha simplesmente possui uma tag <BR> para separar os dados. Selecione Usar uma tabela para gerar a saída em formato de tabela e você pode determinar o número de dados exibidos em uma única linha definindo Colunas da tabela.
PASSO 2 Escrever código
O Item Selecionado precisa ser exibido através de eventos, então precisamos criar um botão para iniciar o evento.
j Adicione LinkButton para gerar eventos. Mova o cursor entre <ItemTemplate> e </ItemTemplate> na janela do código-fonte, clique em mais tags
, selecione o controle asp:LinkButton na caixa de diálogo pop-up.
[Figura 2-1 Caixa de diálogo Seletor de tags]
Na caixa de diálogo Editar LinkButton, defina as propriedades do LinkButton. Insira o nome:Detalhe na caixa de entrada de ID.
Insira "Detalhe" no Nome do Comando que gera o evento e insira Detalhe na caixa de diálogo Texto (será exibida)
[Figura 2-2 Caixa de edição do LinkButton]
Em seguida, selecione a cor desejada no Layout e clique em OK para gerar o código.
< asp:LinkButton BackColor="#FFFFFF" CommandName="Detalhe" ForeColor="#000000" ID="Detalhe" runat="servidor" Text="Detalhe" >< /asp:LinkButton >
Para ter esse efeito na exibição cruzada, precisamos inserir o mesmo código em <AlternatingItemTemplate> e </AlternatingItemTemplate>.
Ao mesmo tempo, para fechar o modelo de seleção pop-up, também é necessário gerar um comando, portanto, é necessário adicionar mais um Linkbutton. Isso requer a inserção de código em <SelectedItemTemplate></SelectedItemTemplate>:
< asp:LinkButton BackColor="#FFFFFF" CommandName="Fechar" ForeColor="#000000" ID="Fechar" runat="servidor" Text="Fechar" >< /asp:LinkButton >
kCom o comando, também precisamos usar um programa para interpretar o comando. Na verdade, o processo não é complicado e apenas uma pequena quantidade de código precisa ser adicionada. Adicione o seguinte código em < head </ /head >:
<linguagem de script="VB" runat="servidor" >
Sub DataList_ItemCommand (remetente como objeto, e como DataListCommandEventArgs)
Se e.CommandSource.CommandName = "Detalhe" então
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Fechar" Then
DataList1.SelectedIndex=-1
Terminar se
DataList1.DataBind()
Terminar sub
</ /script>
O programa pode obter o comando (CommandName) quando você clica no LinkButton para determinar o programa a ser executado. Quando a propriedade SelectedIndex do DataList for definida como e.Item.ItemIndex, a página SelectedItemTemplate será aberta. Se o comando for Close e a propriedade SelectedIndex do DataList estiver definida como -1 (ou seja, nenhum item de dados for selecionado), o DataList usará o modelo de item ItemTemplate para exibir esse item de dados.
Adicione também o trecho de código em < asp:DataList >
OnItemCommand="DataList_ItemCommand"
Para declarar o relacionamento com o segmento do programa DataList_ItemCommand.
Pressione “F12” para visualizar e a página exibirá o efeito esperado.
[Figura 2-3 Versão de visualização final]
Em anexo está o código-fonte do segmento principal do programa:
Sub DataList_ItemCommand (remetente como objeto, e como DataListCommandEventArgs)
Se e.CommandSource.CommandName = "Detalhe" então
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Fechar" Then
DataList1.SelectedIndex=-1
Terminar se
DataList1.DataBind()
Terminar sub
<form runat="servidor" >
<asp:DataList id="DataList1"
runat = "servidor"
RepetirColunas="1"
RepeatDirection = "Vertical"
RepeatLayout="Fluxo"
DataSource="< %# DataSet1.DefaultView % >"
OnItemCommand="DataList_ItemCommand" >
<HeaderTemplate>
Nome do local < /HeaderTemplate >
<ItemTemplate>
< %# DataSet1.FieldValue("LOCATION_NAME", Contêiner) % >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detalhe" ForeColor="#000000" ID="Detalhe" runat="servidor" Text="Detalhe" >< /asp:linkbutton >
</ItemTemplate>
< AlternatingItemTemplate >< font color="#0000FF" >
< %# DataSet1.FieldValue("LOCATION_NAME", Contêiner) % >
< /fonte >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >
<SelectedItemTemplate>Endereço:
< %# DataSet1.FieldValue("ADDRESS", Contêiner) % >
<BR>
Cidade:
< %# DataSet1.FieldValue("CIDADE", Contêiner) % >
<BR>
Telefone:
< %# DataSet1.FieldValue("TELEFONE", Container) % >
<BR>
< asp:LinkButton BackColor="#FFFFFF" CommandName="Fechar" ForeColor="#000000" ID="Fechar" runat="servidor" Text="Fechar" >< /asp:LinkButton >
< /SelectedItemTemplate >
</asp:DataList>
</form>
DataList também possui um modelo para Editar Item, que é usado principalmente para atualizações de dados. Este livro será apresentado em uma seção posterior.
