ASP.NET MVC e AJAX: exibindo o progresso de execução de uma View

Uma das grandes preocupa��es atuais dentro do desenvolvimento de solu��es Web gira em torno da ideia de se garantir uma boa experi�ncia do usu�rio. Este conceito refere-se � constru��o de solu��es com elementos visuais sofisticados, os quais s�o implementados de uma maneira que simplifique a intera��o de usu�rios com as funcionalidades disponibilizadas por uma aplica��o. A constru��o de sites em conformidade com essas caracter�sticas acontece por meio da utiliza��o de um conjunto de recursos conhecidos como AJAX (sigla do ingl�s �Asynchronous JavaScript and XML�).

O uso de t�cnicas envolvendo AJAX � extremamente comum nas interfaces de redes sociais e de portais que disponibilizam servi�os de webmail, sendo facilmente observ�vel na implementa��o de caracter�sticas como:

A indica��o do progresso de uma a��o durante o processamento da mesma;
O update/atualiza��o de apenas partes de uma p�gina, dispensando assim a necessidade de atualiza��o de todo o conte�do existente. Este tipo de pr�tica tem como grande benef�cio tornar mais r�pida e eficiente a intera��o de um usu�rio com as funcionalidades oferecidas por um site;
Suporte � comunica��o ass�ncrona com Web Services, incluindo nisto a manipula��o de informa��es nos formatos JSON e XML;
A execu��o de a��es em per�odos regulares de tempo, empregando para isso estruturas conhecidas como "timers".

No caso da exibi��o de informa��es indicando o progresso de uma a��o, a presen�a deste tipo de comportamento impede se crie a falsa impress�o de que a aplica��o travou durante um processamento mais demorado. Em ASP.NET Web Forms isto � conseguido por meio da utiliza��o do controle UpdateProgress, o qual faz parte de um conjunto de extens�es AJAX para este tipo de solu��o. J� em projetos constru�dos sob o framework ASP.NET MVC, o comum � que se utilize dentro do c�digo que define uma View os m�todos disponibilizados pelo objeto Ajax (inst�ncia da classe AjaxHelper, esta �ltima localizada no namespace System.Web.Mvc).

O objetivo deste artigo � demonstrar como o objeto Ajax pode ser utilizado para demonstrar o progresso de uma a��o em Views do ASP.NET MVC. Para isto, ser� constru�do um projeto em que ser� poss�vel a consulta a informa��es de produtos em um banco de dados SQL Server.

Criando a solu��o de exemplo

A aplica��o apresentada neste artigo foi criada a partir do Visual Studio 2012 Professional, fazendo uso para isto do .NET Framework 4.5 e da vers�o 4.0 do ASP.NET MVC. O exemplo a ser implementado far� uso de um banco de dados SQL Server (Northwind) via ADO.NET, o qual servir� de base para a execu��o de consultas aos produtos cadastrados nesta base.

Para gerar o projeto de testes ser� necess�rio, dentro do Visual Studio, acessar o menu File, op��o New e, por fim, a op��o Project. Dentro da tela New Project (Figura 1) selecionar o template ASP.NET MVC 4 Web Application, preenchendo o campo Name com o nome da aplica��o a ser gerada (�TesteUpdateProgressMVC�, neste caso); no campo Location � poss�vel ainda definir o diret�rio no qual ser�o criados os arquivos para este projeto.

Figura 1: Criando um projeto ASP.NET MVC 4 para testes

Aparecer� ent�o uma janela como a que consta na Figura 2. Dever�o ser escolhidos o template para a cria��o do projeto (selecionar �Internet Application�), assim como o Engine utilizado para a gera��o das Views (marcar a op��o �Razor�).

Figura 2: Selecionando o tipo de template

Configurando o acesso � base de dados

Para a obten��o das informa��es utilizadas pela aplica��o de exemplo ser� empregado o banco de dados Northwind. Maiores informa��es sobre como habilitar esta base para uso no SQL Server 2012 podem ser encontradas no link:

http://msdn.microsoft.com/en-us/library/vstudio/8b6y4c7s.aspx

Com a base de dados j� configurada, adicionar ao arquivo Web.config do projeto de testes a string de conex�o �Northwind� (conforme indicado na Listagem 1).

Listagem 1: Ajustes no arquivo Web.config da aplica��o


<?xml version="1.0" encoding="utf-8"?>
<configuration>

  ...

  <connectionStrings>
    <add name="Northwind"
        connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
        providerName="System.Data.SqlClient" />
  </connectionStrings>

  ...

</configuration>

Implementando as classes de acesso a dados

Com o projeto TesteUpdateProgressMVC j� criado e o acesso � base de dados devidamente configurado, chega o momento de prosseguir com a constru��o dos tipos empregados na manipula��o de informa��es sobre produtos. As estruturas descritas nesta se��o pertencer�o � camada Model (namespace TesteUpdateProgressMVC.Models).

Primeiramente ser� implementada a classe Produto (Listagem 2). Foram definidos neste tipo (sob a forma de propriedades) o c�digo do produto, o nome do mesmo, bem como a identifica��o da empresa que fornece tal item.

Listagem 2: Classe Produto


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TesteUpdateProgressMVC.Models
{
    public class Produto
    {
        public string CodProduto { get; set; }
        public string NomeProduto { get; set; }
        public string Fornecedor { get; set; }
    }
}

J� na Listagem 3 est� o c�digo referente � classe ProdutoDAO. Este tipo baseia-se em um padr�o conhecido Data Access Object (DAO), tendo por finalidade centralizar o acesso � base de dados para a manipula��o de informa��es sobre produtos (por meio da opera��o ObterInformacoesProdutos).

Quanto ao funcionamento do m�todo ObterInformacoesProdutos, � poss�vel destacar:

A partir da vari�vel �conexao� (inst�ncia do tipo System.Data.SqlClient.SqlConnection) � estabelecida uma conex�o com a base de dados utilizada pela aplica��o de exemplo (empregando para isto a string de conex�o �Northwind�);
A refer�ncia de nome �cmd� (objeto do tipo System.Data.SqlClient.SqlCommand) representa a instru��o SQL que far� a consulta � tabela de produtos. Est� sendo adicionada � propriedade Parameters um novo par�metro, que conter� o nome de produto (ou parte deste) a ser pesquisado;
Ao se invocar o m�todo ExecuteReader do objeto associado � vari�vel �cmd� uma nova inst�ncia da classe SqlDataReader (namespace System.Data.SqlClient) � gerada. Por meio desta refer�ncia os diferentes registros ser�o lidos, acontecendo ainda a convers�o de tais informa��es em inst�ncias do tipo Produto;
Os objetos da classe Produto s�o armazenados em uma cole��o, a qual ser� devolvida como resultado da execu��o do m�todo ObterInformacoesProdutos.

Listagem 3: Classe ProdutoDAO


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace TesteUpdateProgressMVC.Models
{
    public class ProdutoDAO
    {
        public List<Produto> ObterInformacoesProdutos(
            string nomeProduto)
        {
            List<Produto> resultado = new List<Produto>();

            using (SqlConnection conexao =
                new SqlConnection(ConfigurationManager
                    .ConnectionStrings["Northwind"].ConnectionString))
            {
                string valorPesquisa = "%" +
                    (!String.IsNullOrWhiteSpace(nomeProduto) ?
                      nomeProduto.Trim().ToUpper() :
                      String.Empty) + "%";

                SqlCommand cmd = conexao.CreateCommand();
                cmd.CommandText =
                    "SELECT P.ProductID AS CodProduto " +
                          ",P.ProductName AS NomeProduto " +
                          ",S.CompanyName AS Fornecedor " +
                    "FROM dbo.Products P " +
                    "INNER JOIN dbo.Suppliers S ON " +
                        "S.SupplierID = P.SupplierID " +
                    "WHERE UPPER(ProductName) LIKE @PRODUTO " +
                    "ORDER BY P.ProductName";
                cmd.Parameters.Add("@PRODUTO",
                    SqlDbType.VarChar).Value = valorPesquisa;

                conexao.Open();
                using (SqlDataReader reader = cmd.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        resultado.Add(new Produto(){
                            CodProduto =
                                reader["CodProduto"].ToString(),
                            NomeProduto =
                                reader["NomeProduto"].ToString(),
                            Fornecedor =
                                reader["Fornecedor"].ToString()
                        });
                    }

                    reader.Close();
                }

                conexao.Close();
            }

            return resultado;
        }
    }
}

Implementando o Controller que processar� informa��es de produtos

Com os tipos da camada Model j� definidos, deve-se proceder agora com a implementa��o do Controller que retornar� o resultado de consultas � tabela de produtos.

Um novo Controller pode ser criado por meio da janela Solution Explorer: para isto clicar com o bot�o direito do mouse sobre a pasta Controllers, selecionando em seguida no menu de atalho o item Add, op��o Controller. Aparecer� ent�o a janela Add Controller; preencher o campo Controller Name com o valor "ProdutoController" (Figura 3), enquanto em Template dever� estar marcada a op��o �Empty MVC Controller�.

Figura 3: Criando um novo Controller

Na Listagem 4 est� a implementa��o da classe ProdutoController. Foi definido neste Controller apenas a Action ObterInformacoesProdutos, a qual devolver� como resultado de sua execu��o informa��es relativas a produtos da base Northwind: isso ser� feito tomando por base uma string em que constar� parte do nome dos itens procurados (se um valor n�o for repassado � Action, todos os produtos cadastrados ser�o retornados).

Conforme � poss�vel observar, o retorno da opera��o ObterInformacoesProdutos ser� uma inst�ncia do tipo PartialViewResult, a qual � gerada por meio de uma chamada ao m�todo b�sico PartialView (definido na classe b�sica Controller). Esta caracter�stica indica que o resultado de ObterInformacoesProdutos ser� uma Partial View, um tipo de estrutura cujo conte�do pode ser combinado a outras Views para a gera��o de uma p�gina HTML.

Listagem 4: Classe ProdutoController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TesteUpdateProgressMVC.Models;

namespace TesteUpdateProgressMVC.Controllers
{
    public class ProdutoController : Controller
    {
        public PartialViewResult ObterInformacoesProdutos(
            string nomeProduto)
        {
            List<Produto> informacoesProdutos =
                new ProdutoDAO().ObterInformacoesProdutos(
                    nomeProduto);
            return PartialView(informacoesProdutos);
        }
    }
}

OBSERVA��O: Por quest�es de simplifica��o, o c�digo referente ao Controller HomeController foi omitido, j� que no mesmo n�o existem instru��es complexas que justifiquem uma discuss�o mais aprofundada (o arquivo correspondente pode ser obtido atrav�s do download da solu��o aqui implementada, acessando para isto o link em que consta o material para este artigo).

Implementa��o das Views da aplica��o

Por fim, ser� preciso criar a Partial View para a exibi��o de informa��es sobre produtos, bem como proceder com ajustes na View que conter� tais estruturas (a qual est� relacionada � Action Index de HomeController).

No caso da classe ProdutoController, a cria��o da View que conter� o resultado da execu��o da Action ObterInformacoesProdutos pode ser feita clicando-se com o bot�o direito do mouse sobre o m�todo correspondente; no menu de atalho apresentado selecionar a op��o Add View.

Com a janela �Add View� ativa, certificar-se de que o campo �View Engine� est� preenchido com o valor �Razor (CSHTML)�. Marcar ent�o a op��o �Create a strongly typed-view�, selecionando em �Model class� o tipo Continente; j� em �Scaffold template�, escolher o valor �List�, a fim de que seja gerada uma listagem/tabela com os diferentes registros relativos aos dados de produtos. Concluindo este processo, selecionar ainda a op��o �Create as a partial view�. Na Figura 5 est�o ilustrados todos esses ajustes.

Figura 4: Cria��o de uma Partial View

Ao se acionar o bot�o Add da janela Add View ser� criado o arquivo ObterInformacoesProdutos.cshtml (Listagem 5). Trata-se de uma View �fortemente tipada�, ou seja, atrav�s da propriedade Model desta estrutura se tem acesso a uma cole��o de objetos de um tipo espec�fico (no caso, a classe Produto).

Listagem 5: Partial View ObterInformacoesProdutos.cshtml


@model IEnumerable<TesteUpdateProgressMVC.Models.Produto>

<table>
    <tr>
        <th style="text-align: center;  width: 150px;">
            C�d. Produto
        </th>
        <th style="width: 300px;">
            Descri��o
        </th>
        <th style="width: 300px;">
            Fornecedor
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td style="text-align: center;">
            @item.CodProduto
        </td>
        <td>
            @item.NomeProduto
        </td>
        <td>
            @item.Fornecedor
        </td>
    </tr>
}

</table>

Antes de prosseguir com a implementa��o da View Index (a qual est� associada a HomeController), ser� necess�rio incluir um arquivo GIF de nome �carregando.gif� na pasta Content do projeto TesteUpdateProgressMVC.

Esta imagem corresponde a um tipo de anima��o muito comum em sites Web, sendo normalmente empregada para indicar que uma a��o est� em progresso. O arquivo utilizado na aplica��o de exemplo aqui apresentada foi gerado atrav�s do seguinte site:

http://www.ajaxload.info/

Ajustes precisar�o ser realizados agora na View Index (Listagem 6), que est� vinculada � Action de mesmo nome na classe HomeController (este Controller � gerado por default ao se utilizar o template �Internet Application�). Importante ressaltar que essa estrutura ser� exibida como p�gina inicial ao se executar a aplica��o por meio do Visual Studio.

Ao ser visualizada, a ideia � que a View Index exiba um campo para a pesquisa de produtos por nome. Se o usu�rio acionar ent�o um bot�o para disparar a execu��o da consulta, ser� exibida a imagem indicando que a a��o est� em progresso e, finalmente, apresentados os dados referentes ao filtro informado.

Listagem 6: View Index.cshtml


@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

<style type="text/css">

    .progresso
    {
        display: none;
        position: fixed;
        top: 360px;
        left: 50%;
        margin-top: -50px;
        margin-left: -100px;
        vertical-align: middle;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        background-color: white;
        border: 1px solid black;
        height: 90px;
        width: 120px;
    }

</style>

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Utilizando o objeto Ajax
                    (classe AjaxHelper)</h1>
            </hgroup>
        </div>
    </section>
}

<h2>Consulta ao Cadastro de Produtos</h2>
<br />
Digite o nome do produto (ou parte desta identifica��o):

@using (Ajax.BeginForm(
        "ObterInformacoesProdutos",
        "Produto",
        new AjaxOptions
        {
            UpdateTargetId = "divResultadoConsulta",
            LoadingElementId = "divCarregando"
        }
    ))
{
    @Html.TextBox("nomeProduto")
    <input type="submit" value="Pesquisar" />    
}

<div id="divResultadoConsulta">
</div>
 
<div id="divCarregando" class="progresso">
    <img src="@Url.Content("~/Content/carregando.gif")" />
    <br />
    Carregando...
</div>

Analisando o c�digo do arquivo Index.cshtml, � poss�vel observar:

Chamadas ao m�todo Render da classe Scripts (namespace System.Web.Optimization). O objeto destas instru��es � incluir as bibliotecas JQuery que permitem a utiliza��o de AJAX em Views do ASP.NET MVC;
Uma classe CSS de nome �progresso�, na qual est�o as defini��es para a apar�ncia de um elemento div respons�vel por indicar que uma consulta est� em progresso (por default o atributo display foi configurado com o valor �none�, a fim de que esta div seja exibida apenas durante a��es envolvendo a utiliza��o de AJAX);
O uso do m�todo BeginForm, a partir do objeto Ajax. Este procedimento permitir� a gera��o de um formul�rio em que constar� um campo chamado �nomeProduto� (seguindo o mesmo nome do par�metro esperado pela Partial View ObterInformacoesProdutos em ProdutoController), al�m de um bot�o para disparar a execu��o de uma nova consulta � base de dados;
Uma div de nome �divResultadoConsulta�, a qual conter� o resultado de uma consulta efetuada junto ao banco Northwind;
Uma div chamada �divCarregando� e que faz uso da classe CSS "progresso" mencionada anteriormente. Este elemento HTML cont�m o arquivo carregando.gif, o qual ser� exibido enquanto uma consulta � base de dados estiver em curso.

Quanto � utiliza��o do m�todo BeginForm acionado por meio do objeto Ajax, foram preenchidos os seguintes par�metros para esta opera��o:

O nome da Partial View (�ObterInformacoesProdutos�) cujo conte�do HTML ser� exibido dentro da View Index.cshtml;
O Controller (�Produto�) em que esta Partial View foi definida;
Uma inst�ncia do tipo AjaxOptions (namespace System.Web.Mvc.Ajax) em que est�o indicadas a div (�divResultadoConsulta�) aonde constar� o resultado da Partial View ObterInformacoesProdutos (propriedade UpdateTargetId), assim como a div (�divCarregando�) utilizada na exibi��o da notifica��o de que uma consulta ao banco de dados est� em progresso (este elemento HTML � referenciado na propriedade LoadingElementId).

Al�m da opera��o BeginForm, o objeto Ajax disponibiliza outras funcionalidades como o m�todo ActionLink. Este �ltimo permite a gera��o de um link que aponta para uma Action, fazendo uso para isto dos mesmos recursos de AJAX j� descritos para o m�todo BeginForm.

Executando a aplica��o de testes

Iniciando a execu��o do site de testes, ser� exibida uma tela como a que consta na Figura 5.

Figura 5: A aplica��o TesteUpdateProgressMVC em execu��o

Preenchendo o campo de pesquisa com o valor �chef� e acionando o bot�o �Pesquisar�, aparecer� a indica��o de que uma consulta � base est� em progresso (Figura 6).

Figura 6: Executando uma consulta � base de produtos

Por fim, a Figura 7 demonstra o resultado ap�s a conclus�o de uma consulta � base de dados.

Figura 7: Resultado de uma consulta � base Northwind

Conclus�o

Procurei com este artigo demonstrar, atrav�s de um exemplo simples, como o mesmo comportamento oferecido pelo componente UpdateProgress em Web Forms pode ser implementado numa aplica��o ASP.NET MVC. A exibi��o de notifica��es indicando que uma a��o est� em progresso �, sem sombra de d�vidas, um recurso extremamente �til. Funcionalidades deste tipo ajudam a evitar que usu�rios abandonem um site, muitas vezes por acreditar que o mesmo travou durante o processamento de uma solicita��o.

Espero que o conte�do aqui apresentado possa ser �til em algum momento. At� uma pr�xima oportunidade!

Leia tamb�m

ASP.NET MVC e AJAX: atualizando o conte�do de Partial Views via JQuery

Tecnologias:

Confira outros conte�dos:

Teste unit�rio com NUnit

Como migrar projetos do ASP.NET MVC...

Crie relat�rios com o Stimulsoft...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Renato Em 2013

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Edson Filenti

N�vel 0

Boa tarde,

Estou tentando realizar esse exemplo na minha aplica��o, por�m o VS2017 n�o reconhece o comando no HTML:
@using (Ajax.BeginForm

No meu Visual Studio tentei instalar o Microsoft.Jquery.Unobtrusive.Ajax, por�m apenas o que � instalado no WWWRoot/lib s�o: jquery, jquery-validation , jquery-validation-unobtrusive

Como posso fazer para resolver isso?

Obrigado
Edson

há +1 ano

Ver coment�rios anteriores (2)

Joel Rodrigues

N�vel 1

Bom dia, Edson. O ideal, neste caso, � voc� fazer isso com JavaScript (AJAX), seja usando jQuery, Vue, Angular, etc ou mesmo JavaScript puro.

Basicamente a t�cnica consiste dos seguintes passos:
1) exibir imagem de carregamento;
2) fazer o carregamento via Ajax;
3) ocultar a imagem.

O que varia � basicamente o passo 2, que depende de qual mecanismo voc� vai usar para fazer o carregamento.

Abra�o.

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

ASP.NET MVC e AJAX: exibindo o progresso de execu��o de uma View

Veja neste artigo como exibir em aplica��es ASP.NET MVC uma imagem indicando que a execu��o da Action associada a uma View est� em progresso.