ASP .NET - Atualizando dados com LINQ e Ajax (C#)

.NET - Gerenciando informações com LINQ to SQL e Ajax

Neste artigo vou mostrar como podemos atualizar uma base de dados SQL Server usando o LINQ to SQL com Ajax em uma aplicação ASP .NET Web Forms usando a linguagem C#.

O LINQ to SQL é uma implementação específica da LINQ para o SQL Server que converte consultas escritas em C# ou Visual Basic em SQL dinâmico , provendo uma interface que permite mapear os objetos do banco de dados gerando as classes para realizar as operações usando a sintaxe LINQ; também permite realizar alterações nos objetos e atualizar o banco de dados.

Para usar o LINQ To SQL em suas aplicações basta incluir uma referência usando o template LINQ To SQL classes. Fazendo isso você terá acesso ao Descritor Objeto Relacional ou Object Relational Designer (O/R Designer).

O Descritor Objeto Relacional - Object Relational Designer (O/R Designer) - fornece uma interface visual para criar e editar classes LINQ to SQL, as classes das entidades são baseadas em objetos do banco de dados.

O descritor O/R é usado para criar um modelo de objetos na aplicação que efetua o mapeamento para os objetos do banco de dados gerando um DataContext fortemente tipado que é usado para enviar e receber dados entre as classes das entidades e o banco de dados; além disso o descritor O/R também permite efetuar o mapeamento de stored procedures e funções para o métodos do DataContext com o intuito de retornar e popular as classes das entidades provendo ainda a habilidade de desenhar relacionamentos herdados entre as classes das entidades.

A classe DataContext é uma classe LINQ to SQL que atua como uma ponte entre o banco de dados SQL Server e as classes das entidades LINQ To SQL mapeadas para o banco de dados. Ela contém a informação e os métodos para efetuar a conexão com o banco de dados e manipular os dados.

Essa classe possui diversos métodos que você pode chamar, como o método SubmitChanges que envia as atualizações das classes LINQ To SQL para o banco de dados.

Além disso você pode criar métodos adicionais na classe DataContext para mapear stored procedures e funções de forma que executando os métodos criados as stored procedures e as funções que foram mapeadas pela classe DataContext serão executadas.

Vamos criar uma aplicação ASP .NET Web Forms, um banco de dados SQL Server e uma tabela, e, usando o LINQ to SQL, mapear os objetos do banco de dados para classes e usar a sintaxe LINQ para gerenciar os dados.

Recursos usados:,

Visual Studio Community 2015
SQL Server 2012 Express

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando a solução no VS Community 2015

Abra o VS Community 2015 e clique em New Project;

Selecione a linguagem Visual Basic -> Web e o template ASP .NET Web Application;

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

A seguir escolha o template Empty e marque a opção Web Forms, sem autenticação nem hospedagem na nuvem:

Incluindo um novo Banco de dados SQL Server no Projeto

No menu Project clique em Add New Item;

Clique na guia Data e selecione o item SQL Server DataBase, e, informe o nome Cadastro.mdf e clique no botão Add;

Confirme criação da pasta App_Data para armazenar o banco de dados.

Criando a tabela Alunos no banco de dados

A seguir na janela Server Explorer clique com o botão direito sobre a pasta Tables do banco de dados Cadastro e a seguir em Add New Table;

Crie uma tabela com os campos : Id, Nome , Email e Cidade conforme a estrutura mostrada a baixo.

O campo Id é uma chave primária do tipo Identity (auto-incremental):

Salve a tabela com o nome Alunos.

Incluindo a referência ao LINQ to SQL e criando o modelo de entidades

No menu Project clique em Add New Item;

Clique na guia Data e selecione o item LINQ to SQL Classes e informe o nome CadastroModel.dbml e clique no botão Add;

A seguir, arraste a partir da janela Server Explorer no descritor LINQ to SQL, a tabela Alunos, para criar a classe Aluno conforme mostra a figura abaixo:

Salve e compile o projeto.

Criando a interface com o usuário

Abra o arquivo Default.aspx e a partir da ToolBox e inclua os seguintes controles na página Default.aspx:

LinqDataSource

Após incluir o controle passe para o modo Design e clique em Configure Data Source :

Selecione a tabela Alunos e os campos que vamos usar, como mostrado a seguir, e clique no botão Finish:

No componente LinqDataSource habilite as opções : Enable Delete, Enable Insert e Enable Update:

O código gerado é visto abaixo:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Aspnet_Linq_Ajax.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
            ContextTypeName="Aspnet_Linq_Ajax.Models.CadastroModelDataContext" 
            EnableDelete="True" 
            EnableInsert="True" 
            EnableUpdate="True" 
            EntityTypeName="" 
            TableName="Alunos">
        </asp:LinqDataSource>
    </div>
    </form>
</body>
</html>

A seguir inclua um controle GridView(gdvDados) na página Default.aspx e em Choose Data Source selecione o controle LinqDataSource1, e configure-o conforme a figura abaixo:

Vamos fazer a implementação para a inclusão de dados.

Para isso inclua uma tabela com 3 TextBox : txtNome, txtEmail e txtCidade , 1 Button : btnEnviar, e 1 Label : ID=lblmsg ,conforme mostra o código abaixo:

        ...
        <hr />
        <table>
        <tr><td>Nome:</td><td><asp:TextBox ID="txtNome" runat="server"></asp:TextBox></td></tr>
        <tr><td>Email:</td><td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td></tr>
        <tr><td>Cidade:</td><td><asp:TextBox ID="txtCidade" runat="server"></asp:TextBox></td></tr>
        <tr><td colspan="2"><asp:Button ID="btnEnviar" runat="server" Text="Adicionar Dados"  onclick="btnEnviar_Click" /></td></tr>
        <tr><td>
            <asp:Label ID="lblmsg" runat="server" Font-Bold="True" ForeColor="#CC0000"></asp:Label>
         </td></tr>
        </table>
        <br />
         ...

O leiaute da página Default.aspx e visto a seguir:

Agora vamos implementar o código no evento Click do botão - Adicionar Dados :

Defina no início do arquivo Default.aspx.vb os seguintes namespaces:

using Aspnet_Linq_Ajax.Models;
using System;
using System.Configuration;

A seguir no evento Click do botão Adicionar Dados inclua o código abaixo: (Versão C# e VB .NET)

      protected void btnEnviar_Click(object sender, EventArgs e)
        {
            try
            {
                string connectionString = ConfigurationManager.ConnectionStrings["CadastroConnectionString"].ToString();
                CadastroModelDataContext dataContext = new CadastroModelDataContext(connectionString);

                Aluno tbl = new Aluno();
                tbl.Nome = txtNome.Text;
                tbl.Email = txtEmail.Text;
                tbl.Cidade = txtCidade.Text;
                dataContext.Alunos.InsertOnSubmit(tbl);
                dataContext.SubmitChanges();
                gdvDados.DataBind();
            }
            catch (Exception ex)
            {
                lblmsg.Text = " Erro : " + ex.Message;
            }
      }

  Protected Sub btnEnviar_Click(sender As Object, e As EventArgs)
	Try
		Dim connectionString As String = ConfigurationManager.ConnectionStrings("CadastroConnectionString").ToString()
		Dim dataContext As New CadastroModelDataContext(connectionString)
		Dim tbl As New Aluno()
		tbl.Nome = txtNome.Text
		tbl.Email = txtEmail.Text
		tbl.Cidade = txtCidade.Text
		dataContext.Alunos.InsertOnSubmit(tbl)
		dataContext.SubmitChanges()
		gdvDados.DataBind()
	Catch ex As Exception
		lblmsg.Text = " Erro : " + ex.Message
	End Try
  End Sub

Neste código estamos obtendo a string de conexão usando o ConfigurationManager a partir do nome gerando no arquivo Web.Config.

A seguir criamos uma instância do objeto CadastroModelDataContext do tipo DataContext que contém as informações da conexão e do mapeamento entre o banco de dados e as classes de entidades criadas.

Criamos uma instância da classe Aluno que foi mapeada para tabela Alunos e atribuímos os dados informados nas caixas de texto.

A seguir usamos o método InsertOnSubmit() para incluir o novo objeto no Contexto e a seguir sensibilizamos o banco de dados usando o método SubmitChanges().

Neste momento já temos a implementação concluída e nossa aplicação estará funcional mas vamos agora usar os recursos do Ajax para fornecer uma experiência com o usuário melhor.

Implementando os recursos do AJAX : ScriptManager, UpdatePanel e AsyncPostBackTrigger.

Agora que temos nossa aplicação funcionando vamos melhorar seu desempenho incluindo os recursos do AJAX.

Vamos começar incluindo um objeto do tipo ScriptManager na sua página Default.aspx. A função do ScriptManager é gerenciar a ação de todos os controles AJAX na página.

A seguir inclua um objeto UpdatePanel que vai permitir que você crie aplicações web com uma interface mais interativa e amigável com o usuário.

Usando este controle você pode atualizar partes selecionadas de uma página ao invés de atualizar toda a página web usando um postback.(efetuar uma atualização parcial da página - partial-page update).

Você pode usar um ou mais controles UpdatePanel em uma página que já contenha o controle ScriptManager que podem participar de atualizações parciais da página sem ter que criar código de script do lado do cliente.

O controle UpdatePanel do ASP.NET AJAX é um controle de servidor e ao usá-lo o comportamento da página é independente do Navegador usado e pode reduzir potencialmente a quantidade de dados que é transferido entre o cliente e o servidor.

Este controle atua definindo regiões específicas de uma página que podem ser atualizadas sem dar um refresh na página inteira. Este processo é coordenado pelo controle de servidor ScriptManager e pela classe PageRequestManager no lado do cliente. Quando uma atualização parcial esta ativa, os controles podem enviar posts de forma assíncrona para o servidor.

Não há limite no número de controles UpdatePanel que você pode usar em uma página e você pode usar mais de um controle para atualizar regiões diferentes da página de forma independente.

Qualquer postback efetuado dentro de um controle UpdatePanel causa um postback assíncrono e atualiza o conteúdo do painel, mas você pode também configurar outros controles na página para atualizar o controle UpdatePanel através da definição de um gatilho (trigger) para o controle. (Um gatilho (trigger) é uma vinculação que especifica qual controle e evento irá causar a atualização do UpdatePanel em um postback.)

Um gatilho é definido pela utilização do elemento <asp:AsyncPostBackTrigger ControlID="ControleID" /> no interior do elemento <Triggers> do controle UpdatePanel sendo que sua utilização é opcional.

Vamos então incluir um trigger para o nosso botão de comando btnEnviar definindo o código conforme mostrado a seguir:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Aspnet_Linq_Ajax.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <Triggers>
           <asp:AsyncPostBackTrigger ControlID="btnEnviar" EventName="Click" />
        </Triggers>

        <ContentTemplate>
        <div>
        <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
            ContextTypeName="Aspnet_Linq_Ajax.Models.CadastroModelDataContext" 
            EnableDelete="True" 
            EnableInsert="True" 
            EnableUpdate="True" 
            EntityTypeName="" 
            TableName="Alunos">
        </asp:LinqDataSource>

      <asp:GridView ID="gdvDados" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" 
          DataKeyNames="Id" DataSourceID="LinqDataSource1" Height="243px" Width="495px" BackColor="#DEBA84" BorderColor="#DEBA84" 
           BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
            <Columns>
                <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="True" CancelText="Cancela" 
               DeleteText="Deleta" EditText="Edita" InsertText="Inserir" NewText="Novo" SelectText="Seleciona" UpdateText="Atualiza" />
                <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="Cidade" HeaderText="Cidade" SortExpression="Cidade" />
            </Columns>
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FFF1D4" />
            <SortedAscendingHeaderStyle BackColor="#B95C30" />
            <SortedDescendingCellStyle BackColor="#F1E5CE" />
            <SortedDescendingHeaderStyle BackColor="#93451F" />
        </asp:GridView>
        <hr />
        <table>
        <tr><td>Nome:</td><td><asp:TextBox ID="txtNome" runat="server"></asp:TextBox></td></tr>
        <tr><td>Email:</td><td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td></tr>
        <tr><td>Cidade:</td><td><asp:TextBox ID="txtCidade" runat="server"></asp:TextBox></td></tr>
        <tr><td colspan="2"><asp:Button ID="btnEnviar" runat="server" Text="Adicionar Dados" onclick="btnEnviar_Click" /></td></tr>
        <tr><td>
            <asp:Label ID="lblmsg" runat="server" Font-Bold="True" ForeColor="#CC0000"></asp:Label>
         </td></tr>
        </table>
        </ContentTemplate>

     </asp:UpdatePanel>
     </form>
</body>
</html>

Agora ao atualizar os dados haverá uma atualização parcial da página e não total.

Executando o projeto iremos obter o seguinte resultado após clicar no botão para exportar:

Ao clicar no botão Adicionar Dados os dados serão incluídos e a tela não vai 'piscar' parecendo uma atualização quase instantânea.

Pegue o projeto completo aqui: Aspnet_Linq_Ajax.zip

Até o próximo artigo...

Não se turbe o vosso coração; credes em Deus, crede também em mim.
Na casa de meu Pai há muitas moradas; se não fosse assim, eu vo-lo teria dito. Vou preparar-vos lugar.
João 14:1,2

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

Quer migrar para o VB .NET ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

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

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

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

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

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

Curso ASP .NET MVC 5 - Vídeo Aulas

Gostou ? Compartilhe no Facebook Compartilhe no Twitter

Referências:

José Carlos Macoratti