ASP.NET MVC e ajax com Jquery load
20/12/2010
Já falamos sobre AJAX com ASP.NET MVC e Jquery aqui usando Hijax com form submit e aqui usando a função ajax.Agora vamos ver uma das formas mais simples de carregar dados do servidor em uma chamada ajax: a função load.
A função load
Basicamente o que a função load do Jquery faz é uma requisição para dados no servidor e coloca o resultado(HTML) dentro de um elemento na página.Isto quer dizer que a action no nosso controller já vai retornar o HTML formatado. Isso é bem simples de ser feito, qualquer return View ou return PartialView fará esse trabalho.
O exemplo
Vamos ver um exemplo para ficar mais claro: Nossa página deverá carregar em uma área específica os top 5 textos mais lidos do site, e em outra área os últimos 5 comentários realizados. Bastante simples.
A view
A view é bastante simples neste exemplo. Temos inicialmente 2 divs para exibir nossas informações:
<!DOCTYPE html SYSTEM><html><head> <title>Index</title></head><body> <div> # Página inicial
</div>
### Últimos posts
<div class="box" id="ultimos_posts"> </div>
### Últimos comments
<div class="box" id="ultimos_comments"> </div></body></html>
Vamos então adicionar a referência para o Jquery e criar o código para chamar a function load adicionando o seguinte script:
</script><script> $(function () {
var url = "@Url.Action("Recent", "Posts")";
$("#ultimos_posts").load(url);
}
);
</script>
Wow! É muito simples!Na linha 4 estou definindo a url para a action que retorna os posts mais recents. Notem que eu não estou usando a url hardcoded, ao invés disso utilizo o helper Url.Acion do ASP.NET MVC. Faço isso pois caso o esquema de rotas mude eu não preciso sair caçando minhas urls na aplicação. É uma boa prática.Na linha 5 chamamos a function load na div "ultimos_posts". Isso quer dizer que vamos fazer um request assíncrono para a url informada e o HTML resultante deste request será inserido na nossa div. É muito fácil!
A action
Vamos agora espiar como está a action Recent no controller Posts:
public ActionResult Recent(){
return PartialView("RecentPosts", new Posts().GetAll());
}
Nice! Código bastante enxuto e limpo. Estamos retornando uma Partial View e passando como model a listagem dos últimos posts vindas do repositório(em uma app real esse repositório seria injetado via DI ou obtido através de um SL).
A partial view
E para finalizar a tarefa temos a partial view que faz a renderização de uma listagem de posts. É um código muito simples, apliquei algum estilo CSS apenas para deixar menos feio:
@post.Body.Substring(0, 25)...</span> </div>
}
</aspnetmvc_jquery_load.controllers.post>
O comportamento de ambas as actions é igual, então devemos ter nossa view mais ou menos assim:
Exibindo imagem de progresso
Podemos facilmente colocar uma imagem de progresso dentro das nossas divs e deixar que o load mesmo se encarregue de remover o progresso.Batando para isso incluir dentro da nossa div uma imagem de progresso:
Tratamento de erros
A function load também possui formas de tratar erros que ocorram no request. Para isso é preciso informar um callback recebendo alguns parâmetros.Vou deixar essa tarefa como lição de casa para vocês, mas na documentação da função load há exemplos de como fazer isso: http://api.jquery.com/load/.
Resumo
Assim como vimos com o método ajax do Jquery e com o formulário utilizando Hijax é muito simples também fazer a carga direta de HTML do servidor e colocar dentro de um elemento em nossa página.É possível também passar seletores para a função load, onde você seleciona apenas parte do conteúdo HTML retornado, é bem interessante.Baixe ou visualize todo código aqui: 
https://github.com/vquaiato/ASP.NET-MVC-Jquery-LoadAbraços,Vinicius Quaiato.
