AJAX y ASP.NET MVC

Danae Aguilar Guzmán MCT, MS, MCTS, MCP

danaeaguilar@gmail.com

Requests AJAX con jQuery

Cuando hacemos requests con AJAX esrecomendado considerar el caso en que el usuario no tenga habilitado Javascript

1. Creamos los controladores, vistas y vistas parciales

2. Agregamos el placeholder dondemostraremos la vista parcial

@Html.ActionLink("Mostrar datos", "AccionMostrar", null, new { id = "linkMostrar" }) <div id="resultado"></div>

Requests AJAX con jQuery

3. Agregamos un archivo JavaScript quecargará la vista parcial

Se cargará usando load

Usamos preventDefault para evitar el flujonormal del link.

$(document).ready(function () { $('#linkMostrar').click(function (event) { event.preventDefault(); var url = $(this).attr('href'); $('#resultado').load(url); }); });

Requests AJAX con jQuery

4. Agregamos el JavaScript a nuestra página:

@section scripts { <script type="text/javascript" src="@Url.Content("~/scripts/EjemploAjax.js")"> </script> }

Requests AJAX con jQuery

5. Validamos si el request se hizo medianteAJAX:

Si quisieramos recargar la página hacemos un redirect:

return RedirectToAction("Index");

public ActionResult MostrarDatos() { if (Request.IsAjaxRequest()) { return PartialView(); } return View(); }

Formularios con AJAX

Creamos un formulario:

Especificamos la acción del controller con Url.Action

<form method="post" id="comentarios" action="@Url.Action("AregarComentario")"> @Html.TextArea("Comentario", new { rows = 5, cols = 50 }) <br /> <input value="Agregar Comentario" type="submit" /> </form>

Formularios con AJAX

El script:

Con preventDefault() evitamos el flujo de submit del formulario.Obtenemos la accion del atributo action del formulario.Usamos $.post para invocar la acción con AJAX

$(document).ready(function () { $('#comentarios').submit(function (event) { event.preventDefault(); var datos = $(this).serialize(); var url = $(this).attr('action'); $.post(url, datos, function (response) { $('#comentarios').append(response); }); }); });

Formularios con AJAX

En el controller:

Tendremos la acción POST que recibirá los datos y mostrará una vista parcial

[HttpPost] public ActionResult AddComment(string comentario) { _comentarios.Add(comentario); if (Request.IsAjaxRequest()) { ViewBag.Comentario = comentario; return PartialView(); } return RedirectToAction("Index"); }

ASP.NET MVC Ajax helpers

• Ajax.ActionLink, Crea un hyperlink AJAX a una acción del controller

• Ajax.RouteLink, Similar a Ajax.ActionLink, pero genera un link a una ruta

• Ajax.BeginForm, Crea un formulario que envía sus datos usando Ajax

• Ajax.BeginRouteForm, Similar a Ajax.BeginForm, pero crea un formulario que envía sus datos a una ruta

• Ajax.GlobalizationScript, Crea un elementoscript HTML que referencia un script con información de cultura

• Ajax.JavaScriptStringEncode, Realiza encoding a una cadena para que pueda usarseseguramente dentro JavaScript

ASP.NET MVC Ajax helpers

Los Helper pueden usar jQuery o Microsoft Ajax

ASP.NET MVC Ajax helpers

Ajax.ActionLink

@section head { <script type="text/javascript" src="@Url.Content( "~/scripts/jquery.unobtrusive-ajax.js")"> </script> } @Ajax.ActionLink("Mostrar Datos", "MostrarDatos", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "divDatos" }) <div id="divDatos"></div>

ASP.NET MVC Ajax helpers

Ajax.BeginForm

<ul id="comments"></ul> @using (Ajax.BeginForm("AgregarComentario", new AjaxOptions { UpdateTargetId = "ulComentarios", InsertionMode = InsertionMode.InsertAfter })) { @Html.TextArea("comentario", new { rows = 5, cols = 50 }) <br /> <input type="submit" value="Agregar Comentario" /> }

Ajax con JSON

Retornamos JSON:

public ActionResult Details(int id) { Speaker speaker = _repositorio.BuscarSpeaker(id); return Json(speaker, JsonRequestBehavior.AllowGet); }

Ajax con JSON

El script invocará con AJAX, podemos usar$.getJSON:

$(document).ready(function () { $("ul.speakers a").click(function (e) { e.preventDefault(); $("#indicator").show(); var url = $(this).attr('href'); $.getJSON(url, null, function (speaker) { $("#indicator").hide(); alert(speaker.Nombre); }); }); });

Ajax con JSON

En caso de no soportar scripts en el cliente, retornaremos una vista en vez de JSON

public ActionResult Details(int id) { var speaker = _repositorio.BuscarSpeaker(id); if (Request.IsAjaxRequest()) { return Json(speaker, JsonRequestBehavior.AllowGet); } return View(speaker); }

Ajax con JSON

Implementando un atributo AceptaAjaxAttribute

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)] public class AceptaAjaxAttribute : ActionMethodSelectorAttribute { public override bool IsValidForRequest( ControllerContext controllerContext, MethodInfo methodInfo) { return controllerContext.HttpContext .Request.IsAjaxRequest(); } }

Ajax con JSON

Usando el atributo AceptaAjaxAttribute

[AceptaAjax] public ActionResult Detalles(int id) { var speaker = _repositorio.BuscarSpeaker(id); return Json(speaker, JsonRequestBehavior.AllowGet); } [ActionName("Detalles")] public ActionResult Detalles_SinAjax(int id) { var speaker = _repositorio.BuscarSpeaker(id); return View(speaker); }

Ajax con JSON

Autocompletar

Necesitaremos jQueryUI

$(document).ready(function () { var autocompleteUrl = '@Url.Action("Buscar")'; $("input#ciudad").autocomplete({ source: autocompleteUrl, minLength: 2, select: function (event, ui) { alert("Selected " + ui.item.label); } }); });