GridView Parte I

Visual Studio .NET 2005

Olá pessoal, meu nome é Mauricio Junior. Mostrarei como desenvolver e usar esse grande componente do Visual Studio.NET 2005 chamado GridView. Voltando um pouco a história, no ASP 3.0 nenhum componente existia antes para melhorar o nível de codificação ou a velocidade de desenvolvimento, já no Visual Studio.NET 2003 surgiu um componente chamado DataGrid que revolucionou o mercado dos desenvolvedores. Na prática, esse componente acaba virando uma <table> com vários <tr> e <td>.

Antes de continuar segue uma frase criptografada, se você conseguir decifrar poderá ganhar um livro.

Nf nboeb f-nbjm dpn p bttvoup hboifj p mjxsp.

Com o novo lançamento do Visual Studio, foi lançado um novo componente junto da IDE. Vou dizer que é parente do DataGrid porque é bem parecido em relação ao desenvolvimento. Possibilita as grandes artimanhas para o programador.

Existem várias formas ou para ser mais exato duas formas fáceis e rápidas para preencher um GridView: uma é usando o visual e outra usando o código mesmo. Não irei mostrar nada pelo visual, sinceramente não gosto programar usando apenas o visual; gosto de saber o que está acontecendo no código mesmo. Se você quiser usar o visual, existem artigos pela internet que podem mostrar como utilizar.

Referência: 1.1 GridView

Como posso notar, os componentes estão todos no toolbox igual ao VS 2003, porém agora organizados por funcionalidades e funções. O que está circulado de vermelho mostra todos os componentes de DATA. O GridView está selecionado de azul e está ao lado direito da tela.

Mostrarei como editar, deletar dados e preencher grid. Em relação à conexão com o banco de dados, conexão e select não será mostrada porque uso um framework de dados que fiz.

Depois que coloquei o componente na tela, irei preenchê-lo.

Fui ao banco de dados e trouxe uma lista de dados chamada dataset.

Para entender, criei uma outra classe responsável para ir ao banco de dados, ou seja, uma outra camada que é responsável apenas para acessar os dados e trazê-los.

Código HTML do GridView.

GridView

Id = gdBancoServidor

HTML do GridView

<asp:GridView ID="gdBancoServidor" runat="server" CellPadding="4" AutoGenerateColumns="False" Width="70%" AllowPaging="True"

GridLines="None"

OnRowEditing="gdBancoServidor_RowEditing"

OnRowCancelingEdit="gdBancoServidor_RowCancelingEdit"

OnRowUpdating="gdBancoServidor_RowUpdating"

DataKeyNames="IdCooperativa"

OnRowDeleting="gdBancoServidor_RowDeleting">

<asp:TemplateField ShowHeader="false">

<asp:Label Visible="false" ID="lblIdCooperativa" runat="server">

<%# DataBinder.Eval(Container.DataItem, "IdCooperativa")%>

</asp:Label>

</ItemTemplate>

<asp:TextBox Visible="false" ID="txtIdCooperativa" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "IdCooperativa") %>'>

</asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="NR COOP">

<asp:Label ID="lblNumCooperativa" runat="server">

<%# DataBinder.Eval(Container.DataItem, "NumCooperativa")%>

</asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtNumCooperativa" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "NumCooperativa") %>'>

</asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="BANCO DE DADOS">

<asp:Label ID="lblInitialCatalog" runat="server">

<%# DataBinder.Eval(Container.DataItem, "InitialCatalog") %>

</asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtInitialCatalog" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "InitialCatalog") %>'>

</asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField ShowHeader="true" HeaderText="SERVIDOR">

<asp:Label ID="lblDataSource" runat="server">

<%# DataBinder.Eval(Container.DataItem, "DATASOURCE") %>

</asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtDataSource" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "DATASOURCE") %>'>

</asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField ShowHeader="true" HeaderText="AMBIENTE">

<asp:Label ID="lblIdAmbiente" runat="server">

<%# DataBinder.Eval(Container.DataItem, "IdAmbiente") %>

</asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtIdAmbiente" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "IdAmbiente") %>'>

</asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:CommandField ButtonType="Button" CancelText="C" DeleteText="D" EditText="E" HeaderText="AÇÃO"

InsertVisible="False" ShowDeleteButton="true" ShowEditButton="True" UpdateText="A" />

</Columns>

</asp:GridView>

Referência: 1.2 GridView

A referência 1.2 GridView é bem particular porque o mesmo mostra apenas os campos do meu bando de dados. Serve como exemplo onde você possa seguir e desenvolver o seu.

Código Behing

No próximo passo é preencher o grid utilizando o código C#.NET.

No método Load coloquei o seguinte código: (Referência 1.3 GridView)

if (!Page.IsPostBack)

{

PreencheGridView();

}

Referência: 1.3 GridView

Logo depois criei o método da referência 1.3 GridView.

/// <summary>

/// Método que preenche o grid view

/// </summary>

private void PreencheGridView()

{

//instanciando método dentro da página.

//camada de cima.

ConfigurarConexao config = new ConfigurarConexao();

this.gdBancoServidor.DataSource = config.SelecionarConfiguracaoOffLine();

this.gdBancoServidor.DataBind();

}

Referência: 1.4 GridView

Explicação:

É simples, fácil e prático. Chamei o método SelecionarConfiguracaoOffLine() que é responsável para trazer os dados como DataSet. Depois de pegar os dados e vincular ao DataSource do GridView, só chamar o DataBind(). Não é diferente do componente DataGrid do VS 2003.

O método SelecionarConfiguracaoOffLine() faz o seguinte: Conecta no banco de dados, faz o select na tabela de dados e retorna os campos que irei preencher no GridView como DataSet, apenas isso.

Executei o código e mesmo foi preenchido automaticamente. (Referência 1.5 GridView)