ASP.NET Web Forms - Usando o Controle GridView

Nota: Este artigo mostra como usar o controle GridView na versão 2.0 do .NET Framework mas é compatível com as demais versões do Visual Studio. A única alteração fica por conta da string de conexão que deve ser ajustada para usar o SQL Server LocalDb ou a instância local do seu SQL Server. Para mais artigos sobre ASP .NET veja a seção do site:  Seção ASP .NET do Site Macoratti .net

Nunca foi tão fácil trabalhar com controles de exibição e acesso a fonte de dados como na verão 2.0 do ASP.NET.

Para acompanhar este artigo faça o download do Visual Web Developer (VWD) - Visual Web Developer 2005 Express Edition . (Você pode usar as versões do VS 2013 e VS 2015 Community)

Abra o VWD e crie um novo projeto dando o nome de gridview2.aspx a página padrão do site.

Vamos supor que você quer exibir em um grid os dados de uma fonte de dados.

Ao abrir a página criada no VWD teremos o seguinte :

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Usando GridVew</title>

</head>

<body>

<form id="form1" runat="server">

<div>

  ...........................<===== Código vai ser incluído aqui

</div>

</form>

</body>

</html>

 

Vamos incluir a seguinte linha de código que define a utilização do gridview entre as tags <div></div>.

<asp:GridView id="MyGridView" DataSourceID="MyDataSource1" Runat="Server"/>

A seguir basta definirmos a fonte de dados indicando a string de conexão e os dados que desejamos obter com a seguinte linha de código:

<asp:SqlDataSource ID="MyDataSource1" runat="server"
   ConnectionString="sua string de conexão"
   ProviderName="System.Data.SqlClient"
   SelectCommand="SELECT [Lista de campos a exibir] FROM [Nome da tabela]">
</asp:SqlDataSource>

Suponha que a fonte de dados seja um banco de dados MSDE ;  que tal o famoso Northwind ?  e a tabela a tabela Categories. Basta fazer o seguinte ajuste, incluindo as linhas de código na sequência:

Nota: Estou usando a string de conexão com o MSDE instalado em minha maquina.(Use a string de conexão válida para o seu ambiente).
Para saber como tratar o MSDE veja o artigo: VB.NET - Preenchendo controles via MSDE.

<asp:SqlDataSource ID="MyDataSource1" runat="server"

      ConnectionString="Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=Northwind;User ID=sa;password=;_

                                   Data Source=MACORATI\VSDOTNET"

       ProviderName="System.data.SqlClient"

       SelectCommand="SELECT * from Categories">

</asp:SqlDataSource>

 

Nota :  Você também pode usar as seguintes opções de string de conexão:

1- Banco de dados SQL Server anexado : "Data Source=.\\SQLEXPRESS;AttachDbFilename=C:\\dados\\NORTHWND.MDF;Integrated Security=True; Connect Timeout=30;User Instance=True";

2- Banco de dados SQL Server na sua instância local : "Data Source=.\sqlexpress;Initial Catalog=Northwind;Integrated Security=SSPI"

 

E esta pronto ! basta executar a página no servidor do VWD e ela será exibida conforme abaixo:

Se deseja efetuar a paginação e permitir a ordenação por colunas basta incluir os seguintes comandos na tag do GridView: AllowSorting="True" e AllowPaging="True"

A tag completa ficaria assim definida:

<asp:GridView id="MyGridView" DataSourceID="MyDataSource1" AllowSorting="True" AllowPaging="True" Runat="Server" />

Para podermos visualizar o efeito vamos alterar também a propriedade SelectCommand  conforme abaixo:

SelectCommand="SELECT ProductId, ProductName, UnitPrice From Products"

A tag completa com as alterações proposta ficou assim :

<asp:SqlDataSource ID="MyDataSource1" runat="server"

      ConnectionString="Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=Northwind;User ID=sa;password=;_

                                   Data Source=MACORATI\VSDOTNET"

       ProviderName="System.data.SqlClient"

       SelectCommand="SELECT ProductId, ProductName, UnitPrice From Products">

</asp:SqlDataSource>

O resultado da execução mostra a página já com as opções para paginação e os links ativos para ordenação por coluna:

Quer permitir a atualização e a edição dos dados do grid ? Para isto você tem fazer o seguinte :

  1. Incluir um UpdateCommand para DataSource existente da mesma forma que você definiu o SelectCommand

    UpdateCommand="Update Products Set [ProductName]=@ProductName, [UnitPrice]=@UnitPrice Where [ProductId]=@ProductId"

  1. Incluir duas propriedades no GridView:  

A tag completa ficaria assim definida:

<div>

<asp:GridView id="MyGridView" DataSourceID="MyDataSource1"

    AllowSorting="True" AllowPaging="True"

    DataKeyNames="ProductID"

    AutoGenerateEditButton="True"

Runat="Server"/>


<asp:SqlDataSource ID="MyDataSource1" runat="server"

   ConnectionString="Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=Northwind;User ID=sa;password=;Data Source=MACORATI\VSDOTNET"

   ProviderName="System.Data.SqlClient"

   SelectCommand="SELECT ProductId, ProductName, UnitPrice From Products"

   UpdateCommand="Update Products Set [ProductName]=@ProductName, [UnitPrice]=@UnitPrice Where [ProductId]=@ProductId">

</asp:SqlDataSource>

</div>

Observe que a UpdateCommand foi definido com uma instrução SQL Update/Set usando a cláusula Where e a chave primária ProductId.

O resultado da execução da página seria o seguinte :

Note que a coluna ProductID não permite a edição pois não pode ser alterada devido ser a chave primária definida.

Esta faltando a opção de exclusão dos registros não é mesmo ? Para implementá-la basta definir a propriedade DeleteCommand do componente DataSource na tag SqlDataSource. Para isto defina a seguinte linha de código :

DeleteCommand="Delete From Products Where [ProductId]=@ProductId">

e na tag do GridView defina a propriedade : AutoGenerateDeleteButton="True"

A tag completa ficou assim :

<asp:SqlDataSource ID="MyDataSource1" runat="server"

ConnectionString="Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=Northwind;User ID=sa;password=;Data Source=MACORATI\VSDOTNET"

   ProviderName="System.Data.SqlClient"

   SelectCommand="SELECT ProductId, ProductName, UnitPrice From Products"

   UpdateCommand="Update Products Set [ProductName]=@ProductName, [UnitPrice]=@UnitPrice Where [ProductId]=@ProductId"

    DeleteCommand="Delete From Products Where [ProductId]=@ProductId">

</asp:SqlDataSource>

 

O resultado obtido na execução da página será:

 

Viu como foi simples criar um Grid para exibir dados de um banco de dados com recurso de visualização, edição, alteração e exclusão de dados ?

O código completo da página ficou assim :

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Usando DataGridView</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:GridView id="MyGridView" DataSourceID="MyDataSource1" 
                   AllowSorting="True" AllowPaging="True" 
                   DataKeyNames="ProductID" 
                   AutoGenerateEditButton="True" 
                   AutoGenerateDeleteButton="True"
                   Runat="Server"/>
                   
     <asp:SqlDataSource ID="MyDataSource1" runat="server" 
       ConnectionString="Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=Northwind;User ID=sa;password=;_
Data Source=MACORATI\VSDOTNET" 
        ProviderName="System.Data.SqlClient"  
        SelectCommand="SELECT ProductId, ProductName, UnitPrice From Products" 
        UpdateCommand="Update Products Set [ProductName]=@ProductName, [UnitPrice]=@UnitPrice Where [ProductId]=@ProductId"
        DeleteCommand="Delete From Products Where [ProductId]=@ProductId">
     </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

 

Existem muitos outros recursos que podem ser explorados , mas o objetivo do artigo foi mostrar que os componente GridView e SqlDataSource não são componentes visuais e não são renderizados no servidor permitindo que você altere suas propriedades via código.

 Aguarde mais artigos sobre as novas características da ASP.NET 2.0.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?


  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

 

Referências:

José Carlos Macoratti