Asp .Net MVC Ajax - Carregando conteúdo dinâmico

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.

Por Programação Pular para comentários
Asp .Net MVC Ajax - Carregando conteúdo dinâmico

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");  
}

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

<%= Html.Encode(ViewData["Message"]) %>

To learn more about ASP.NET MVC visit http://asp.net/mvc.

<%= Ajax.ActionLink("Carregar...", "TesteAjax", new AjaxOptions(){ InsertionModeInsertionMode = InsertionMode.Replace, UpdateTargetId = "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:
http://www.oficinadanet.com.br//imagens/coluna/2438/asp1.jpg

Depois de ter clicado no link:
http://www.oficinadanet.com.br//imagens/coluna/2438/asp2.jpg

Até a próxima.

Compartilhe com seus amigos:
Mais sobre: .net, asp.net, ajax
Leonardo Hofling
Leonardo Hofling Desenvolvedor - C#, Java, Swift, Object, Delphi, Php
FACEBOOK //
Quer conversar com o(a) Leonardo, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.