ASP.NET MVC y JQuery con JSON

Hola a todos, hoy veremos como jugarnos con JQuery y ASP.NET MVC para realizar tareas asincrónicas y que recibamos un resultado en JSON.

Antes que nada nos debemos asegurar que tenemos instalado las siguientes herramientas:

• Visual Studio 2010 o Visual Web Developer 2010 Express
• ASP.MVC 3.0 que se lo pueden bajar de http://www.asp.net/mvc
• Entity Framework 4.1 http://www.microsoft.com/download/en/details.aspx?id=26825

Ya con las herramientas instaladas, procedemos a crear un proyecto en ASP.NET MVC para la versión 3 del framework. Para nuestro ejemplo crearemos un pequeño programa que muestre una lista con tareas, luego agregaremos a la Base de Datos las tareas que más nos guste a través de un botón.

De tal forma que agregamos a nuestra aplicación una clase llamada Task, que tendrá la siguiente estructura:

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ExampleJSON.Models
{
 public class Task
 {
  public int taskId {get; set;}
  public string taskName {get; set;}

  public Task()
  {
  }

  public Task(string name)
  {
   taskName=name;
  }
 }
}

Luego debemos crear el acceso a la Base de Datos, que lo haremos a través de Code-First, creando una clase llamada ExampleJSONContext, que es de la siguiente manera:

 
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System;

namespace ExampleJSON.Models
{
 public class ExampleJSONContext:DbContext
 {
  public DbSetTask> Tasks { get; set; }
 }
}

Con eso ya estaría nuestra Base de Datos (si existiera algún error con la conexión, sugiero que vean este post, donde se muestra paso a paso como realizar la conexión a la Base de Datos), ahora nuestro siguiente paso es habilitar JQuery para que podamos realizar las llamadas asincrónicas, para lo cual agregamos el siguiente código a nuestro témplate (por defecto _Layout):

 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Nuestro siguiente paso es crear un controlador que nos permita interactuar con nuestro modelo, que tenga el nombre “TaskController”:

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ExampleJSON.Models;
 
namespace ExampleJSON.Controllers
{
 public class TaskController:Controller
 {
  private ExampleJSONContext context = new ExampleJSONContext();
  //
  //GET:/Task/
  public JsonResult CreateTask(string taskName)
  {
   try
   {
    context.Tasks.Add(newTask(taskName));
    context.SaveChanges();
    return Json("AlmacenadoExitoso",JsonRequestBehavior.AllowGet);
   }
   catch
   {
    return Json("AlmacenadoFallido",JsonRequestBehavior.AllowGet);
   }
  }
 }
}

Ahora solo falta una vista desde donde podamos agregar nuestras tareas, para lo cual nos vamos a la vista home, que trae por defecto la plantilla de ASP.NET MVC y ponemos el siguiente código:

 
@model IEnumerable<ExampleJSON.Models.Task>
@{
 ViewBag.Title="HomePage";
}

<h2>@ViewBag.Message</h2>

<input type="text" id="taskName", name="taskName"/>
<button type="button" onclick="addTask()">Agregar</button>

<script type="text/javascript">
function addTask(){
var name=document.getElementById("taskName").value;
$.post(
"/Task/CreateTask",
 {taskName:name},
 function(json){
  alert(json);
 },"json"
);
}
</script>

<br/>
<table>
 <tr>
  <th>Id</th>
  <th>Name</th>
 </tr>
 @foreach(variteminModel)
 {
  <tr>
   <td>@item.taskId</td>
   <td>@item.taskName</td>
  </tr>

 }
</table>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

Luego modificamos un poco nuestro código del controlador home, para que funcione todo:

 
private ExampleJSONContext context = new ExampleJSONContext(); 
public ActionResult Index() 
{ 
          ViewBag.Message="ASP.NETMVC+JQuery"; 
          return View(context.Tasks); 
}

Con eso ya tendríamos a nuestra aplicación funcionando y guardando nuestras tareas en la Base de Datos como se puede apreciar en esta captura de pantalla:

La parte principal de nuestra aplicación, está en este sector de código:

 
<script type="text/javascript">
function addTask(){
var name=document.getElementById("taskName").value;
$.post(
"/Task/CreateTask",
 {taskName:name},
 function(json){
  alert(json);
 },"json"
);
}
</script>

Donde se llama a través de JQuery con el método $.post a nuestro método de la aplicación MVC y donde el servidor nos devuelve un resultado JSON. Muchos de los que hayan usado JQuery se preguntaran por que no he usado el método $.getJSON, y el motivo es que se genera un error con el navegador IE, por que almacena el resultado de nuestra primera consulta en cache y luego devuelve el mismo resultado almacenado en cache sin llamar al método del servidor.

Bueno espero que les sirva este post.