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")" /></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.
