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.

5 comentarios

Este ejemplo es genial!!!, muchas gracias por compartir tus conocimientos.
juank

Reply

gracias excelente aporte!

Reply

excelente, es de gran ayuda, gracias!

Reply

Waw muchisimas gracias llevaba un buen tiempo buscanco esto y funciona perfecto de nuevo gracias totales

Reply

Buen día, como hago que una vez que realizo la operacion que funciona perfecto, no renderice la pagina. que justamente para eso estoy usando este metodo.

Para no renderizar nada, ya que uso todo Jquery, entonces logro una pagina sin renderizar. !!!!

Pero cuando guarda, muestra el alert y luego renderiza.

Reply

Publicar un comentario