Buenas, hoy voy a empezar con la parte de JQuery, Unobtrusive AJAX, para ello vamos a realizar un método en el controlador que nos devuelva un string, después vamos a implementar dos opciones para utilizar este controlador desde el cliente, bueno listo de introducción y vamos a empezar.
Continuando con el trabajo anterior (abajo les dejo el link de los archivos zip de los proyectos de todos los POST anteriores) vamos a abrir nuestro controlador de la Home ósea el archivo HomeController.cs que se encuentra en la carpeta Controllers y agregamos este código.
public string CalcEdad(string fechaNacimiento)
{
// Inicializo las variables
DateTime actual = DateTime.Now;
DateTime fecha = Convert.ToDateTime(fechaNacimiento);
int edad = 0;
// Consulto si el parámetro es mayor y es correcto
if (fecha <= actual && fecha != null)
{
edad = actual.Year - fecha.Year;
}
else
{
return "La fecha seleccionada es superior a la fecha actual";
}
// Consulto si ya cumplió años
if (new DateTime(actual.Year, fecha.Month, fecha.Day) < actual) edad--;
return "Tu tienes " + edad + " años";
}
Vamos a nuestra vista Index y para el primer ejemplo agregamos la siguiente línea.
<script src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
Agregamos este otro código.
<div align="center">
@using ((Ajax.BeginForm("CalcEdad",
new AjaxOptions()
{
HttpMethod = "Post",
UpdateTargetId = "result"
})))
{
<label> Fecha de nacimiento:</label>
<input type="text" name="fechaNacimiento" id="fechaNacimiento" />
<input type="submit" value="Calcular Edad" />
}
<hr />
<div id="result"></div>
</div>
Con este código estamos indicando que vamos a utilizar el método CalcEdad del controlador y que vamos a utilizar el modo POST para pasar los parámetros y el id del contenedor que queremos que actualice, pero si pueden notar hemos agregado un js que se llama jquery.unobtrusive-ajax.js, bueno esta parte se merece una explicación más detallada que paso a comentar:
Unobtrusive Ajax en MVC3: La idea es evitar mezclar código script con código HTML, con Unobtrusive Ajax vamos a poder separar el código javascript del código HTML, pero ustedes dirán que eso ya se hace, pero acá abajo les hago un ejemplo para que vean a que me refiero cuando digo esto:
<h2>Normal Ajax</h2>
<% using (Ajax.BeginForm("PostData", new AjaxOptions() { HttpMethod="Post", UpdateTargetId="datadiv"})) { %>
<label for="name">Name: </label>
<input type="text" name="name" id="name"/>
<input type="submit" value="Send" />
<% } %>
<hr />
Aquí irá el resultado: <p />
<div id="datadiv">
</div>
El código de arriba en MVC 2 daría como resultado este código de abajo:
<h2>Normal Ajax</h2>
<form action="/Home/PostData" method="post"
onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'Post', updateTargetId: 'datadiv' });">
<label for="name">Name: </label>
<input type="text" name="name" id="name"/>
<input type="submit" value="Send" />
</form>
<hr />
Aquí irá el resultado: <p />
<div id="datadiv">
</div>
Pero en MVC 3 da este otro resultado:
<h2>Normal Ajax</h2>
<form action="/Home/PostData"
data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace"
data-ajax-update="#datadiv" method="post">
<label for="name">Name: </label>
<input type="text" name="name" id="name"/>
<input type="submit" value="Send" />
</form>
<hr />
Aquí irá el resultado: <p />
<div id="datadiv">
</div>
Si pueden ver no hay nada de javascript mesclado, es mucho mas legible y prolijo.
Para utilizar Unobtrusive AJAX tiene que estar habilitada en el web.config.
<configuration>
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
</configuration>
De todos modos la pueden habilitar en la vista que ustedes cada vez que la utilicen con la siguiente linea.
<% HtmlHelper.UnobtrusiveJavaScriptEnabled = true; %>
Bien sabiendo esto vamos a continuar, ahora podemos ejecutar nuestro proyecto.
Si pueden ver hemos ejecutado un metodo desde nuestra vista con Unobtrusive AJAX, bien ahora vamos hacer el mismo ejemplo pero con JQuery, la libreria de JQuery no la tenemos que insertar ya que nuestro proyecto la tiene por default en el template, así que lo único que hacemos es insertar el siguiente código.
JQuery
<hr />
<div align="center">
<script type="text/javascript"> 1:
2: $(document).ready(function () { 3: $("#btnCalc").click(function () { 4: $.ajax(
5: { 6: url: '/Home/CalcEdad',
7: type: "POST",
8: data: { fechaNacimiento: document.getElementById("fechaNacimiento2").value }, 9: success: function (data) { 10: $("#result2").html(data); 11: }
12: });
13: });
14: });
15:
16:
</script>
<label> Fecha de nacimiento:</label>
<input type="text" name="fechaNacimiento2" id="fechaNacimiento2" />
<input type="submit" id="btnCalc" value="Calcular Edad" />
<hr />
<div id="result2"></div>
</div>
Y ahora ejecutamos nuestro proyecto y veremos que funciona igual.
Aquí dejo el link del archivo zip del proyecto de este POST.
MVC 3 con Razor - 6º POST
Y si quieren descargar los archivos de los POST anteriores vayan a este link.
MVC 3 con Razor – Archivos de todos los POST.
En resumen hoy hemos aprendido a:
Crear un metodo en un controlador.
Agregar las referencias y habilitar el Unobtrusive AJAX.
Llamar a un metodo desde Unobtrusive AJAX.
Llamar a un metodo desde JQuery.
Recomendaciones:
Introducción al desarrollo web con WebMatrix
Curso Cloud Computing - Windows Azure
Curso Cloud Computing (parte 1) – Introducción
Bueno gente hasta aquí hacemos hoy porque sino se hace muy largo de leer. Para el próximo voy a hablar de cositas de Facebook y Twitter, es bastante interesante como se trabaja en MVC 3 pero de una forma más fácil y mucho más eficiente, espero sigan investigando y nos vemos para el próximo POST Para cualquier consulta pueden dejar sus mensajes aquí o mandar me un correo electrónico a Moises.Rivas@msptechrep.com.
Subscribe