Vinicius Quaiato

{tecnologia, conceitos, negócios, idéias, práticas, .NET, ruby, osx, ios e algo mais}

ASP.NET MVC AjaxOptions: LoadingElementId


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:ASP.NET MVC AjaxHelper LoadingElementId

Podemos ver que a imagem de progresso é exibida durante a requisição ajax.Ao término da mesma, o elemento "div_loading" é ocultado novamente:ASP.NET MVC AjaxHelper LoadingElementId loading completo

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

Fork me on GitHub