Botões personalizados na DataList e no repetidor (C#)

por Scott Mitchell

Descarregar PDF

Neste tutorial, vamos construir uma interface que usa um repetidor para listar as categorias no sistema, com cada categoria fornecendo um botão para mostrar seus produtos associados usando um controle BulletedList.

Introdução

Ao longo dos últimos dezessete tutoriais DataList e Repeater, criamos exemplos somente leitura e exemplos de edição e exclusão. Para facilitar os recursos de edição e exclusão dentro de um DataList, adicionámos botões no DataList ItemTemplate que, ao serem clicados, causavam um postback e geravam um evento DataList correspondente à propriedade do botão CommandName. Por exemplo, adicionar um botão ao ItemTemplate com a propriedade CommandName com valor Edit faz com que o EditCommand do DataList seja acionado no postback; um com o valor Delete gera o CommandName.

Além dos botões Edit e Delete, os controles DataList e Repeater também podem incluir Buttons, LinkButtons ou ImageButtons que, quando clicados, executam alguma lógica personalizada do lado do servidor. Neste tutorial, vamos construir uma interface que usa um repetidor para listar as categorias no sistema. Para cada categoria, o Repeater incluirá um botão para mostrar os produtos associados à categoria usando um controle BulletedList (consulte a Figura 1).

Figura 1: Clicar no link Mostrar produtos exibe os produtos da categoria em uma lista com marcadores (Clique para visualizar a imagem em tamanho real)

Etapa 1: Adicionando as páginas da Web do tutorial do botão personalizado

Antes de analisarmos como adicionar um botão personalizado, vamos primeiro reservar um momento para criar as páginas ASP.NET em nosso projeto de site que precisaremos para este tutorial. Comece adicionando uma nova pasta chamada CustomButtonsDataListRepeater. Em seguida, adicione as duas páginas ASP.NET a seguir a essa pasta, certificando-se de associar cada página à Site.master página mestra:

• Default.aspx
• CustomButtons.aspx

Figura 2: Adicionar as Páginas ASP.NET para os Tutoriais Personalizados Buttons-Related

Como nas outras pastas, Default.aspx na CustomButtonsDataListRepeater pasta irá listar os tutoriais em sua seção. Lembre-se de que o SectionLevelTutorialListing.ascx Controle de Usuário fornece essa funcionalidade. Adicione este Controle de Utilizador a Default.aspx arrastando-o do Gerenciador de Soluções para a vista de Design da página.

Figura 3: Adicionar o controle de usuário a SectionLevelTutorialListing.ascx (Default.aspx imagem em tamanho real)

Por fim, adicione as páginas como entradas ao Web.sitemap arquivo. Especificamente, adicione a seguinte marcação após a paginação e classificação com o DataList e o repetidor <siteMapNode>:

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</siteMapNode>

Após a atualização Web.sitemap, reserve um momento para visualizar o site de tutoriais através de um navegador. O menu à esquerda agora inclui itens para os tutoriais de edição, inserção e exclusão.

Figura 4: O mapa do site agora inclui a entrada para o tutorial de botões personalizados

Etapa 2: Adicionando a lista de categorias

Para este tutorial, precisamos criar um repetidor que lista todas as categorias, juntamente com um Show Products LinkButton que, quando clicado, exibe os produtos de categoria associados em uma lista com marcadores. Vamos primeiro criar um repetidor simples que lista as categorias no sistema. Comece por abrir a página CustomButtons.aspx na pasta CustomButtonsDataListRepeater. Arraste um Repetidor da Caixa de Ferramentas para o Designer e defina a sua ID propriedade para Categories. Em seguida, crie um novo controlo de fonte de dados a partir da tag inteligente do Repeater. Especificamente, crie um novo controlo ObjectDataSource chamado CategoriesDataSource que selecione os seus dados através do método CategoriesBLL da classe GetCategories().

Figura 5: Configurar o ObjectDataSource para usar o método Class s CategoriesBLL (GetCategories() imagem em tamanho real)

Ao contrário do controle DataList, para o qual o Visual Studio cria um padrão ItemTemplate com base na fonte de dados, os modelos do repetidor devem ser definidos manualmente. Além disso, os modelos do Repetidor devem ser criados e editados declarativamente (ou seja, não há nenhuma opção Editar Modelos na marca inteligente do Repetidor).

Clique na guia Fonte no canto inferior esquerdo e adicione uma ItemTemplate que exiba o nome da categoria em um <h3> elemento e sua descrição em uma tag de parágrafo, inclua uma SeparatorTemplate que exiba uma regra horizontal (<hr />) entre cada categoria. Adicione também um LinkButton com sua Text propriedade definida como Mostrar produtos. Depois de concluir essas etapas, a marcação declarativa da página deve ter a seguinte aparência:

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

A Figura 6 mostra a página quando visualizada através de um navegador. O nome e a descrição de cada categoria são listados. O botão Mostrar produtos, quando clicado, causa um postback, mas ainda não executa nenhuma ação.

Figura 6: O nome e a descrição de cada categoria são exibidos, juntamente com um botão Mostrar link de produtos (Clique para visualizar a imagem em tamanho real)

Etapa 3: Executando Server-Side lógica quando o botão Mostrar produtos LinkButton é clicado

Sempre que um Button, LinkButton ou ImageButton dentro de um modelo em um DataList ou Repeater é clicado, um postback ocorre e o evento DataList ou Repeater é ItemCommand acionado. Além do ItemCommand evento, o controle DataList também pode gerar outro evento mais específico se a propriedade button s CommandName estiver definida como uma das cadeias de caracteres reservadas ( Delete, Edit, Cancel, Update ou Select ), mas o ItemCommand evento é sempre acionado.

Quando um botão é clicado dentro de um DataList ou Repeater, muitas vezes precisamos indicar qual botão foi clicado (no caso de haver vários botões dentro dos controles DataList ou Repeater, por exemplo, botões Editar e Excluir) e talvez algumas informações adicionais (como o valor da chave primária do item cujo botão foi clicado). O Button, LinkButton e ImageButton fornecem duas propriedades cujos valores são passados para o manipulador de ItemCommand eventos:

• CommandName uma cadeia de caracteres normalmente usada para identificar cada botão no modelo
• CommandArgument comumente usado para manter o valor de alguns campos de dados, como o valor da chave primária

Neste exemplo, defina a propriedade LinkButton s CommandName como ShowProducts e associe o valor CategoryID da chave primária do registro atual à CommandArgument propriedade usando a sintaxe CategoryArgument='<%# Eval("CategoryID") %>'de vinculação de dados. Depois de especificar essas duas propriedades, a sintaxe declarativa de LinkButton deve ter a seguinte aparência:

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Quando o botão é clicado, ocorre um postback e o evento do DataList ou Repeater dispara ItemCommand. No manipulador de eventos são passados os valores dos botões CommandName e CommandArgument.

Crie um manipulador de eventos para o evento Repeater s ItemCommand e observe o segundo parâmetro passado para o manipulador de eventos (chamado e). Este segundo parâmetro é do tipo RepeaterCommandEventArgs e tem as seguintes quatro propriedades:

• CommandArgument O valor da propriedade do botão clicado CommandArgument
• CommandNameO valor da propriedade dos botões CommandName
• CommandSource Uma referência ao controlador do botão que foi clicado
• Item uma referência ao RepeaterItem que contém o botão que foi clicado, cada registro vinculado ao repetidor é manifestado como um RepeaterItem

Como a categoria selecionada s CategoryID é passada através da CommandArgument propriedade, podemos obter o conjunto de produtos associados à categoria selecionada no ItemCommand manipulador de eventos. Esses produtos podem então ser vinculados a um controle BulletedList no ItemTemplate (que ainda temos que adicionar). Tudo o que resta, então, é adicionar o BulletedList, referenciá-lo no manipulador de eventos ItemCommand, e vincular a ele o conjunto de produtos para a categoria selecionada, que abordaremos na Etapa 4.

Observação

O manipulador de eventos DataList s ItemCommand é passado um objeto do tipo DataListCommandEventArgs, que oferece as mesmas quatro propriedades que a RepeaterCommandEventArgs classe.

Etapa 4: Exibindo os produtos da categoria selecionada em uma lista com marcadores

Os produtos da categoria selecionada s podem ser exibidos dentro do repetidor s ItemTemplate usando qualquer número de controles. Poderíamos adicionar outro repetidor aninhado, um DataList, um DropDownList, um GridView e assim por diante. Queremos exibir os produtos como uma lista com marcadores; portanto, usaremos o controlo BulletedList. Voltando à marcação declarativa da página CustomButtons.aspx, após o Botão de Link Show Products, adicione um controlador BulletedList ao ItemTemplate. Defina o BulletedLists s ID como ProductsInCategory. O BulletedList exibe o valor do campo de dados especificado através da propriedade DataTextField; como este controlo terá informações do produto ligadas a ele, defina a propriedade DataTextField para ProductName.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

No manipulador de eventos, faça referência a este controlo usando ItemCommand e vincule-o ao conjunto de produtos associados à categoria selecionada.

protected void Categories_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ShowProducts")
    {
        // Determine the CategoryID
        int categoryID = Convert.ToInt32(e.CommandArgument);
        // Get the associated products from the ProudctsBLL and bind
        // them to the BulletedList
        BulletedList products =
            (BulletedList)e.Item.FindControl("ProductsInCategory");
        ProductsBLL productsAPI = new ProductsBLL();
        products.DataSource =
            productsAPI.GetProductsByCategoryID(categoryID);
        products.DataBind());
    }
}

Antes de executar qualquer ação no ItemCommand manipulador de eventos, é prudente verificar primeiro o valor do CommandName recebido. Como o ItemCommand manipulador de eventos é acionado quando qualquer botão é clicado, se houver vários botões no modelo, use o CommandName valor para discernir qual ação executar. Verificar o CommandName aqui é discutível, já que só temos um único botão, mas é um bom hábito formar. Em seguida, a CategoryID da categoria selecionada é recuperada da propriedade CommandArgument. O controlo BulletedList no modelo é então referenciado e vinculado aos resultados do método da ProductsBLL classe GetProductsByCategoryID(categoryID).

Em tutoriais anteriores que usavam os botões dentro de uma DataList, como An Overview of Editing and Delete Data in the DataList, determinamos o valor da chave primária de um determinado item por meio da DataKeys coleção. Embora essa abordagem funcione bem com o DataList, o repetidor não tem uma DataKeys propriedade. Em vez disso, devemos usar uma abordagem alternativa para fornecer o valor da chave primária, como por meio da propriedade de CommandArgument do botão ou atribuindo o valor da chave primária a um controlo Web de rótulo oculto dentro do modelo e lendo novamente o seu valor no manipulador de eventos ItemCommand usando e.Item.FindControl("LabelID").

Depois de concluir o manipulador de ItemCommand eventos, reserve um momento para testar esta página em um navegador. Como mostra a Figura 7, clicar no link Mostrar produtos causa um postback e exibe os produtos para a categoria selecionada em uma BulletedList. Além disso, observe que estas informações sobre o produto permanecem, mesmo que a ligação Mostrar Produtos de outras categorias seja clicada.

Observação

Se você quiser modificar o comportamento desse relatório, de modo que os produtos de apenas uma categoria sejam listados de cada vez, basta definir a propriedade s EnableViewState do controle BulletedList como False.

Figura 7: Um BulletedList é usado para exibir os produtos da categoria selecionada (Clique para visualizar a imagem em tamanho real)

Resumo

Os controles DataList e Repeater podem incluir qualquer número de Buttons, LinkButtons ou ImageButtons em seus modelos. Tais botões, quando clicados, causam um postback e desencadeiam o ItemCommand evento. Para associar uma ação personalizada do lado do servidor a um botão que está sendo clicado, crie um manipulador de eventos para o ItemCommand evento. Neste manipulador de eventos, primeiro verifique o valor de entrada CommandName para determinar qual botão foi clicado. Informações adicionais podem ser fornecidas opcionalmente através da propriedade do botão CommandArgument.

Feliz Programação!

Sobre o Autor

Scott Mitchell, autor de sete livros sobre ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, formador e escritor independente. Seu último livro é Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Ele pode ser contatado em mitchell@4GuysFromRolla.com.

Um agradecimento especial a

Esta série de tutoriais foi revisada por muitos revisores úteis. O revisor principal deste tutorial foi Dennis Patterson. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

Próximo