Carregar conteúdo sem ter que carregar a página toda é muito bom e deixa seu sistema/site com uma cara bem mais atraente. E até pode parecer difícil, mas na verdade é simples.Para carregar algum conteúdo é necessário criar uma Action em seu Controller que nos retorno esse conteúdo. Essa Action pode retornar uma string, um número, um JSON, uma PartialView dentre outros.

Carregar conteúdo sem ter que carregar a página toda é muito bom e deixa seu sistema/site com uma cara bem mais atraente. E até pode parecer difícil, mas na verdade é simples.Para carregar algum conteúdo é necessário criar uma Action em seu Controller que nos retorno esse conteúdo. Essa Action pode retornar uma string, um número, um JSON, uma PartialView dentre outros.

Vamos começar!

  1. Crie um novo projeto ASP .NET MVC.

2 .Por padrão quando você cria um projeto MVC ele já vem com um layout e até um Controller pronto, vamos utilizar esse mesmo, apenas crie mais uma Action no Controller Home chamada TesteAjax, conforme código abaixo:

public String TesteAjax()

_ {_

_ return DateTime.Now.ToString(“dd/MM/yyyy hh:mm:ss”);_

_ }_

  1. Agora edit a View Index do Controller Home e substituia todo o conteúdo do content IndexContent para o seguinte código:

<script src=”../../Scripts/MicrosoftAjax.js” type=”text/javascript”>

_ <script src=”../../Scripts/MicrosoftMvcAjax.js” type=”text/javascript”>_

_ <%= Html.Encode(ViewData[“Message”]) %>_

_ _

_ To learn more about ASP.NET MVC visit <a href=”http://asp.net/mvc” title=”ASP.NET MVC Website”>http://asp.net/mvc._

_ _

_ <%= Ajax.ActionLink(“Carregar…”, “TesteAjax”, new AjaxOptions(){_

_ InsertionModeInsertionMode = InsertionMode.Replace,_

_ UpdateTargetId = “divResultado”_

_ })%>_

_ <div id=”divResultado”>_

O Helper “Ajax” possui algumas funções para ajudar no desenvolvimento com Ajax, uma delas utilizamos aqui, a ActionLink que cria uma requisição em Ajax para uma Action específica.

Também há uma função que pode ser chamada Ajax.BeginForm() que é parecida com Html.BeginForm(), que cria um formulário de requisição, ou seja ela irá mandar os dados do seu < form > via AJAX.

Ambas as funções utilizam uma classe chamada AjaxOptions, que possui as seguintes propriedades:

  • Confirm: Parâmetro string que recebe o nome de uma função que será chamada para confirmar o envio.
  • HttpMethod: Método que será encaminhada a requisição, POST ou GET.
  • InsertionMode: Modo que será inserido o resultado da requisição, se não passar nada ele não irá jogar em lugar nenhum.
  • LoadingElementId: Elemento que será mostrado enquanto a requisição está sendo executada.
  • OnBegin: Função que será chamada quando a requisição iniciar.
  • OnComplete: Função que será chamada quando a requisição finalizar.
  • OnFailure: Função que será chamada quando a requisição falhar.
  • OnSuccess: Função que será chamada caso a requisição termine com sucesso.
  • UpdateTargetId: Elemento onde retorno da requisição será carregado caso seja informado o InsertionMode.
  • Url: Url da requisição. Este parâmetro é opcional. Caso informe ActionName e ControllerName na função Ajax.BeginForm() ou Ajax.ActionLink() não será necessário colocar nada aqui.

Agora vamos voltar ao nosso exemplo, Compile ele, e abra no browser. Você obterá um resultado parecido com esse:

Antes de clicar no link:

<a href="https://i0.wp.com/www.leonardohofling.com/blog/wp-content/uploads/2010/05/asp11.jpg” data-rel="lightbox-image-0” data-rl_title=”” data-rl_caption=”” title="“>

Depois de ter clicado no link:

<a href="https://i1.wp.com/www.leonardohofling.com/blog/wp-content/uploads/2010/05/asp21.jpg” data-rel="lightbox-image-1” data-rl_title=”” data-rl_caption=”” title="“>

 

Até a próxima!