ASP.NET MVC AjaxOptions: UpdateTargetId
16/02/2011
Trabalhar com forms e ajax no ASP.NET MVC é algo relativamente bastante simples, seja escrevendo o código diretamente com JQuery ou então utilizando o Ajax helper.Estes posts sobre o AjaxHelper serão bem simples e diretos. Trabalharemos com ASP.NET MVC 3.Vou assumir também que você já incluiu o JQuery e o JQuery Unobtrusive:
Criando o formulário na View
Nosso formulário será criado com a utilização do helper BeginForm:
@using (Ajax.BeginForm("AjaxAction", new AjaxOptions { UpdateTargetId = "div_nome" }
)){ @Html.TextBox("nome")<br /> @Html.TextBox("sobrenome") <input type="submit" value="ajax" />}
Notem que criamos o form passando o nome da action e um objeto do tipo AjaxOptions. AjaxOptions possui uma série de propriedades, e neste caso estamos utilizando apenas UpdateTargetId.Isto que dizer que o resultado da execução desta operação ajax deve ser colocado no elemento com id "div_nome".Nossa action AjaxAction está assim:
public ActionResult AjaxAction(string nome, string sobrenome){
var ti = new CultureInfo("pt-BR").TextInfo;
var nomeFormatado = string.Format("{
}
{
}
", ti.ToTitleCase(nome), ti.ToTitleCase(sobrenome));
return PartialView("PartialNomes", nomeFormatado);
}
Não existe nenhum segredo nessa action. Ela recebe 2 parâmetros e tudo que faz é renderizar uma Partial View com os parâmetros em capital case.Como resultado teremos uma página com um form que será executado com ajax:
É isso galera, essa é uma das maneiras de carregar dados do servidor em uma div específica utilizando o helper Ajax.BeginForm do ASP.NET MVC em conjunto com o JQuery.
Código fonte
O fonte deste e outros exemplos estão no Github: https://github.com/vquaiato/ajaxhelpersamplesAbraços,Vinicius Quaiato.
