Hoje vou compartilhar para vocês uma maneira simples de se fazer um Progress Bar (barra de progresso) em ASP.NET MVC utilizando jQuery e Ajax. Essa é uma ótima dica para se levar em conta a experiência do usuário com sua aplicação, em situações em que ocorrem uma requisição ao Controller que demande um tempo, ocasionando uma confusão por parte do usuário em saber o que está acontecendo, se ocorreu o resultado esperado, etc.

progressbar

A lógica a ser utilizada é bem simples. Basicamente, teremos um objeto estático no Controller, responsável por armazenar a informação do processo em execução, como por exemplo Etapa atual e Descrição,e um Timer no front acessando o valor desse objeto estático e exibindo para o usuário.

Para a demonstração do código a seguir, foi utilizado as seguintes tecnologias:

  • ASP.NET MVC 5
  • jQuery 1.11.2
  • jQuery.UI 1.11.4
     

Imaginemos que temos um método no nosso Controller com nome FazendoAlgo.

public JsonResult FazendoAlgo()
{

for (int i = 1; i < 100; i++)
{
System.Threading.Thread.Sleep(1000);
}

return Json("Feito algo com sucesso", JsonRequestBehavior.AllowGet);

}
`</pre>
Em nossa View, temos um botão que chama o método _FazendoAlgo_ atravéz uma requisição Ajax, e exiba a mensagem de retorno apenas ao termino do procedimento.
<pre class="prettyprint">`
$.ajax({
            url: "/Controller/FazendoAlgo",
            type: "GET",
            dataType: "JSON",
            success: function (retorno) {
                alert(retorno);
            }
        });
`</pre>
Neste caso, o método _FazendoAlgo _somente retornará após 10 segundos. O usuário terá um _delay_ de 10 segundos entre uma solicitação e a resposta, o que dependendo do caso pode ser crucial para seu negócio, fazendo com que ele feche a janela e vá embora. Claro que não se pode generalizar, mas se pensando em experiência do usuário, você deve mantê-lo informado do que está acontecendo.

Para isso, iremos usar o [Progressbar ](https://jqueryui.com/progressbar/)do jQuery e faremos algumas pequenas alterações em nosso _Controller_ para comunicar o _progressbar _do andamento da solicitação. Crie uma nova div com o id _progressbar_ no local da sua pagina onde deseja exibir.

<pre class="prettyprint">`
<div id="progressbar>< /div>
`</pre>

Crie uma classe denominada _Progresso_ na pasta _Models_ do seu projeto, ou onde achar mais adequado.
<pre class="prettyprint">`
public class Progresso
        {
            public int Etapa { get; set; }
            public string Descricao { get; set; }
        }
`</pre>
Agora defina um novo _Progresso _privado e estatico dentro do seu _Controller_
<pre class="prettyprint">`
private static Progresso Progresso = new Model.Progresso();
`</pre>
&nbsp;

A lógica do procedimento é simples. O que faremos alterar os valores do _Progresso_ dentro de cada nó em nosso método _FazendoAlgo, ficando da seguinte maneira._

&nbsp;
<pre class="prettyprint">`
public JsonResult FazendoAlgo()
        {
            for (int i = 1; i < 100; i++)
            {
                Progresso.Etapa = i;
                Progresso.Descricao = "Realizando etapa n° " + i;
                System.Threading.Thread.Sleep(1000);
            }
            Progresso.Etapa = 100;
            Progresso.Descricao = "Concluido";
            return Json("Feito algo com sucesso", JsonRequestBehavior.AllowGet);
        }
`</pre>
Basta agora acessarmos essa informação do _Progresso _pela _view_  e exibir para o usuário. Para isso, criaremos um novo [_Interval_](http://www.w3schools.com/jsref/met_win_setinterval.asp) que terá a responsabilidade de acessar um novo método no _Controller_, pegar o valor do _Progresso_ e exibir para o usuário com o _Progressbar._

Crie um novo método _GetProgress _no _Controller_ com a seguinte instrução
<pre class="prettyprint">`
public JsonResult GetProgress()
        {
            return Json(Progresso, JsonRequestBehavior.AllowGet);
        }
`</pre>
Agora crie uma nova função JavaScript na sua _view _para acessar o valor do _Progresso_

&nbsp;
<pre class="prettyprint">`
function GetProgress(timer) {
            $.ajax({
                type: 'GET',
                url: '/Controller/GetProgress',
                datatype: 'json',
                success: function (progresso) {
                    if (progresso.Etapa != 100) {
                        $("#progressbar").html(progresso.Descricao);
                        $("#progressbar").progressbar({
                            value: (progresso.Etapa)
                        });
                    }
                    else {   
                        clearInterval(timer);
                    }
                }
            });
        }
`</pre>
Agora temos que alterar a chamada _Ajax_ do método _FazendoAlgo_ para acionar o nosso _Interval_ que por fim irá nos trazer o resultado do progresso, ficando da seguinte maneira

&nbsp;
<pre class="prettyprint">`
$.ajax({
            url: "/Home/FazendoAlgo",
            type: "GET",
            dataType: "JSON",
            success: function (retorno) {
                timer = setInterval(function () {
                    GetProgress(timer);
                }, 2000);
            }
        });

Pronto!

Se você realizou todas essas etapas, seu _Progressbar _estará funcionando e exibindo etapa por etapa do que esta sendo feito no _Controller. _O _Interval _está definido para atualizar o _Progressbar _a cada 2 segundos. Quando o progresso atingir o valor de 100, o Interval será parado.

Espero que esse artigo tenha sido útil, até a próxima.