Adicionando uma coluna GridView de caixas de seleção (C#)

Este tutorial analisa como adicionar uma coluna de caixas de seleção a um controle GridView para fornecer ao usuário uma maneira intuitiva de selecionar várias linhas do GridView.

Introdução

No tutorial anterior, examinamos como adicionar uma coluna de botões de opção ao GridView com a finalidade de selecionar um registro específico. Uma coluna de botões de rádio é uma interface de utilizador apropriada quando o utilizador está limitado a escolher no máximo um item do quadro. Às vezes, no entanto, podemos querer permitir que o usuário escolha um número arbitrário de itens da grade. Os clientes de e-mail baseados na Web, por exemplo, normalmente exibem a lista de mensagens com uma coluna de caixas de seleção. O usuário pode selecionar um número arbitrário de mensagens e, em seguida, executar alguma ação, como mover os e-mails para outra pasta ou excluí-los.

Neste tutorial, veremos como adicionar uma coluna de caixas de seleção e como determinar quais caixas de seleção foram marcadas no postback. Em particular, criaremos um exemplo que imita de perto a interface do usuário do cliente de e-mail baseado na Web. Nosso exemplo incluirá um GridView paginado listando os produtos na tabela do banco de dados Products com uma caixa de seleção em cada linha (veja a Figura 1). Um botão Excluir produtos selecionados, quando clicado, excluirá os produtos selecionados.

Figura 1: Cada linha de produto inclui uma caixa de seleção (Clique para visualizar a imagem em tamanho real)

Etapa 1: Adicionando um GridView paginado que lista informações do produto

Antes de nos preocuparmos em adicionar uma coluna de caixas de seleção, vamos primeiro nos concentrar em listar os produtos em um GridView que ofereça suporte à paginação. Comece abrindo a página CheckBoxField.aspx na pasta EnhancedGridView e arraste um GridView da Caixa de Ferramentas para o Designer, definindo seu ID como Products. Em seguida, escolha vincular o GridView a um novo ObjectDataSource chamado ProductsDataSource. Configure o ObjectDataSource para usar a ProductsBLL classe, chamando o GetProducts() método para retornar os dados. Como este GridView será somente leitura, configure as listas suspensas nas guias UPDATE, INSERT e DELETE como (Nenhuma).

Figura 2: Criar um novo ObjectDataSource nomeado ProductsDataSource (Clique para visualizar a imagem em tamanho real)

Figura 3: Configurar o ObjectDataSource para recuperar dados usando o método (GetProducts() imagem em tamanho real)

Figura 4: Defina as listas de Drop-Down nas guias UPDATE, INSERT e DELETE como (Nenhuma) (Clique para visualizar a imagem em tamanho real)

Depois de concluir o assistente Configurar Fonte de Dados, o Visual Studio criará automaticamente BoundColumns e uma CheckBoxColumn para os campos de dados relacionados ao produto. Como fizemos no tutorial anterior, remova todos, exceto o ProductName, CategoryNamee UnitPrice BoundFields, e altere as HeaderText propriedades para Produto, Categoria e Preço. Configure o UnitPrice BoundField para que seu valor seja formatado como uma moeda. Configure também o GridView para suportar paginação marcando a caixa de seleção Ativar paginação da etiqueta inteligente.

Vamos também adicionar a interface de utilizador para eliminar os produtos selecionados. Adicione um controlo Web de botão sob o GridView, definindo a sua propriedade ID para DeleteSelectedProducts e a sua propriedade Text para Delete Selected Products. Em vez de realmente excluir produtos do banco de dados, para este exemplo, exibiremos apenas uma mensagem informando os produtos que teriam sido excluídos. Para acomodar isso, adicione um controle Web Label abaixo do botão. Defina seu ID como DeleteResults, limpe sua Text propriedade e defina suas Visible e EnableViewState propriedades como false.

Depois de fazer essas alterações, a marcação declarativa de GridView, ObjectDataSource, Button e Label deve ser semelhante à seguinte:

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

Reserve um momento para visualizar a página em um navegador (veja a Figura 5). Neste ponto, você deve ver o nome, categoria e preço dos primeiros dez produtos.

Figura 5: O nome, a categoria e o preço dos dez primeiros produtos estão listados (Clique para visualizar a imagem em tamanho real)

Etapa 2: Adicionando uma coluna de caixas de seleção

Como ASP.NET 2.0 inclui um CheckBoxField, pode-se pensar que ele poderia ser usado para adicionar uma coluna de caixas de seleção a um GridView. Infelizmente, esse não é o caso, pois o CheckBoxField foi projetado para trabalhar com um campo de dados booleano. Ou seja, para usar o CheckBoxField, devemos especificar o campo de dados subjacente cujo valor é consultado para determinar se a caixa de seleção renderizada está marcada. Não podemos usar o CheckBoxField para incluir apenas uma coluna de caixas de seleção desmarcadas.

Em vez disso, devemos adicionar um TemplateField e inserir um controlo web CheckBox no seu ItemTemplate. Vá em frente e adicione um TemplateField ao Products GridView e torne-o o primeiro campo (à esquerda). Na etiqueta inteligente do GridView, clique no link Editar Templates e arraste um controle Web CheckBox da Caixa de Ferramentas para o ItemTemplate. Defina esta propriedade CheckBox s ID como ProductSelector.

Figura 6: Adicionar um controle Web CheckBox nomeado ProductSelector ao TemplateField s ItemTemplate (Clique para visualizar a imagem em tamanho real)

Com o controle Web TemplateField e CheckBox adicionado, cada linha agora inclui uma caixa de seleção. A Figura 7 mostra essa página, quando visualizada através de um navegador, depois que o TemplateField e o CheckBox foram adicionados.

Figura 7: Cada linha de produto agora inclui uma caixa de seleção (Clique para visualizar a imagem em tamanho real)

Etapa 3: Determinando quais caixas de seleção foram marcadas no Postback

Neste ponto, temos uma coluna de caixas de seleção, mas não há como determinar quais caixas de seleção foram marcadas no postback. Quando o botão Excluir produtos selecionados é clicado, no entanto, precisamos saber quais caixas de seleção foram marcadas para excluir esses produtos.

A propriedade GridView s Rows fornece acesso às linhas de dados no GridView. Podemos iterar através dessas linhas, acessar programaticamente o controle CheckBox e, em seguida, consultar sua Checked propriedade para determinar se a CheckBox foi selecionada.

Crie um manipulador de eventos para o DeleteSelectedProducts evento Button Web control s Click e adicione o seguinte código:

protected void DeleteSelectedProducts_Click(object sender, EventArgs e)
{
    bool atLeastOneRowDeleted = false;
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null && cb.Checked)
        {
            // Delete row! (Well, not really...)
            atLeastOneRowDeleted = true;
            // First, get the ProductID for the selected row
            int productID = 
                Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);
            // "Delete" the row
            DeleteResults.Text += string.Format(
                "This would have deleted ProductID {0}<br />", productID);
        }
    }
    // Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted;
}

A Rows propriedade retorna uma coleção de instâncias que compõem as linhas de GridViewRow dados de GridView. O foreach loop aqui enumera essa coleção. Para cada GridViewRow objeto, a linha s CheckBox é acessada programaticamente usando row.FindControl("controlID"). Se a CheckBox estiver marcada, o valor da linha correspondente ProductID será recuperado da coleção DataKeys. Neste exercício, exibimos apenas uma mensagem informativa na DeleteResults Label, embora em uma aplicação funcional pudéssemos, em vez disso, fazer uma chamada ao método ProductsBLL da classe DeleteProduct(productID).

Com a adição desse manipulador de eventos, clicar no botão Eliminar Produtos Selecionados passa a exibir os ProductID dos produtos selecionados.

Figura 8: Quando o botão Excluir produtos selecionados é clicado, os produtos ProductID selecionados são listados (Clique para visualizar a imagem em tamanho real)

Etapa 4: Adicionando botões Selecionar Tudo e Desmarcar Tudo

Se um usuário quiser excluir todos os produtos na página atual, ele deve marcar cada uma das dez caixas de seleção. Podemos ajudar a agilizar esse processo adicionando um botão Verificar tudo que, quando clicado, seleciona todas as caixas de seleção na grade. Um botão Desmarcar tudo seria igualmente útil.

Adicione dois controles Web Button à página, colocando-os acima do GridView. Defina o primeiro s ID para CheckAll e sua propriedade Text para Selecionar Tudo; e o segundo s ID para UncheckAll e sua propriedade Text para Desmarcar Tudo.

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

Em seguida, crie um método na classe code-behind chamada ToggleCheckState(checkState) que, quando invocada, enumera a coleção de Products do GridView Rows e define cada propriedade de CheckBox Checked como o valor do parâmetro checkState passado.

private void ToggleCheckState(bool checkState)
{
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null)
            cb.Checked = checkState;
    }
}

Em seguida, crie manipuladores de eventos para os botões Click e CheckAll. No manipulador de eventos CheckAll, basta chamar ToggleCheckState(true); no UncheckAll, chame ToggleCheckState(false).

protected void CheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(true);
}
protected void UncheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(false);
}

Com este código, clicar no botão Verificar Tudo causa um postback e seleciona todas as caixas de verificação no GridView. Da mesma forma, clicar em Desmarcar tudo desmarca todas as caixas de seleção. A Figura 9 mostra a tela após a verificação do botão Verificar tudo.

Figura 9: Clicar no botão Verificar tudo seleciona todas as caixas de seleção (Clique para visualizar a imagem em tamanho real)

Observação

Ao exibir uma coluna de caixas de seleção, uma abordagem para selecionar ou desmarcar todas as caixas de seleção é por meio de uma caixa de seleção na linha de cabeçalho. Além disso, a implementação atual de Selecionar Tudo / Desselecionar Tudo requer um retorno de dados ao servidor. As caixas de seleção podem ser marcadas ou desmarcadas, no entanto, inteiramente através do script do lado do cliente, proporcionando assim uma experiência de usuário mais rápida. Para explorar em detalhe o uso de uma caixa de seleção na linha de cabeçalho para Marcar tudo e Desmarcar tudo, juntamente com uma discussão sobre o uso de técnicas do lado do cliente, confira Marcar todas as caixas de seleção em um GridView usando script Client-Side e uma caixa de seleção Marcar tudo.

Resumo

Nos casos em que você precisa permitir que os usuários escolham um número arbitrário de linhas de um GridView antes de continuar, adicionar uma coluna de caixas de seleção é uma opção. Como vimos neste tutorial, incluir uma coluna de caixas de seleção no GridView implica adicionar um TemplateField com um controle Web CheckBox. Ao utilizar controlos Web (em vez de injetar marcação diretamente no modelo, como fizemos no tutorial anterior), o ASP.NET lembra automaticamente quais caixas de seleção estavam e não estavam marcadas durante o postback. Também podemos acessar programaticamente as CheckBoxes no código para determinar se uma determinada CheckBox está marcada ou para alterar o estado marcado.

Este tutorial e o último analisaram a adição de uma coluna seletora de linha ao GridView. Em nosso próximo tutorial, examinaremos como, com um pouco de trabalho, podemos adicionar recursos de inserção ao GridView.

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.

Anterior Próximo

Comentários

Esta página foi útil?

Last updated on 2025-04-30