Muchas veces utlizando Asp.Net MVC nos encontramos con la necesidad de acceder a resultados de nuestros metodos del controller, pero no queremos realizar un POST al server. Una buena opción es el llamado de JQuery utilizando la función getJson.
Vamos a llamar a un servicio que nos devuelve una definición de diccionario de una palabra en inglés.
La vista es super elemental tiene un ingreso de palabra (no estamos validando nada en este ejemplo, tampoco estamos testeando, lo cual seria un interesante posteo. Cómo testeo una llamada de AJAX?) y un botón para buscar la definición.
View
<button id="btnDefine" name="btnDefine">
Define</button>
<br />
<%= Html.TextBox("tbxWord") %>
<%= Html.TextArea("txtDefinition") %>
<div id="loading">
Loading</div>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$("#loading").hide();
$('#btnDefine').click(function() {
$("#loading").ajaxStart(function() {
$("#loading").show();
});
wordIn = $("#tbxWord").val();
$.getJSON("/Home/GetDefinition", { word: wordIn }, function(data) {
$("#txtDefinition").text(data);
});
});
$("#loading").hide();
});
});
</script>
La línea getJson tiene como parametros el ruteo del método del controller, el parámetro del método (en este caso la palabra a buscar) y una función de callback que se llamará cuando vuelve del llamado AJAX, en este caso sólo setea el testo de la definición.
Controller
public JsonResult GetDefinition(string word)
{
DictService dictionary = new DictService();
if (word == null) return null;
var result = dictionary.Define(word);
return Json(result.Definitions[0].WordDefinition, JsonRequestBehavior.AllowGet);
}
En el caso del método del controller llamado, sólo tenemos que tener en cuenta devolver un JsonReesul
y utilizar la clase Json para serializar lo que devolvemos.
Es un buen comienzo.
Estaba escuchando un podcast de HerdingCode (esto me da pie para un próximo post sobre los podcast que escucho, thanks to commute!) donde Phil Haack habla sobre Asp.Net MVC. Y aprovechando la salida del RC (Release Candidate) podemos discutir algunos temas. (Más info sobre el patrón MVC)
Ante la pregunta de cual es el elevator speech que Phil utilizaría para describir Asp.Net MVC para alguien que utiliza Asp.Net webforms, Phil contesta:
Si utilizás Webforms y estás felíz, entonces ignorá MVC. Si sos muy productivo con Webforms, MVC no va a reemplazar Webforms. Pero los beneficios de utilizar MVC son varios: nos pone nuevamente en control de nuestra aplicación (por ejemplo los controles de Webforms generan mucho markup que si no hacen lo que deseamos puede ser complicado), otro beneficio es que el patrón arquitectónico de MVC es muy bueno en lo que respecta a la separación de conceptos, lo que permite aplicaciones más mantenibles y testeables (valgan los neologismos). Temas que no estaban tan en boga en la creación de Webforms.
Un ejemplo
Una pequeña aplicación que me permite almacenar los gastos diarios (me agarró la paranoia).
El modelo lo forman categorías y gastos.
La persistencia del mismo es a través de Entity Framework (del cual no voy a empezar una discusión, porque Gus tiene muchos argumentos en contra)
Una parte del ExpenseController de ejemplo:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(FormCollection collection)
{
try
{
var expenseToCreate = new Expense();
Category category = new Category();
UpdateModel(expenseToCreate, new[]{"Date", "Amount", "Description"});
UpdateModel(category, new[]{"CategoryId"});
expenseToCreate.Category = _db.Category
.Where(cate => cate.CategoryId == category
.CategoryId).First();
_db.AddToExpense(expenseToCreate);
_db.SaveChanges();
return RedirectToAction("Index", "Home");
}
catch (Exception exep)
{
return RedirectToAction("Error");
}
}
Esta es la acción de crear un nuevo gasto. Acá y por culpa de no poder utilizar el SelecList.SelectedValue, tuve que hacer algo más rebuscado.
Por último, una parte de la View que representa el Create:
<fieldset>
<legend>Fields</legend>
<p>
<label for="Date">
Date:</label>
<%= Html.TextBox("Date") %>
<%= Html.ValidationMessage("Date", "*") %>
</p>
<p>
<label for="Amount">
Amount:</label>
<%= Html.TextBox("Amount") %>
<%= Html.ValidationMessage("Amount", "*") %>
</p>
<p>
<label for="Description">
Description:</label>
<%= Html.TextBox("Description") %>
<%= Html.ValidationMessage("Description", "*") %>
</p>
<p>
<select size="5" name="CategoryId" id="CategoryId">
<option value="0" selected="selected">Sin seleccionar categoría</option>
<% foreach (Category category in (IList)ViewData["Categories"])
{ %>
<%= "<option value='" + category.CategoryId + "'>" +
category.SmallDescription + "</option>" %>
<%} %>
</select>
<br />
<%= Html.ActionLink("Crear Categoria nueva", "Create", "Categories") %>
</p>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
En la misma se ve como resolví el tema de no poder utilizar un Helper Method de la entidad Html (como Html.ListBox o Html.DropDownList) debido al problema del SelectList.
Es un pequeño ejemplo. Se encuentran muchos en internet, no intento hacer un tutorial, pero si les interesa el código no tienen más que pedirlo.
Felicidad
Siguiendo con el concepto de Phil Haack, aquellos que no éramos felices con Asp.Net Webforms, nos encontramos con la chance de encontrar la felicidad en éste camino de desarrollo.
Como seguir
El RC tiene todavía algunos problemas, por ejemplo tuve muchos problemas queriendo utilizar un SelectList (lista para Views) y obtener el SelectedValue. Nunca lo logré y tuve que utilizar otras formas. Tal vez sea problemas que se solucionen en la versión definitiva, hay que tener en cuenta que es un proyecto (MVC) con mucho tiempo y mucha gente muy interesante y capaz atrás. Seguimos atentos.
Entradas
