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 >
            C�d. Produto
        </th>
        <th >
            Descriç�o
        </th>
        <th >
            Fornecedor
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td >
            @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