Desarrollando una aplicación MVC4 en ASP.NET con EF y WebAPI

() translation by (you can also view the original English article)

El MVC en ASP.NET ha recorrido un largo camino desde que "The Gu" anotó algunas ideas durante un viaje en avión a una conferencia en 2007. En poco menos de cuatro años, ASP.NET MVC ha visto su cuarta versión, y brinda a los desarrolladores un ambiente que facilita el desarrollo, agiliza los procesos y promueve los patrones modernos.

Navegando

Lanzándose es una de las mejores maneras de manejar una nueva tecnología. ¡Sigamos adelante y sumergámonos en el codec!

Configuración

Usaré Visual Studio 2012 Release Candidate, que está disponible aquí. También recomiendo descargar SQL Server 2012 porque el nuevo Management Studio es una mejora muy necesaria respecto a las versiones anteriores.

Una vez que VS 2012 esté en funcionamiento, continúa y crea un nuevo proyecto. Ve a Archivo -> Nuevo proyecto y elige una aplicación de Internet. No es una plantilla perfecta, pero hará el trabajo.

Nota: el código para esta aplicación de demostración se encuentra en un repositorio de Github. No iré a través de cada pieza de código en esta aplicación, pero al final de este tutorial comprenderás bien una aplicación MVC4.

Entity Framework

Voy a usar el código Entity Framework (EF) primero para el modelo de datos. El Código de EF Primero nos permite generar tablas de base de datos con nada más que unos pocos Objetos CLR Antiguos (POCO). Además, EF nos permite usar LINQ para Entidades y expresiones Lambda, lo que facilita la consulta y la emisión de comandos. ¡Una victoria ganada!

Nuestra aplicación será un sitio para revisar... cosas. Por lo tanto, el modelo de datos debe incorporar todos los bits y piezas necesarios para una única revisión. Comenzaremos con una clase llamada Review. Escribe la siguiente clase en tu propio archivo en el directorio Models:


// Review.cs
// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Review.cs
public class Review
{
    public int Id { get; set; }
    
    [Required]
    public string Content { get; set; }
    
    [Required]
    [StringLength(128)]
    public string Topic { get; set; }
    
    [Required]
    public string Email { get; set; }
    
    [Required]
    public bool IsAnonymous { get; set; }
    
    public int CategoryId { get; set; }
    public virtual Category Category { get; set; }
    
    public virtual IEnumerable<Comment> Comments { get; set; }
}

La clase Review tiene su ID (la clave principal), la propiedad Content para almacenar la revisión, un Topic como el nombre de un restaurante (o cualquier nombre de una organización), una propiedad Email o y una bandera IsAnonymous para indicar si el crítico es anónimo. Las propiedades CategoryId y Category crean una relación de clave externa para vincular una revisión a una categoría (p. Ej., Médicos, dentistas, etc.). Y el último es una colección de objetos Comment.

Ahora escribe la clase Comment. Una vez más, agrega la nueva clase al directorio Models:


// Comment.cs
// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Comment.cs
public class Comment
{
    public int Id { get; set; }
    
    [Required]
    public string Content { get; set; }
    
    [Required]
    public string Email { get; set; }
    
    [Required]
    public bool IsAnonymous { get; set; }

    public int ReviewId { get; set; }
    public Review Review { get; set; }
}

La clase de comentarios tiene una propiedad Id para la clave principal, el contenido 'Content' del comentario, una propiedad email y una marca de IsAnonymous para los usuarios. Luego están las propiedades ReviewId y Review para crear una relación de clave externa entre los comentarios y las revisiones.

La última es la clase Category. Aquí está su código:


// Category.cs
// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Category.cs
public class Category
{
    public int Id { get; set; }
    
    [Required]
    [StringLength(32)]
    public string Name { get; set; }
}

Esta clase se explica por sí misma.

Probablemente notaste un uso extenso de la anotación de datos [Required] en las clases anteriores. Estos designan un campo no anulable en la base de datos y proporcionan validación más adelante en el futuro. También puedes crear tus propios atributos de validación personalizados si así lo deseas. Además de [Required], también usamos la palabra clave virtual para algunas propiedades; esas propiedades significan relaciones de clave externa con otras tablas.

Para crear las tablas correspondientes para estas clases, deberás crear una clase DbContext. El siguiente código crea una clase de contexto llamada ReviewedContext:


    // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContext.cs
    public class ReviewedContext : DbContext
    {
        public DbSet<Review> Reviews { get; set; }
        public DbSet<Category> Categories { get; set; }
        public DbSet<Comment> Comments { get; set; }

        public ReviewedContext()
        {
            Configuration.ProxyCreationEnabled = false;
        }
    }

El Código de EF Primero nos permite generar tablas de base de datos con nada más que unos pocos Objetos CLR Antiguos (POCO).

Cada propiedad en esta clase corresponde a una tabla cuando se genera la base de datos. El Configuration.ProxyCreationEnabled = false; se asegura de que las entidades se recuperen como objetos de sus respectivas clases en lugar de proxies, lo que hace que la depuración sea mucho más fácil.

A continuación, configuramos un inicializador de base de datos. Un inicializador garantiza que la base de datos se crea correctamente cuando el modelo de datos sufre algún cambio. Sin un inicializador, tendrás que eliminar manualmente la base de datos si realizas un cambio en uno de tus POCO's. Hay algunos tipos diferentes de inicializadores para elegir: DropCreateDatabaseAlways y DropCreateDatabaseIfModelChanges. Los nombres se explican por sí mismos. El que vamos a utilizar es DropCreateDatabaseIfModelChanges.

Los inicializadores DropCreateDatabaseAlways y DropCreateDatabaseIfModelChanges tienen un efecto secundario: eliminan las tablas (y, por lo tanto, los datos) en la base de datos cuando cambia la estructura del modelo. Pero EF Code First proporciona una tercera forma de generar bases de datos: las migraciones. Esta nueva característica realiza un seguimiento de los cambios en la base de datos y no pierde datos a medida que cambian las clases de POCO.

Aquí está el código para nuestro inicializador:


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContextInitializer.cs
// http://slipsum.com/
public class ReviewedContextInitializer : DropCreateDatabaseIfModelChanges<ReviewedContext>
{
    protected override void Seed(ReviewedContext context)
    {
        // Use the context to seed the db.
    }
}

La clase ReviewedContextInitializer anula el método Seed(). Esto nos da la capacidad de llenar nuestra base de datos con algunos datos de prueba. Ahora, necesitamos visitar el archivo Global.asax y agregar la siguiente línea al método Application_Start():

1
2	// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Global.asax.cs
3	Database.SetInitializer(new ReviewedContextInitializer());

Vamos a crear algunos repositorios para recuperar datos de la base de datos, y luego procederemos a configurar la inyección de dependencias (DI) con Ninject. Si no sabes exactamente qué es DI o Inversión de control (IoC), tómate un momento para leer este artículo.

Básicamente, la idea de inyección de dependencia es inject una dependencia concreta en una clase, a diferencia de codificar la clase para que dependa de la dependencia concreta. En otras palabras, es un desacoplamiento de una clase concreta de otra. Si eso sigue siendo claro como lodo, veamos un breve ejemplo:


    public class Foo
    {
        private Bar _bar; 
        
        public Foo()
        {
            _bar = new Bar();
        }
    }

Este código crea una clase llamada Foo. Depende de la funcionalidad de un objeto de tipo Bar, y el objeto Bar se crea dentro de la clase Foo. Esto puede ser difícil de mantener y una prueba unitaria porque:

Foo y Bar están fuertemente acoplados. Como resultado, el mantenimiento es menos que ideal.
Foo depende de una implementación específica de Bar, lo que dificulta las pruebas unitarias.

Este código se puede mejorar con solo unas pocas modificaciones. Echa un vistazo a la clase Foo revisada:


    public class Foo
    {
        private IBar _bar;
        
        public Foo(IBar bar)
        {
            _bar = bar;
        }
    }

En poco menos de cuatro años, MVC en ASP.NET ha visto su cuarta versión...

Ahora, la clase Foo no depende de una implementación específica de Bar. En cambio, un objeto de una clase que implementa la interfaz IBar se suministra a Foo a través del constructor de este último. Este enfoque mejora en gran medida la capacidad de mantenimiento, al tiempo que nos permite inyectar cualquier objeto IBar, lo que facilita la prueba unitaria de nuestro código.

Con esa breve descripción fuera del camino, pongamos a Ninject en funcionamiento. Inicia la Consola del administrador de paquetes y ejecuta Install-Package Ninject.MVC3. Esto agregará Ninject a nuestro proyecto.

El primer repositorio que crearemos es ReviewsRepository, e implementará la interfaz IReviewRepository. Aquí está la interfaz:


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Abstract/IReviewRepository.cs
public interface IReviewRepository
{
    Review Get(int id);
    IQueryable<Review> GetAll();
    Review Add(Review review);
    Review Update(Review review);
    void Delete(int reviewId);
    IEnumerable<Review> GetByCategory(Category category);
    IEnumerable<Comment> GetReviewComments(int id);
}

Esta interfaz garantiza que nuestros repositorios de revisión proporcionen las operaciones básicas de CRUD. También obtenemos la utilidad de recuperar revisiones por una categoría específica, así como de recuperar los comentarios para una revisión determinada. Ahora escribamos una clase concreta implementando esta interfaz:


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Repos/ReviewRepository.cs
public class ReviewRepository : IReviewRepository
{
    private ReviewedContext _db { get; set; }

    public ReviewRepository()
        :this (new ReviewedContext())
    {
        
    }

    public ReviewRepository(ReviewedContext db)
    {
        _db = db;
    }

    public Review Get(int id)
    {
        return _db.Reviews.SingleOrDefault(r => r.Id == id);
    }

    public IQueryable<Review> GetAll()
    {
        return _db.Reviews;
    }

    public Review Add(Review review)
    {
        _db.Reviews.Add(review);
        _db.SaveChanges();
        return review;
    }

    public Review Update(Review review)
    {
        _db.Entry(review).State = EntityState.Modified;
        _db.SaveChanges();
        return review;
    }

    public void Delete(int reviewId)
    {
        var review = Get(reviewId);
        _db.Reviews.Remove(review);
    }

    public IEnumerable<Review> GetByCategory(Category category)
    {
        return _db.Reviews.Where(r => r.CategoryId == category.Id);
    }

    public IEnumerable<Comment> GetReviewComments(int id)
    {
        return _db.Comments.Where(c => c.ReviewId == id);
    }
}

WebAPI es un framework similar a MVC que podemos usar para crear fácilmente una API RESTful...

Este repositorio se basa en un objeto ReviewedContext que se almacena como una variable de clase. Esto nos permite usar LINQ en cualquiera de los métodos del repositorio, facilitando la interacción de la base de datos.

WebAPI tiene una buena característica que nos permite agregar nuestro propio framework DI. Esta función está fuera del alcance de este tutorial, así que asegúrate de leer este artículo para ayudarte a obtener esa configuración.

Una de las ubicaciones más importantes de nuestro código es la carpeta App_Start, que contiene un archivo llamado NinjectCommonWeb.cs (la instalación de Ninject agrega automáticamente este archivo a App_Start). Este archivo contiene una clase estática llamada NinjectWebCommon, y tiene un método llamado RegisterServices(). En este método, agrega el siguiente código:


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/NinjectWebCommon.cs
kernel.Bind<IReviewRepository>().To<ReviewRepository>();
kernel.Bind<ICategoriesRepository>().To<CategoriesRepository>();
kernel.Bind<ICommentsRepository>().To<CommentsRepository>();

GlobalConfiguration.Configuration.DependencyResolver = new NinjectResolver(kernel);

Las primeras tres declaraciones unen una interfaz a una implementación concreta de la interfaz, y la cuarta línea configura el DI para WebAPI (la característica que se trata en el artículo mencionado anteriormente).

WebAPI

Ahora vamos a crear los controladores para la API. WebAPI es un framework similar a MVC que podemos usar para crear fácilmente un servicio REST, y puede ejecutarse dentro de una aplicación MVC4, en su propio proyecto, o puede ser auto hospedado fuera de IIS. Pero eso no es todo; tiene muchas otras características, tales como: negociación de contenido (para serializar automáticamente los datos en cualquier formato que se solicite), vinculación de modelos, validación y muchas más.

Primero necesitamos crear un punto final con WebAPI, y lo hacemos creando una clase que hereda ApiController. Comenzar con esto es bastante fácil. Visual Studio 2012 tiene una nueva característica que crea un nuevo controlador parcialmente con scaffolded o Scaffolding.

Esto creará una clase de controlador con algunos métodos ya definidos para ti. Aquí hay un ejemplo:


// GET api/default1
public IEnumerable<string> Get()
{
    return new string[] { "value1", "value2" };
}

// GET api/default1/5
public string Get(int id)
{
    return "value";
}

// POST api/default1
public void Post(string value)
{
}

// PUT api/default1/5
public void Put(int id, string value)
{
}

// DELETE api/default1/5
public void Delete(int id)
{
}

Los nombres de los métodos corresponden al verbo HTTP que representan. Ahora vamos a crear la clase ReviewsController. El código es un poco largo, pero bastante sencillo.


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/ReviewsController.cs
public class ReviewsController : ApiController
{
    private ICategoriesRepository _categoriesRepository { get; set; }
    private IReviewRepository _reviewRepository { get; set; }

    public ReviewsController(IReviewRepository reviewRepository, ICategoriesRepository categoriesRepository)
    {
        _reviewRepository = reviewRepository;
        _categoriesRepository = categoriesRepository;
    }

    // GET api/review
    public IEnumerable<Review> Get()
    {
        var reviews = _reviewRepository.GetAll();
        return reviews;
    }

    // GET api/review/5
    public HttpResponseMessage Get(int id)
    {
        var category = _reviewRepository.Get(id);
        if (category == null)
        {
            return Request.CreateResponse(HttpStatusCode.NotFound);
        }
        return Request.CreateResponse(HttpStatusCode.OK, category);
    }

    // POST api/review
    public HttpResponseMessage Post(Review review)
    {
        var response = Request.CreateResponse(HttpStatusCode.Created, review);
        // Get the url to retrieve the newly created review.
        response.Headers.Location = new Uri(Request.RequestUri, string.Format("reviews/{0}", review.Id));
        _reviewRepository.Add(review);
        return response;
    }

    // PUT api/review/5
    public void Put(Review review)
    {
        _reviewRepository.Update(review);
    }

    // DELETE api/review/5
    public HttpResponseMessage Delete(int id)
    {
        _reviewRepository.Delete(id);
        return Request.CreateResponse(HttpStatusCode.NoContent);
    }

    // GET api/reviews/categories/{category}
    public HttpResponseMessage GetByCategory(string category)
    {

        var findCategory = _categoriesRepository.GetByName(category);
        if (findCategory == null)
        {
            return Request.CreateResponse(HttpStatusCode.NotFound);
        }
        return Request.CreateResponse(HttpStatusCode.OK,_reviewRepository.GetByCategory(findCategory));
    }

    // GET api/reviews/comments/{id}
    public HttpResponseMessage GetReviewComments(int id)
    {

        var reviewComments = _reviewRepository.GetReviewComments(id);
        if (reviewComments == null)
        {
            return Request.CreateResponse(HttpStatusCode.NotFound);
        }
        return Request.CreateResponse(HttpStatusCode.OK, reviewComments);
    }
}

Este código utiliza los objetos IReviewRepository e ICategoriesRepository para realizar la acción apropiada (por ejemplo: recuperar datos para solicitudes GET, agregar datos con solicitudes POST, etc.). Estos respositorios se inyectan con Ninject a través del Constructor Injection.

Si aún no tienes Fiddler, obténlo ahora, incluso si no eres un desarrollador de .NET.

Ten en cuenta que algunos de los métodos devuelven diferentes tipos de datos. WebAPI nos da la capacidad de devolver un tipo de datos no de cadena (como IEnumerable<Review>), y serializará el objeto para enviar la respuesta del servidor. También puedes usar la nueva clase HttpResonseMessage para devolver un código de estado HTTP específico junto con los datos devueltos. Una forma de crear un objeto HttpResponseMessage es llamando a Request.CreateResponse(responseCode, data).

Podemos probar adecuadamente nuestro proyecto WebAPI con una herramienta como Fiddler2. Si aún no tienes Fiddler, obténlo ahora, incluso si no eres un desarrollador de .NET. Fiddler es una fantástica herramienta de depuración HTTP. Una vez que estés ejecutando Fiddler, haz clic en RequestBuilder e ingresa la URL de la API que deseas probar. Luego elige el tipo de solicitud apropiado. Si realizas una solicitud POST, asegúrate de especificar un encabezado Content-Type: application/json y luego coloca una estructura JSON válida en el cuerpo de la solicitud. La siguiente imagen muestra una solicitud JSON POST sin procesar a la URL api/reviews:

Cuando envíes la solicitud, verás algo como la siguiente imagen:

Ten en cuenta que el código de estado de las solicitudes POST es un 201. WebAPI hace un gran trabajo al devolver el código de estado correcto para un servicio web RESTful. Diviértete con Fiddler2, ¡es una herramienta fantástica!

Con WebAPI, puedes especificar el enrutamiento para los controladores (como MVC). En MVC4, se agrega un archivo RouteConfig.cs a la carpeta App_Start. Las rutas para un proyecto WebAPI son como las rutas MVC.


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/RouteConfig.cs
routes.MapHttpRoute(
    name: "GetReviewComments",
    routeTemplate: "api/reviews/comments/{id}",
    defaults: new { id = RouteParameter.Optional, controller = "Reviews", action = "GetReviewComments" }
);

routes.MapHttpRoute(
    name: "GetByCategories",
    routeTemplate: "api/reviews/categories/{category}",
    defaults: new { category = RouteParameter.Optional, controller = "Reviews", action = "GetByCategory" }
);

routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

La ruta DefaultApi es generada automáticamente por Visual Studio. Las otras dos rutas son personalizadas y se asignan a métodos específicos en el controlador Reviews. Hay muchos artículos y tutoriales que proporcionan buena información sobre el enrutamiento. Asegúrate de echarle un vistazo.

MVC4

Eso cubre mucho de lo que WebAPI tiene para ofrecer. A continuación, vamos a escribir algunos métodos para mostrar los datos. Consumiremos la API en un momento, pero por ahora usaremos los repositorios en nuestro HomeController. Un HomeController fue creado por Visual Studio; Solo modifiquemos sus métodos para mostrar los datos. Primero, obtengamos una lista de las categorías en el método Index.


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs
private ICategoriesRepository _categoriesRepository { get; set; }
private IReviewRepository _reviewRepository { get; set; }

public HomeController(ICategoriesRepository categoriesRepository, IReviewRepository reviewRepository)
{
    _categoriesRepository = categoriesRepository;
    _reviewRepository = reviewRepository;
}

public ActionResult Index()
{
    var categories = _categoriesRepository.GetAll();
    return View(categories);
}

Aquí, continuamos usando DI aceptando los repositorios como parámetros para el constructor HomeController. Ninject inyecta automáticamente las clases concretas adecuadas para nosotros. A continuación, agreguemos algo de código a la vista Index para mostrar las categorías:


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Index.cshtml
@model IEnumerable<Reviewed.Models.Category>

<h3>Pick a Category:</h3>
<ul class="round">
    @foreach(var category in Model)
    {
        <li>
        <a href="@Url.Action("Reviews", new { id = @category.Name} )">@category.Name</a>
        </li>
    }
</ul>

Esto genera una lista de categorías en las que los usuarios pueden hacer clic. Ahora agrega un nuevo método a HomeController que recupera un Review. Llamaremos a este método Reviews, tal como se muestra aquí:


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs
public ActionResult Reviews(string id)
{
    List<Review> reviews = new List<Review>();
    if (!string.IsNullOrWhiteSpace(id))
    {
        reviews = _reviewRepository.GetByCategory(_categoriesRepository.GetByName(id)).ToList();
    }
    else
    {
        reviews = _reviewRepository.GetAll().ToList();
    }

    foreach (var review in reviews)
    {
        var comments = _reviewRepository.GetReviewComments(review.Id);
        review.Comments = comments.ToList();
    }
    return View(reviews);
}

Debido a que ya existe una ruta para /{controller}/{action}/{id}, puedes usar una URL como Home/Reviews/Doctors. El motor de enrutamiento pasará "Doctors" como el parámetro id al método Reviews. Usamos el ID como la categoría y recuperamos todas las revisiones asociadas con esa categoría. Sin embargo, si no se proporciona una categoría, simplemente recuperamos todas las revisiones en la base de datos. Una vez que tenemos todas las revisiones, pasamos la lista de revisión a la vista. Veamos ahora la vista:


// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Reviews.cshtml
<div class="reviews">
@foreach(var review in Model)
{
    <h3>@review.Topic</h3>
    <p>
        @review.Content
    </p>
    
    var hasComments = review.Comments.Count > 0 ? "is-comments" : null;
    
    <ul class="@hasComments">
        @foreach(var comment in review.Comments)
        {
            <li>
                <strong>@(!comment.IsAnonymous ? string.Format("{0} says,", comment.Email) : "")</strong>
                <blockquote>@comment.Content</blockquote>
            </li>
        }
    </ul>
}
</div>

Este código utiliza una nueva característica de MVC4. El atributo de clase del elemento <ul> no aparecerá en el HTML si hasComments es nulo. Lee más sobre esta característica aquí.

JavaScript

Ninguna aplicación web moderna está completa sin JavaScript, y la usaremos para consumir nuestro servicio WebAPI. Usaremos Backbone.js para esto; así que, adelante y descarga Backbone y su dependencia Underscore. Coloca los archivos de JavaScript en el directorio Scripts.

Aprovecharemos otra nueva característica de MVC4 llamada agrupación de scripts. En la carpeta App_Start, encontrarás el archivo BundleConfig.cs. En este archivo, puedes configurar MVC4 para agrupar archivos JavaScript juntos. Ábrelo y agrega un nuevo paquete, como este:

1
2	bundles.Add(new ScriptBundle("~/bundles/backbone").Include(
3	"~/Scripts/underscore*",
4	"~/Scripts/backbone*"));

Luego, en el archivo /Views/Shared/_Layout.cshtml, agrega lo siguiente en la parte inferior del body de la página:

1
2	@Scripts.Render("~/bundles/backbone")

Esto incluirá tus scripts si tu aplicación está en modo de depuración, o los dejará solos con la opción desactivada.

El código MVC4 que escribimos para recuperar la lista de revisión es una buena forma de mostrarlos, pero todo lo nuevo está usando Ajax. Así que vamos a refactorizar el código para utilizar Backbone.js. A través de JavaScript, recuperaremos las vistas de forma asíncrona después de que la página se haya cargado. Crea un nuevo archivo en la carpeta Scripts llamada home.js. Agrega el siguiente código a ese archivo:


var Review = Backbone.Model.extend();
var Reviews = Backbone.Collection.extend({
    model: Review,
    url: '/api/reviews'
});
var Comment = Backbone.Model.extend({});
var Comments = Backbone.Collection.extend({
    model: Comment,
    url: '/api/reviews/comments/'
});

Estos son los modelos de datos de JavaScript, cada uno correspondiente a una URL para recuperar datos del servicio WebAPI. Ahora vamos a escribir la vista:


var ListReviews = Backbone.View.extend({
    el: '.reviews',
    initialize: function() {
        this.collection.on('reset', this.render, this);
        this.collection.fetch();
    },
    render: function() {
        this.collection.each(this.renderItem, this);
    },
    renderItem: function(model) {
        var view = new ReviewItem({
            model: model
        });
        this.$el.append(view.el);
    }
});

Esta vista es para la lista completa de comentarios. Cuando se llama al método fetch() de la colección, se activa el evento reset y luego se llama a render(). El tercer parámetro pasado al método on() es el alcance, o lo que será this en la devolución de la llamada render(). En el método render(), llama al método each() de la colección, pasando el método renderItem(). Se llamará al método renderItem() en cada elemento de la colección, generando un nuevo ReviewItem para cada revisión.

El código para ReviewItem sigue:


var ReviewItem = Backbone.View.extend({
    events: {
        'click a': 'getComments'
    },
    tagName: 'li',
    initialize: function () {
        
        this.template = _.template($('#reviewsTemplate').html());
        this.collection = new Comments();
        this.collection.on('reset', this.loadComments, this);
        this.render();
    },
    render: function () {
        var html = this.template(this.model.toJSON());
        this.$el.append(html);
    },
    getComments: function () {
        this.collection.fetch({
            data: {
                Id: this.model.get('Id')
            }
        });
    },
    loadComments: function () {
        var self = this,
            item;
        this.comments = this.$el.find('ul');
        this.collection.each(function (comment) {
            item = new CommentItem({
                model: comment
            });
            self.comments.append(item.el);
        });
        
        this.$el.find('a').hide();
    }
});

WebAPI es una fantástica adición a la pila ASP.NET; una API basada en REST rica en características nunca ha sido tan fácil.

La vista ReviewItem es responsable de representar cada revisión individual. El método initialize() compila la plantilla utilizada para mostrar cada revisión; esta plantilla reside en un elemento <script>. Backbone saca la plantilla del elemento <script/> y la combina con la revisión.

También se configura un controlador de eventos clic para cargar los comentarios de cada revisión. Cuando se hace clic en el enlace, se llama al método getComments(), que busca los comentarios pasando un id al servicio WebAPI. El método fetch() es simplemente una abstracción del método $.ajax de jQuery, por lo que los parámetros Ajax normales, como data, se pueden pasar en la llamada fetch(). Por último, el método loadComments() se activará y creará una nueva vista CommentItem para cada comentario devuelto. El tagName en esta vista garantiza que la vista se crea con un <li> como su propiedad $el.

A continuación, veamos la vista CommentItem:


var CommentItem = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
        this.template = _.template($('#commentsTemplate').html());
        this.render();
    },
    render: function () {
        var html = this.template(this.model.toJSON());
        this.$el.html(html);
    }
    
});

Esta es una vista simple que muestra cada comentario. Ahora vamos a modificar la vista Review.cshtml de la siguiente manera:


@model IEnumerable<Reviewed.Models.Review>

@section scripts {
    <script type="text/javascript" src="/Scripts/home.js"></script>
}

<div class="reviews">
    <ul></ul>
</div>

<script type="text/html" id="reviewsTemplate">

    <h3><%= Topic %></h3>
    <p>
        <%= Content %>
    </p>
    
    <a href="#comments">Load Comments</a>
    <ul></ul>

</script>

<script type="text/html" id="commentsTemplate">
<li>
    <strong><%= !IsAnonymous ? Email + " says," : "" %></strong>
    <blockquote><%= Content %></blockquote>
</li>       
</script>

Observa los scripts de @section en el código anterior. Esta no es una característica nueva de MVC4, pero es una gran herramienta para representar partes específicas de JavaScript. En el archivo _layout.cshtml, también hay un @RenderSection("scripts", required: false) que representa la sección definida en la vista. Los elementos <script> son plantillas Underscore para representar contenido. Siguen una sintaxis de Ruby-esque, y cualquier cosa dentro de <% %> se evalúa como una declaración. Cualquier cosa dentro de <% =%> se enviará al HTML. Los bucles y las declaraciones condicionales se pueden utilizar de esta manera:

1
2	<ul>
3	<script type="text/html" id="template">
4	<% for (var i = 0; i < list.length; i++) { %>
5	<li><%= list[i] %></li>
6	<% } %>
7	</ul>
8
9	<% if (someCondition) { %>
10	<%= output %>
11	<% } %>
12	</script>

Esa es la plantilla. Para usarlo, haz esto:


var template = _.template($('#template').html());
var html = template({
    someCondition: true,
    output: 'hello world',
    list: ['foo', 'bar', 'bam']
});

Hay muchos frameworks de plantillas JavaScript disponibles en la Web: Handlebars.js, mustache.js y Hogan.js son muy populares. Asegúrate de revisarlos y elige el que funcione para ti.

Conclusión

WebAPI es una fantástica adición a la pila ASP.NET; una API basada en REST rica en características nunca ha sido tan fácil. Hay muchas nuevas características en MVC4. ¡Asegúrate de revisarlos! Como mencioné anteriormente, el código para este ejemplo está disponible en Github. ¡Tenlo!

1
2	// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Repos/ReviewRepository.cs
3	public class ReviewRepository : IReviewRepository
4	{
5	private ReviewedContext _db { get; set; }
6
7	public ReviewRepository()
8	:this (new ReviewedContext())
9	{
10
11	}
12
13	public ReviewRepository(ReviewedContext db)
14	{
15	_db = db;
16	}
17
18	public Review Get(int id)
19	{
20	return _db.Reviews.SingleOrDefault(r => r.Id == id);
21	}
22
23	public IQueryable<Review> GetAll()
24	{
25	return _db.Reviews;
26	}
27
28	public Review Add(Review review)
29	{
30	_db.Reviews.Add(review);
31	_db.SaveChanges();
32	return review;
33	}
34
35	public Review Update(Review review)
36	{
37	_db.Entry(review).State = EntityState.Modified;
38	_db.SaveChanges();
39	return review;
40	}
41
42	public void Delete(int reviewId)
43	{
44	var review = Get(reviewId);
45	_db.Reviews.Remove(review);
46	}
47
48	public IEnumerable<Review> GetByCategory(Category category)
49	{
50	return _db.Reviews.Where(r => r.CategoryId == category.Id);
51	}
52
53	public IEnumerable<Comment> GetReviewComments(int id)
54	{
55	return _db.Comments.Where(c => c.ReviewId == id);
56	}
57	}

1
2	// https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/ReviewsController.cs
3	public class ReviewsController : ApiController
4	{
5	private ICategoriesRepository _categoriesRepository { get; set; }
6	private IReviewRepository _reviewRepository { get; set; }
7
8	public ReviewsController(IReviewRepository reviewRepository, ICategoriesRepository categoriesRepository)
9	{
10	_reviewRepository = reviewRepository;
11	_categoriesRepository = categoriesRepository;
12	}
13
14	// GET api/review
15	public IEnumerable<Review> Get()
16	{
17	var reviews = _reviewRepository.GetAll();
18	return reviews;
19	}
20
21	// GET api/review/5
22	public HttpResponseMessage Get(int id)
23	{
24	var category = _reviewRepository.Get(id);
25	if (category == null)
26	{
27	return Request.CreateResponse(HttpStatusCode.NotFound);
28	}
29	return Request.CreateResponse(HttpStatusCode.OK, category);
30	}
31
32	// POST api/review
33	public HttpResponseMessage Post(Review review)
34	{
35	var response = Request.CreateResponse(HttpStatusCode.Created, review);
36	// Get the url to retrieve the newly created review.
37	response.Headers.Location = new Uri(Request.RequestUri, string.Format("reviews/{0}", review.Id));
38	_reviewRepository.Add(review);
39	return response;
40	}
41
42	// PUT api/review/5
43	public void Put(Review review)
44	{
45	_reviewRepository.Update(review);
46	}
47
48	// DELETE api/review/5
49	public HttpResponseMessage Delete(int id)
50	{
51	_reviewRepository.Delete(id);
52	return Request.CreateResponse(HttpStatusCode.NoContent);
53	}
54
55	// GET api/reviews/categories/{category}
56	public HttpResponseMessage GetByCategory(string category)
57	{
58
59	var findCategory = _categoriesRepository.GetByName(category);
60	if (findCategory == null)
61	{
62	return Request.CreateResponse(HttpStatusCode.NotFound);
63	}
64	return Request.CreateResponse(HttpStatusCode.OK,_reviewRepository.GetByCategory(findCategory));
65	}
66
67	// GET api/reviews/comments/{id}
68	public HttpResponseMessage GetReviewComments(int id)
69	{
70
71	var reviewComments = _reviewRepository.GetReviewComments(id);
72	if (reviewComments == null)
73	{
74	return Request.CreateResponse(HttpStatusCode.NotFound);
75	}
76	return Request.CreateResponse(HttpStatusCode.OK, reviewComments);
77	}
78	}