ASP .NET - Adicionando valores de TextBox em um GridView com jQuery
 No artigo de hoje vou mostrar como podemos adicionar valores a partir do controle TextBox em um GridView usando jQuery.

Eu já escrevi muitos artigos sobre o controle GridView em aplicações ASP .NET e se você esta começando agora sugiro que leia os meus artigos nas referências para saber mais sobre o GridView.

Existem muitas formas de extrais dados de uma fonte de dados e vincular esses dados em um controle GridView, uma das mais simples é usar um controle de acesso a dados.

Podemos visualizar os principais controles de acesso a dados a partir da ToolBox do Visual Studio :

  • EntityDataSource
  • LinqDataSource
  • ObjectDataSource
  • SiteMapDataSource
  • SqlDataSource
  • XmlDataSource

Cada um deles tem um propósito específico e serve para acessar um fonte de dados e neste artigo eu vou usar o SqlDataSource para acessar uma fonte de dados e exibir no GridView.

A seguir vou mostrar como podemos incluir valores no GridView a partir de controles TextBox usando jQuery.

 

Vamos lá...

 

 

Este é um artigo para iniciantes que desejam aprender uma técnica básica para incluir valores a partir de TextBox no controle GridView.

É uma técnica simples e útil que pode ser usada em aplicações pessoais ou de pequeno porte em um pequeno negócio que esta usando uma aplicação ASP .NET.

Recursos usados

Definindo a fonte de dados

Você pode usar qualquer banco de dados SQL Server ou qualquer outra fonte de dados mas nesse artigo eu vou usar o banco de dados Cadastro.mdf e a tabela Contatos.

Abaixo temos a estrutura da tabela e o script para gerá-la no SQL Server Management Studio:

USE [Cadastro]
GO
CREATE TABLE [dbo].[Contatos](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Nome] [nvarchar](100) NULL,
	[Email] [nvarchar](150) NULL,
	[Sexo] [nchar](10) NULL,
 CONSTRAINT [PK_Contatos] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

 

A string de conexão usada para esse banco de dados é : Data Source=.\sqlexpress;Initial Catalog=Cadastro;Integrated Security=True

Criando o projeto ASP .NET no VS Community

Abra o VS Community 2015  e clique em New Project;

A seguir selecione Visual C# ->  ASP .NET Web Application

Informe o nome AdicionarValores_GridView e clique no botão OK;

Selecione o template Empty e marque Web Forms;

A seguir no menu Project clique em Add New Item e selecione o template Web Form informando o nome Default.aspx:

Agora vamos incluir os seguintes controles a partir da ToolBox na página Default.aspx no modo Design:

A seguir vamos configurar o SqlDataSource para acessar a tabela Contatos do banco de dados Cadastro.mdf.

Selecione o SqlDataSource e clique no link Configure Data Source;

Selecione a conexão com o banco de dados Cadastro.mdf e clique em Next>:

Selecione a tabela Contatos e marque os campos que deseja exibir no gridview e clique em Next>:

Finalmente selecione o gridview e em Choose Data Source selecione o SqlDataSource1 que representa a nossa fonte de dados:

Vamos agora incluir 3 Labels e 3 TextBox logo abaixo no controle GridView conforme o leiaute da figura abaixo:

A seguir temos o código gerado no code-behind:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AdicionarValores_GridView.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Adicinando valores no gridview com jQuery</title>
</head>
<body>
    <form id="form1" runat="server">
    <h2>Macoratti .net - Adicionando valores com jQuery</h2>
    <hr />
    <div>
     <asp:GridView ID="gdvAlunos" runat="server" AllowPaging="True" AutoGenerateColumns="False" 
DataKeyNames="Id" DataSourceID="SqlDataSource1" Height="82px" Width="377px" CssClass = "grid" >
         <Columns>
             <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
             <asp:BoundField DataField="Nome" HeaderText="Nome" SortExpression="Nome" />
             <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
             <asp:BoundField DataField="Sexo" HeaderText="Sexo" SortExpression="Sexo" />
         </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:CadastroConnectionString %>" 
            SelectCommand="SELECT [Id], [Nome], [Email], [Sexo] FROM [Contatos]">
        </asp:SqlDataSource>
       <div id="divContainer">
            <ul>
                <li><label>Nome : </label></li><li><input type="text" id="tbNome" /></li>
            </ul>
            <ul>
                <li><label>Email: </label></li><li><input type="text" id="tbEmail" /></li>
            </ul>
            <ul>
                <li><label>Sexo : </label></li><li><input type="text" id="tbSexo" /></li>
            </ul>
            <ul>
                <li> </li><li><input type="button" id="btnAdicionar" value="Adicionar Aluno" /></li>
            </ul>
         </div>
     </div>
    </form>
</body>
</html>

Podemos melhorar a aparência do Grid aplicando um estilo e para fazer isso inclua o código a seguir entre as tags <head> da página e vamos também incluir a referência a biblioteca do Jquery que iremos usar:

Obs: Veja ao lado o resultado obtido:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style>
        div {
            font:13px Verdana; 
            width:500px; 
        }
        .grid {
            width:100%; 
            font:inherit; 
            background-color:#FFF; 
            border:solid 1px #525252;
        }
        .grid td {
            font:inherit; 
            padding:2px; 
            border:solid 1px #C1C1C1; 
            color:#333; 
            text-align:center; 
            text-transform:uppercase;
        }
        .grid th  {
            padding:3px; 
            color:#FFF; 
            background:#424242 url(grd.png) repeat-x top; 
            border-left:solid 1px #525252; 
            font:inherit; 
            text-align:center; 
            text-transform:uppercase;
        }
        ul {
            padding:0; 
            margin:2px 5px; 
            list-style:none; 
            border:0; 
            float:left; 
            width:70%;
        }
        li {
            width:50%; 
            float:left; 
            display:inline-block; 
        }
    </style>

Observe que eu estou usando a distribuição CDN do Google para o jQuery.

CDN - Content Distribuition Network - isto é, um outro website hospeda o arquivo jQuery e envia para qualquer pessoa que o solicite. Há alguns benefícios nessa abordagem: Primeiro, você pode economizar alguns milissegundos do seu servidor web deixando o Google, Microsoft, ou o jQuery distribuir o arquivo para os visitantes do seu site.

Além disso, a distribuição CDN têm o benefício adicional de possuir servidores localizados ao redor do globo. Então, se alguém no Japão visita seu site, ele vai receber o arquivo jQuery de um servidor que esta provavelmente muito mais próximo dele do que o seu servidor web , o que significa que ele vai ter o arquivo mais rápido e seu site vai aparecer que é mais rápido.

Assim, como outros designers usam essas distribuições CDNs , há uma boa chance de que alguém que visitar o seu site já tenha o arquivo jQuery salvo no cache do seu navegador. Desde que ele já tenha baixado o arquivo jQuery através do Google durante uma visita a outro site, ele não precisa fazer o download novamente ao visitar o seu site, resultando em um aumento de velocidade considerável.

Definindo o código jQuery

Vamos agora definir o código jQuery na página Default.aspx para realizar a inclusão dos valores nos TextBox para o GridView:

 <script>
       $(document).ready(function () {
        $('#btnAdicionar').click(function () {
            var contaLinha;
            contaLinha = $('#gdvAlunos tr').length;         // CONTA A LINHA
            // ADICIONA VALORES DO TEXTBOX NO GRIDVIEW.
            if ($('#tbNome').val() != '' && $('#gdvAlunos tr').length > 1) {
                $('#gdvAlunos tr:last').after('<tr><td>' + contaLinha + '</td>' +
                    '<td>' + $('#tbNome').val() + '</td>' +
                    '<td>' + $('#tbEmail').val() + '</td>' +
                    '<td>' + $('#tbSexo').val() + '</td>' + '</tr>');
                // LIMPA AS TEXTBOXES.
                $('#divContainer').find('input:text').each(
                    function () {
                        $('input:text[id=' + $(this).attr('id') + ']').val('');
                    }
                );
            }
            else alert('Invalido!');
        });
     });
</script>

Você pode incluir o código acima entre as tags <head> ou depois da tag <body>.

Vamos entender o código :

Este código possui 3 seções que serão executadas quando o usuário clicar no botão - Adicionar Aluno (btnAdicionar).

Na primeira parte nós obtemos o número total de linhas do GridView , usando o método length() da jQuery, o que nos irá fornecer o último ID do aluno listado no controle.

Depois podemos salvar os dados no banco de dados usando este ID.

Na segunda parte nós obtemos os valores a partir de cada TextBox e adicionamos no GridView.

Quando o gridview é renderizado ele produz uma estrutura semelhante a uma tabela gerando elementos tr e td que usamos no código juntamente com os IDs dos controles TextBox

Finalmente limpamos o conteúdo dos TextBox usando os métodos find() e each() da jQuery.

Executando o projeto e incluindo um valor teremos o seguinte resultado:

Pegue o projeto completo aqui :   AdicionarValores_GridView.zip (sem as referências)

(Orou Jesus assim...) "E a vida eterna é esta: que te conheçam, a ti só, por único Deus verdadeiro, e a Jesus Cristo, a quem enviaste."
João 17:3

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 ?

     Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti