Upload
danae-aguilar-guzman
View
218
Download
1
Embed Size (px)
Citation preview
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); } }); });