Vinicius Quaiato

ASP.NET MVC AjaxOptions: LoadingElementId

17/02/2011

Continuando a falar sobre os AjaxOptions no ASP.NET MVC desta vez vou abordar o LoadingElementId.Já falamos sobre:- UpdateTargetId

• Confirm message A propriedade LoadingElementId configura um id de elemento DOM para ser exibido enquanto a requisição ajax está sendo executada. Ou seja, vamos mostrar uma imagem de progresso enquanto a requisição ajax não é finalizada.Vamos continuar usando o mesmo exemplo dos posts anteriores mas com pequenas mudanças. Nosso formulário ficará da seguinte maneira:

@using (Ajax.BeginForm("AjaxAction",
    new AjaxOptions { UpdateTargetId = "div_nome", LoadingElementId = "div_loading" }))
{
    @Html.TextBox("nome")
    <br />
    @Html.TextBox("sobrenome")
    <input type="submit" value="ajax" />
}

Vejam que na linha 2 passo o nome de uma div “div_loading” como valor desta propriedade do objeto AjaxOptions. Esta div possui uma imagem e está com estilo para não ser exibida:

<div id="div_loading" style="display: none;">
    <img src="@Url.Content("~/Content/loading.gif")" alt="Carregando" />
</div>

Coloquei também um Thread.Sleep(3000) na action no HomeController, mas não preciso mostrar esse código né?!Quando executarmos nosso formulário teremos o seguinte comportamento:

Podemos ver que a imagem de progresso é exibida durante a requisição ajax.Ao término da mesma, o elemento “div_loading” é ocultado novamente:

Simples hein?!Lembrando novamente que este código faz uso do JQuery e do JQuery Unobtrusive, conforme mostrei no primeiro artigo aqui.

Código fonte

O fonte deste e outros exemplos estão no Github: https://github.com/vquaiato/ajaxhelpersamplesAbraços,Vinicius Quaiato.

Voltar