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)