AJAX en ASP.NET MVC

1. AJAX y ASP.NET MVC
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Requests AJAX con jQuery
 Cuando hacemos requests con AJAX es
recomendado considerar el caso en que el
usuario no tenga habilitado Javascript
1. Creamos los controladores, vistas y vistas
parciales
2. Agregamos el placeholder donde
mostraremos la vista parcial
@Html.ActionLink("Mostrar datos",
"AccionMostrar", null,
new { id = "linkMostrar" })
<div id="resultado"></div>

3. Requests AJAX con jQuery
3. Agregamos un archivo JavaScript que
cargará la vista parcial
 Se cargará usando load
 Usamos preventDefault para evitar el flujo
normal del link.
$(document).ready(function () {
$('#linkMostrar').click(function (event) {
event.preventDefault();
var url = $(this).attr('href');
$('#resultado').load(url);
});
});

4. 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>
}

5. Requests AJAX con jQuery
5. Validamos si el request se hizo mediante
AJAX:
Si quisieramos recargar la página hacemos un
redirect:
return RedirectToAction("Index");
public ActionResult MostrarDatos()
{
if (Request.IsAjaxRequest())
{
return PartialView();
}
return View();
}

6. 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>

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

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

9. 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 elemento
script HTML que referencia un script con
información de cultura
• Ajax.JavaScriptStringEncode, Realiza
encoding a una cadena para que pueda usarse
seguramente dentro JavaScript

10. ASP.NET MVC Ajax helpers
Los Helper pueden usar jQuery o Microsoft
Ajax

11. 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>

12. 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" />
}

13. Ajax con JSON
Retornamos JSON:
public ActionResult Details(int id)
{
Speaker speaker =
_repositorio.BuscarSpeaker(id);
return Json(speaker,
JsonRequestBehavior.AllowGet);
}

14. 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);
});
});
});

15. 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);
}

16. 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();
}
}

17. 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);
}

18. 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);
}
});
});