Con este proyecto he querido poner en practica las llamadas AJAX, y que mejor manera de hacerlo que creando unos Tabs que no requieran de postback. Primero hemos creado el proyecto basico MVC con login. Este viene por defecto con dos tabs “About” y “Home”, si pruebas clickear ahora son link normales y realizan un postback, los vamos a tunear cambiandolos por AJAX links. Para que veais que no hago trampas añadiré un campo llamado “current time field”.
Vamos por partes, abrimos _Layout.cshtml (que es como las master pages en ASP.Net) para realizar multples cambios.
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!-- Jquery Latest version -->
<script src="@Url.Content( "~/Scripts/jquery-1.5.1.min.js" )" type="text/javascript"></script>
<script src="@Url.Content( "~/Scripts/jquery.unobtrusive-ajax.js" )" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="currentTime">Page Rendered: @DateTime.Now.ToLongTimeString() <br /></div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Ajax.ActionLink( "Home", "Home", new AjaxOptions { UpdateTargetId = "ajaxBody" } ) </li>
<li>@Ajax.ActionLink( "About", "About", new AjaxOptions { UpdateTargetId = "ajaxBody" } ) </li>
<li>@Ajax.ActionLink( "Contact Us","Contact", new AjaxOptions { UpdateTargetId = "ajaxBody" } ) </li>
<li>@Html.ActionLink( "Home No Ajax", "Index", "Home")</li>
</ul>
</div>
</div>
<div id="main">
<!-- Recipient for the result of the Ajax call -->
<div id="ajaxBody">
@RenderBody()
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
- Inicializamos los links con el jquery necesario
- Creamos el campo current time field en lo alto de la pagina para que se vea bien
- Creamos un div “ajax body” en la parte inferior
- Cambiamos Html.ActionLink por Ajax.ActionLink
Veamos el archivo HomeController.cs
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return PartialView();
}
public ActionResult Contact()
{
return PartialView();
}
public ActionResult Home()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return PartialView();
}
}
El Home controller es casi el mismo, lo unico que hemos añadido han sido un par de pestañas mas, todas son creadas como PartialView, y siempre devolvemos PartialView porque sino se renderizaria la pagina completa dentro del div “ajaxRcipient”. Finalmente he creado las pestañas necesarias, todas con Ajax excepto uno para que se vea la diferencia.
Realizar llamadas Ajax con MVC es limpio y facil, no hay necesidad de crear un web services simplemente llamamos a métodos dentro del controlador, esta es una de las grandes ventajas de MVC frente a ASP.Net webforms, aunque no todo en MVC es bueno, si que tiene algunas mejoras con respecto a webforms.
[...] desarrollar este ejemplo vamos a usar el proyecto de Ajax Tabs MVC ejemplo, no os preocupeis que en el zip adjunto los dos proyectos. Crear un test es facil y si nos [...]
hola amigazo como esta podrias volver a subir el proyecto ejemplo porfa