DataKeys

Nas versões anteriores do ASP.NET poderia ser definida na propriedade DataKeyField apenas uma string contendo o nome de uma coluna ou propriedade da fonte de dados para ser a identificação da linha, ou seja, torná-la única dentro do controle DataGrid. Mas, em alguns casos, isso é limitado, pois necessitamos ter mais de uma coluna/propriedade para definir a linha como única, vide chaves compostas. Com esta necessidade o controle GridView possibilita definir um array de strings contendo o nome da colunas ou propriedades que farão parte da identificação da linha.

Esta propriedade é chamada de DataKeyNames. É nela que definimos as colunas/propriedades separadas por uma vírgula. O código HTML da página ASPX que demonstra esta definição é exibido abaixo:

<asp:GridView .... DataKeyNames="ID, AnotherID">        					

E para recuperar os valores destas chaves utilizamos o código abaixo:

DataKey keys = this.GridView1.DataKeys[N];
foreach(DictionaryEntry d in keys.Values){
    Response.Write(d.Key.ToString() + ": " + d.Value.ToString() + "<BR>");
}

* Onde N é um número inteiro que corresponde à coluna que deseja recuperar o(s) valor(es).

Quando utilizamos os métodos de exclusão (Delete) e atualização (Update) necessitamos informar aos mesmos o valor do ID do registro para que eles possam executar corretamente o comando. Há uma propriedade nas classes de DataSource chamada OldValuesParameterFormatString. Esta propriedade armazena, por padrão, a seguinte string: “original_{0}” que, em tempo de execução o ASP.NET define o parâmetro (0 (zero)) com o nome do ID que definiremos na propriedade DataKeyNames do controle GridView. Justamente por isso que não precisamos informar estes parâmetros para o objeto (identificações – ID).

Eventos

GridView.zip (674.49 kb)

A utilização de colunas do tipo Template é freqüentemente utilizada quando as colunas que já existem por padrão no controle GridView não atendem a nossa necessidade. Através delas conseguimos customizar o controle GridView, adicionando um coluna e podendo manipulá-la do jeito desejado para atingir o objetivo.

Podemos formatar, incluir controles, podendo até incluir um outro controle GridView dentro da coluna do tipo TemplateColumn. Para incluir uma TemplateColumn basta adicionar uma nova coluna do tipo TemplateField, conforme é exibido na imagem abaixo:

Com esta coluna adicionada no controle GridView podemos, através da Smart Tag, editar esta coluna e assim customizar de acordo com a necessidade. O cenário que utilizaremos é incluir em cada linha do controle GridView que contém os registros provenientes de uma DataSource adicionando um controle DropDownList com alguns dos estados do Brasil. Vejamos abaixo o passo à passo para realizar esta tarefa:

Quando temos uma coluna do tipo TemplateField no controle GridView, esta por sua vez, tem várias seções, justamente para customizar cada uma delas. A tabela abaixo mostra algumas destas principais seções:

Para o cenário do exemplo deste artigo utilizamos a inserção manual de itens dentro do controle DropDownList, mas é importante salientar que é perfeitamente possível a vinculação deste à um objeto de DataSource. O código HTML da página ASPX resultante desta configuração é exibido abaixo:

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:BoundField DataField="Nome" HeaderText="Nome" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>SP</asp:ListItem>
                    <asp:ListItem>MT</asp:ListItem>
                    <asp:ListItem>RJ</asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Finalmente, depois dessas configurações efetuadas no controle GridView, o resultado do browser é apresentado abaixo:

A quantidade de colunas Templates que podemos ter no controle GridView é indefinida. Apenas devemos utilizá-las quando nenhuma das colunas existentes por padrão no controle GridView não antender as necessidades. Vale lembrar que no ASP.NET 1.x, algumas das colunas, como por exemplo a ImageField e CheckBoxField, era necessário a utilização de colunas Templates, que hoje já não precisamos mais.

GridView.zip (674.49 kb)

O controle GridView disponibiliza também a exclusão de registros dos registros que estão sendo exibidos nele de forma bem simples. Vale lembrar que neste caso, se o controle GridView estiver ligado à algum objeto de DataSource a exclusão já será refletida diretamente em seu repositório.

Nesta seção vamos analisar como efetuar a exclusão de dados utilizando os dois objetos que utilizamos no decorrer deste artigo: SqlDataSource e o ObjectDataSource.

Utilizando o objeto SqlDataSource

Assim como já vimos anteriormente, temos que definir a propriedade SelectCommand através da Smart Tag que irá retornar os dados à serem apresentados no controle GridView. Nesta mesma seção já definimos a propriedade DeleteCommand com o código T-SQL responsável pela exclusão. Para automatizar clique no botão Advanced… e marque a opção “Generate INSERT, UPDATE and DELETE statements“, assim como é mostrado na imagem abaixo:

Depois da propriedade DeleteCommand definida temos, neste momento, que incluir no controle GridView a coluna responsável pela exclusão do registro, ou seja, a inclusão de uma coluna com LinkButtons que executará este processo. A imagem abaixo exibe a inclusão de uma coluna do tipo CommandField para Delete.

Depois destas configurações efetuadas o código HTML da página ASPX resultante é exibido abaixo:

<asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>"
    SelectCommand="SELECT UsuarioID, Nome, Email FROM Usuario"
    DeleteCommand="DELETE FROM Usuario WHERE UsuarioID = @original_UsuarioID">
</asp:SqlDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="UsuarioID"
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:CommandField ShowDeleteButton="True" />
        <asp:BoundField 
            DataField="Nome" 
            HeaderText="Nome" />
        <asp:BoundField 
            DataField="UsuarioID" 
            HeaderText="UsuarioID" 
            ReadOnly="True" />
    </Columns>
</asp:GridView>

Analisando o código acima definimos a query de Delete na propriedade DeleteCommand e assim quando o usuário clicar no botão de exclusão este código T-SQL será executado. Em tempo de execução o ASP.NET define o valor do parâmetro da exclusão “@original_UsuarioID” através das DataKeys (as quais falaremos mais adiante), que neste caso é utilizado a coluna UsuarioID para identificação do registro/linha.

Depois destes passos, o controle GridView é exibido no browser da seguinte forma:

Habilitando a confirmação antes da exclusão

Muitas vezes, antes de efetuarmos definitivamente a exclusão na base de dados, queremos certificar de que o usuário realmente tem certeza de que deseja fazer isso. A solução mais comum neste caso é utilizar Javascript para exibir um aviso questionando o usuário; se ele confirmar, a exclusão é realizada, caso contrário nada acontece.

Primeiramente temos que converter a coluna Delete em Template (não abordaremos isso a fundo agora justamente porque teremos um capítulo específico para explicar esta funcionalidade) como é exibido na imagem abaixo:

Para efetuar esta conversão temos apenas que clicar no link (que está marcado em vermelho) chamado “Convert this field into a TemplateField“. Depois desta conversão realizada temos que criar a função Javascript na página ASPX para ser invocada quando o usuário tentar excluir o registro. O código abaixo é a função Javascript que utilizaremos posteriormente:

    function ConfirmaExclusao(){
        return confirm('Deseja realmente excluir este registro?');
    }

Em seguida temos apenas que vincular esta função Javascript ao controle LinkButton, que é responsável por disparar a rotina de exclusão. Devemos definir a propriedade OnClientClick deste controle com o nome da função Javascript e, para isso, a imagem abaixo exibi-nos como fazer para alcançar esta propriedade de um controle que está contido dentro de uma TemplateColumn do GridView:

Finalmente temos o código HTML da página ASPX gerado por todas essas configurações:

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="UsuarioID"
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:LinkButton 
                    ID="LinkButton1" 
                    runat="server" 
                    CausesValidation="False" 
                    CommandName="Delete"
                    Text="Delete" 
                    OnClientClick="javascript:return ConfirmaExclusao();">
                </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField 
            DataField="Nome" 
            HeaderText="Nome" />
        <asp:BoundField 
            DataField="UsuarioID" 
            HeaderText="UsuarioID" 
            ReadOnly="True" />
    </Columns>
</asp:GridView>

Ao executar a aplicação, o resultado é mostrado como na imagem abaixo:

Utilizando o objeto ObjectDataSource

A utilização do objeto ObjectDataSource é bem semelhante ao que vimos anteriormente com o objeto SqlDataSource. Temos apenas que nos preocupar com a criação de um método na classe de negócios que será responsável pela exclusão do registro. Este método terá apenas um parâmetro que é o ID do registro/linha que queremos excluir. O código deste método é exibido abaixo:

public void Delete(int original_ID)
{
    SqlConnection conn =
        new SqlConnection(
            WebConfigurationManager.ConnectionStrings["ConnString"].ConnectionString);
    SqlCommand cmd =
        new SqlCommand("DELETE FROM Usuario WHERE UsuarioID = @ID", conn);

    cmd.Parameters.AddWithValue("@ID", original_ID);

    try
    {
        conn.Open();
        cmd.ExecuteNonQuery();
    }
    finally
    {
        if (conn != null)
        {
            conn.Close();
        }
    }
}

Se compararmos este código com o código de atualização veremos que é bem semelhante, apenas mudando a query que é executada e a quantidade de parâmetros necessários. Depois deste método criado devemos definir a propriedade DeleteMethod do objeto ObjectDataSource com este método. O código HTML da página ASPX é exibido abaixo:

<asp:ObjectDataSource 
    ID="ObjectDataSource1" 
    runat="server" 
    DeleteMethod="Delete"
    SelectMethod="ResgataUsuarios" 
    TypeName="Usuarios">
</asp:ObjectDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataSourceID="ObjectDataSource1" 
    DataKeyNames="ID">
    <Columns>
        <asp:CommandField ShowDeleteButton="True" />
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Nome" HeaderText="Nome" />
    </Columns>
</asp:GridView>

Com este código já é possível executar a exclusão de registros de uma determinada fonte de dados através de uma classe de regras de negócio. A única observação importante é que aqui também não vemos a seção DeleteParameters com o parâmetro necessário para a exclusão definido. Isso tem a ver com a propriedade DataKeys do controle GridView, a qual vamos abordar mais detalhadamente em capítulos posteriores.

GridView.zip (674.49 kb)

Como não poderia ser diferente, o controle GridView também permite a edição de registros “in-place”, ou seja, no mesmo local que exibimos estes registros podemos editá-los e gravar este novo valor na base de dados (ou qualquer outro repositório) e o mais interessante: sem escrever nenhuma linha de código, ao contrário do controle DataGrid do ASP.NET 1.x.

A facilidade que este controle fornece para criarmos a edição de registros é bastante simples pois, além dos Wizards, temos ainda as Smart Tags que habilitam ao desenvolvedor, através de poucos cliques, deixar isso em funcionamento. Veremos abaixo a forma de como habilitar a edição de registros “in-place” utilizando os objetos SqlDataSource e o ObjectDataSource.

Utilizando o objeto SqlDataSource

Primeiramente devemos definir o objeto SqlDataSource, que será o intermediário entre o controle GridView e a fonte de dados SQL Server. É através dele que vamos configurar as colunas à serem exibidas e editadas no controle GridView. Como já vimos isso nos capítulos anteriores, vamos pular esta parte, mas apenas chamo a atenção para o momento que definir as colunas onde, haverá um botão chamado Advanced… , o qual deveremos clicar. Com isso uma janela será exibida e devemos marcar a opção “Generate INSERT, UPDATE and DELETE statements” que com isso os comandos de Insert, Update e Delete serão automaticamente gerados baseando-se nas colunas que selecionamos no SelectCommand. A imagem abaixo ilustra este processo:

Feito isso temos que vincular esta fonte de dados ao controle GridView através da propriedade DataSourceID. Com este vínculo podemos então definir as colunas que desejamos exibir no controle GridView e, além disso, devemos adicionar uma coluna do tipo CommandField ou apenas marcando a opção Enable Editing na Smart Tag. Através das imagens abaixo vemos estes dois processos respectivamente:

O código HTML gerado com essas configurações na página ASPX está sendo exibido abaixo:

<asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>"
    SelectCommand="SELECT Email, Nome, UsuarioID FROM Usuario"
    UpdateCommand="UPDATE Usuario SET Email = @Email, Nome = @Nome 
        WHERE UsuarioID = @original_UsuarioID">
    <UpdateParameters>
        <asp:Parameter Name="Email" Type="String" />
        <asp:Parameter Name="Nome" Type="String" />
        <asp:Parameter Name="original_UsuarioID" Type="Int32" />
    </UpdateParameters>
</asp:SqlDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="UsuarioID"
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:CommandField 
            ShowEditButton="True" />
        <asp:BoundField 
            DataField="UsuarioID"
            HeaderText="UsuarioID" 
            ReadOnly="True" />
        <asp:BoundField 
            DataField="Email" 
            HeaderText="Email" />
        <asp:BoundField 
            DataField="Nome" 
            HeaderText="Nome" />
    </Columns>
</asp:GridView>

Analisando o código acima vemos o que já descrevemos: a vinculação do objeto de Data Source ao controle GridView. A única propriedade que vemos neste código e que ainda não nos deparamos é a propriedade ReadOnly. Esta é utilizada quando não queremos habilitar um registro que é exibido no controle GridView para edição. Um caso comum é quando temos em nosso GridView o ID ou um código de registro em que não devemos alterá-lo. Ao definí-la para True, a coluna é exibida apenas em forma de Label, mesmo a linha em formato de edição, assim como podemos ver a imagem abaixo:

Observação: A propriedade DataKeyNames, que no caso deste exemplo está definida como UsuarioID, ou seja, é o ID do registro, faz se necessário, pois o ASP.NET utiliza esta propriedade para recuperar o ID do registro corrente que está sendo editado e passa este valor para o parâmetro original_UsuarioID (qual vamos analisá-lo mais adiante, em um artigo posterior) e, conseqüentemente, o comando responsável pela atualização (UpdateCommand) utilizará este valor para persistir as alterações na base de dados.

Utilizando o objeto ObjectDataSource

Como a forma de definirmos as colunas é independente da fonte de dados que estamos utilizando, apenas vamos nos restringir a falar de como configurar os métodos a serem utilizados para este processo, já que o restante é da mesma forma que utilizamos com o objeto SqlDataSource.

Devemos primeiramente criar um método responsável pela atualização dos dados na fonte de dados que, por sua vez, receberá os parâmetros necessários para efetuar tal atualização. No cenário que vamos utilizar, este método receberá três parâmetros: nome, email e ID (identificação do registro como único) e o método se chamará Update. Abaixo é exibido como criar este método na classe de negócios:

public void Update(string nome, string email, int id) {
    SqlConnection conn = new
        SqlConnection(
            WebConfigurationManager.ConnectionStrings["ConnString"].ConnectionString);

    SqlCommand cmd = 
        new SqlCommand("UPDATE Usuario SET Nome = @Nome, Email = @Email 
            WHERE UsuarioID = @ID", conn);

    cmd.Parameters.AddWithValue("@Nome", nome);
    cmd.Parameters.AddWithValue("@Email", email);
    cmd.Parameters.AddWithValue("@ID", id);

    try
    {
        conn.Open();
        cmd.ExecuteNonQuery();
    }
    finally {
        if (conn != null) {
            conn.Close();
        }
    }
}

Analisando o código acima vemos que é criado um objeto que é responsável pela conexão com a fonte de dados e outro objeto em qual definimos a query T-SQL a ser executada (neste caso, uma query de Update). Definidos estes objetos, utilizamos o método AddWithValue da coleção de parâmetros do objeto SqlCommand para adicionarmos os parâmetros necessários para executarmos a query de atualização. Finalmente abrimos a conexão com a fonte de dados, invocamos o método ExecuteNonQuery para executar o comando e posteriormente fechamos a conexão com a fonte de dados.

Depois do método codificado corretamente na classe que contém as regras de negócios devemos então, neste momento, configurar o objeto ObjectDataSource onde, na propriedade UpdateMethod, definiremos este método e seus respectivos parâmetros. O código ASPX abaixo mostra este configuração:

<asp:ObjectDataSource 
    ID="ObjectDataSource1" 
    runat="server" 
    SelectMethod="ResgataUsuarios"
    TypeName="Usuarios" 
    UpdateMethod="Update">
    <UpdateParameters>
        <asp:Parameter Name="nome" Type="String" />
        <asp:Parameter Name="email" Type="String" />
    </UpdateParameters>
</asp:ObjectDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:CommandField ShowEditButton="True" />
        <asp:BoundField 
            DataField="ID" 
            HeaderText="ID" />
        <asp:BoundField 
            DataField="Email" 
            HeaderText="Email" />
        <asp:BoundField 
            DataField="Nome" 
            HeaderText="Nome" />
    </Columns>
</asp:GridView>

Analisando o código superior vemos todos os parâmetros que definimos na assinatura do método Update configurados na seção UpdateParameters que, automaticamente, o ASP.NET define seus valores e invoca o método Update quando o usuário clicar no botão de atualização.

Muitas vezes o método de atualização não espera tipos de dados simples como vimos acima, ou seja, o mesmo receberá ao invés de strings contendo os valores como por exemplo nome, email, etc., ele receberá um objeto complexo do tipo Usuario, que contém suas propriedades. Neste cenário devemos modificar o código do método de atualização para receber este tipo de objeto e também ajustar a propriedade DataObjectTypeName no controle ObjectDataSource que é onde definimos uma string contendo o tipo de objeto que este controle irá trabalhar. Para exemplificar melhor isso, veremos abaixo o código HTML da página ASPX e o método responsável pela atualização, recebendo em seu parâmetro um tipo complexo:

<asp:ObjectDataSource 
    ID="ObjectDataSource1" 
    runat="server" 
    SelectMethod="ResgataUsuarios"
    TypeName="Usuarios" 
    DataObjectTypeName="Usuario" 
    UpdateMethod="Update">
</asp:ObjectDataSource>

public void Update(Usuario u) {
    SqlConnection conn = new
        SqlConnection(
            WebConfigurationManager.ConnectionStrings["ConnString"].ConnectionString);

    SqlCommand cmd = 
        new SqlCommand("UPDATE Usuario SET Nome = @Nome, Email = @Email 
            WHERE UsuarioID = @ID", conn);

    cmd.Parameters.AddWithValue("@Nome", u.Nome);
    cmd.Parameters.AddWithValue("@Email", u.Email);
    cmd.Parameters.AddWithValue("@ID", u.ID);

    try
    {
        conn.Open();
        cmd.ExecuteNonQuery();
    }
    finally {
        if (conn != null) {
            conn.Close();
        }
    }
}

É importante dizer que quando utilizamos o objeto complexo, no caso Usuario, deverá obrigatoriamente ter um construtor público sem parâmetros, as propriedades deverão ser estar definidas como públicas e com o mesmo nome que são passadas para o GridView e, as propriedades devem aceitar leitura e escrita (Get e Set).

GridView.zip (674.49 kb)

Além do controle GridView o ASP.NET 2.0 nos traz um outro grande controle para trabalharmos em conjunto com o GridView: o controle DetailsView. Este, por sua vez, exibe as colunas de um determinado registro/linha do GridView.

Um cenário bastante comum para o uso deste é quando no controle GridView só exibimos algumas colunas da nossa fonte de dados, justamente por questões de limitação no layout. Com isso, o controle DetailsView vem nos auxiliar, onde definimos à ele uma fonte de dados e o mesmo apresentará um determinado registro e suas respectivas colunas, detalhando o registro por completo.

O controle DetailsView também é flexível como o GridView à nível de customização, ou seja, temos a propriedade AutoGenerateRows que automaticamente, gera as linhas de acordo com as colunas que selecionamos na Query T-SQL do objeto SqlDataSource, ou de acordo com as propriedades da coleção em caso de estarmos trabalhando com o objeto ObjectDataSouce. Além desta propriedade ainda temos a Smart Tag semelhante ao controle GridView, mas agora temos a propriedade Edit Fields…, onde podemos customizar as linhas à serem exibidas, definindo os estilos, formatos, etc. A imagem abaixo ilustra a Smart Tag do controle DetailsView:

Para exemplificar o uso do controle DetailsView em conjunto com o GridView teremos o seguinte cenário: no controle GridView listaremos apenas as colunas Nome e Email da fonte de dados e, quando o usuário clicar em algum dos registros que estão dentro do controle GridView, o detalhamento deste registro será exibido no controle DetailsView que estará logo abaixo.

Além de definirmos as colunas à serem exibidas no controle GridView teremos que adicionar um coluna do tipo CommandField com um comando de Select, justamente para quando o usuário clicar neste botão os detalhes do mesmo sejam exibidos no controle DetailsView. A figura abaixo ilustra como adicionar uma coluna deste tipo no controle GridView:

Depois do comando Select já adicionado no controle GridView e as colunas já exibidas no mesmo, adicionamos mais um controle SqlDataSource onde, neste, configuramos para retornar todas as colunas da fonte de dados (inclusive as que não estão visíveis no GridView) e, assim, termos um detalhamento do registro solicitado pelo usuário através do clique no botão Select no GridView. O código abaixo ilustra a configurações desses controles:

<asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>"
    SelectCommand="SELECT UsuarioID, Nome, Email FROM Usuario">
</asp:SqlDataSource>    

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="UsuarioID"
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="Nome" HeaderText="Nome" />
        <asp:BoundField DataField="Email" HeaderText="Email" />
    </Columns>
</asp:GridView>

<asp:SqlDataSource 
    ID="SqlDataSource2" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>" 
    SelectCommand="SELECT Nome, Email, UsuarioID, Endereco, Cidade, Estado FROM Usuario"
    FilterExpression="UsuarioID={0}">
    <FilterParameters>
        <asp:ControlParameter 
            ControlID="GridView1" 
            PropertyName="SelectedValue" 
            Name="UsuarioID" 
            DefaultValue="-1"
            Type="Int32" />
    </FilterParameters>        
</asp:SqlDataSource>

<asp:DetailsView 
    ID="DetailsView1" 
    runat="server" 
    AutoGenerateRows="False" 
    DataSourceID="SqlDataSource2" 
    Height="50px" 
    Width="125px">
    <Fields>
        <asp:BoundField 
            DataField="Nome" 
            HeaderText="Nome" />
        <asp:BoundField 
            DataField="Email" 
            HeaderText="Email" />
        <asp:BoundField 
            DataField="UsuarioID" 
            HeaderText="UsuarioID" 
            InsertVisible="False"
            ReadOnly="True" />
        <asp:BoundField
            DataField="Endereco" 
            HeaderText="Endereco" />
        <asp:BoundField 
            DataField="Cidade" 
            HeaderText="Cidade" />
        <asp:BoundField 
            DataField="Estado" 
            HeaderText="Estado" />
    </Fields>
</asp:DetailsView>

Analisando o código acima vemos algo bem semelhante ao que vimos nos capítulos anteriores onde abordamos a configuração do objeto SqlDataSource no controle GridView. Vemos no controle GridView GridView1 uma coluna do tipo CommandField que define a propriedade ShowSelectButton como True. Vendo um pouco mais abaixo temos mais um objeto do tipo SqlDataSource que define em sua propriedade SelectCommand uma query T-SQL que retorna as colunas (propriedades no caso de um objeto do tipo ObjectDataSource) da fonte de dados para termos o detalhamento de um determinado registro.

Existe uma propriedade no objeto SqlDataSource chamada FilterExpression onde definimos um critério para ser aplicado no SelectCommand e assim filtrarmos o resultado. Até então apenas criamos o critério para efetuar o filtro, tendo agora que definir um valor para ele. Para isso temos uma seção no objeto SqlDataSource chamada FilterParameters e, utilizando um parâmetro do tipo ControlParameter, recuperamos o valor selecionado pelo usuário no comando Select do GridView e passamos para o objeto SqlDataSource SqlDataSource2 para efetuar o filtro e popular o controle DetailsView logo abaixo.

Ainda explorando o ControlParameter definimos como a propriedade ID o ID do controle GridView, que é justamente onde o usuário clicará para obter o detalhamento do registro. Já na propriedade PropertyName definimos o valor “SelectedValue” que corresponde a propriedade SelectedValue do controle GridView, e retorna o valor do registro selecionado pelo usuário. Como já vimos, a propriedade Name é responsável por armazenar o nome do parâmetro (que neste caso é definido na propriedade FilterExpression) e, finalmente, a propriedade DefaultValue onde informamos um valor padrão para quando não tivermos um registro selecionado no controle GridView (Exemplo: Load da página.).

A imagem abaixo exibe os controles já em funcionamento:

Observação: Apesar dos exemplos deste artigo serem voltados para o objeto SqlDataSource, a configuração para o objeto ObjectDataSource é da mesma forma onde, ao invés de definirmos a propriedade SelectCommand, temos que definir o método de seleção através da propriedade SelectMethod do objeto ObjectDataSource.

GridView.zip (674.49 kb)

Há ocasiões onde na aplicação precisamos exibir na tela uma listagem de registros que contenham uma coluna que é uma imagem. Anteriormente tínhamos que criar uma coluna do tipo TemplateColumn e colocar dentro desta um controle Image para ser possível apresentá-la.

Agora com o controle GridView, as coisas ficaram mais fáceis, pois foi acrescentado à este controle um tipo de coluna específico para imagens, chamada ImageField. É através desta que informamos a coluna/propriedade da fonte de dados que contém o path/nome da imagem à ser exibida ao usuário.

Esse tipo de coluna possui duas propriedades principais, que já vimos na seção Tipos de Colunas e que também estão listadas abaixo:

Para exibirmos as imagem no controle GridView basta incluirmos uma coluna do tipo ImageField no mesmo e configurar as propriedades acima. O código HTML na página ASPX abaixo ilustra essa coluna já configurada:

<asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>"
    SelectCommand="SELECT [Nome], [Foto] FROM [Usuario]">
</asp:SqlDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    DataSourceID="SqlDataSource1" 
    AutoGenerateColumns="False" 
    DataKeyNames="UsuarioID">
    <Columns>
        <asp:ImageField 
            DataImageUrlField="Foto" 
            DataImageUrlFormatString="~/Images/{0}">
        </asp:ImageField>
    </Columns>
</asp:GridView>

Quando a página é renderizada, o ASP.NET automaticamente substitui o {0} pelo nome da imagem, que está definida na propriedade DataImageUrlField. A imagem abaixo exibe o controle GridView sendo exibido com as imagens de cada registro:

Há situações onde na base de dados não temos o nome/path da imagem, mas sim uma coluna do tipo binária que armazena a imagem em si. Neste caso o ideal é criarmos uma classe que implementa a interface IHttpHandler, que processa individualmente uma URL (extensão do arquivo solicitado) da aplicação. Como isso foge do escopo deste artigo, deixo aqui apenas uma referência à um artigo do Dino Esposito onde ele explica detalhadamente este processo.

Quando utilizamos este Handler para gerar a imagem, a configuração da propriedade DataImageUrlFormatString do controle GridView muda, ou seja, devemos ali definir o nome do arquivo que será responsável por processar e exibir o conteúdo binário da base de dados. Abaixo é apresentado o controle GridView configurado para utilizar este Handler:

<asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>"
    SelectCommand="SELECT [Nome], [Foto] FROM [Usuario]">
</asp:SqlDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:BoundField 
            DataField="Nome" 
            HeaderText="Nome" />
        <asp:ImageField 
            DataImageUrlField="ID" 
            DataImageUrlFormatString="ViewImage.ashx?Image={0}"
            HeaderText="Imagem">
        </asp:ImageField>
    </Columns>
</asp:GridView>

A extensão *.ashx é denominada como um WebHandler, que é também um novo recurso do ASP.NET 2.0. Este nada mais é que uma classe que implementa a Interface IHttpHandler para poder customizar uma requisição de acordo com a nossa necessidade, mas com uma grande vantagem: não há necessidade de mapear uma determinada extensão de arquivo para o aspnet_isapi.dll dentro do IIS como era feito antes, pois o WebHandler já está devidamente registrado. No exemplo acima é passado para o WebHandler o ID do registro à ser recuperado e, conseqüentemente, resgatamos a coluna binária da tabela e exibimos ao usuário.

GridView.zip (674.49 kb)

Há casos onde necessitamos somar o valor de uma determinada coluna do controle GridView de uma aplicação ASP.NET, onde é exibido ao usuário um valor total/soma para conferência no final desta coluna. Para isso utilizaremos um GridView onde será exibido o conteúdo de uma coluna da Base de Dados e a sua somatória.

A solução para isso é utilizar o evento RowDataBound do controle GridView, evento qual é disparado a cada linha que está sendo criada pelo controle. Antes de mais nada, depois de criado o GridView no WebForm, devemos habilitar o mesmo para exibir a seção Footer, marcando a propriedade Show Footer através da janela de propriedades do controle.

Depois destes passos devemos criar no CodeBehind um membro do tipo Decimal chamado _valorTotal, que será responsável por armazenar a soma do valor de cada registro no evento RowDataBound. Abaixo o código do evento RowDataBound que ilustrará o processo de contabilização:

private decimal _valorTotal;

...

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
        this._valorTotal +=
            ((DbDataRecord)e.Row.DataItem).GetDecimal(0);
    else if (e.Row.RowType == DataControlRowType.Footer)
        e.Row.Cells[0].Text = "Total: " + this._valorTotal.ToString("C2");
}

Analisando o código acima podemos ver que é utilizada uma condicional para verificar qual o tipo da linha/seção. Se ela for um tipo DataRow sabemos que é uma linha de exibição de dados normal e sendo assim, apenas atribuímos o valor para o membro _valorTotal. Agora se a linha for do tipo Footer devemos exibir a soma desta coluna para o usuário. Como nesse ponto já passamos por todos os registros da página corrente do GridView, nos resta apenas atribuir o valor do membro _valorTotal na seção Footer do GridView.

Para exibir o valor ao usuário definimos o membro _valorTotal à célula 0 (zero) da seção Footer do controle GridView. Para uma melhor visualização é interessante definir a propriedade HorizontalAlign para Right da coluna que deseja somar pois, assim, os valores ficam alinhados à direita, o que é padrão em valores numéricos.

Observação: O objeto GridViewRowEventArgs que vem como parâmetro no evento RowDataBound contém as informações completas da linha em questão, ou seja, como este evento é disparado a cada linha que é criada dentro do controle GridView, ele nos fornece informações como o tipo da linha, os valores provenientes da fonte de dados que serão exibidos, os controles filhos de cada linha, entre diversas outras propriedades.

A imagem abaixo exibe o controle GridView já com a coluna sumarizada e o valor desta soma sendo exibido na seção Footer do mesmo:

GridView.zip (674.49 kb)