Creazione di un'applicazione ASP.NET MVC4 con EF e WebAPI

ASP.NET MVC ha fatto molta strada da quando "The Gu" ha buttato giù alcune idee durante una corsa in aereo a una conferenza nel 2007. In poco meno di quattro anni, ASP.NET MVC ha visto la sua quarta versione e fornisce agli sviluppatori un ambiente che facilita lo sviluppo, snellisce i processi e promuove modelli moderni.

Gettarsi

Saltare a destra è uno dei modi migliori per farsi un'idea della nuova tecnologia. Andiamo avanti e tuffiamoci nel codice!

Impostare

Userò Visual Studio 2012 Release Candidate, che è disponibile qui. Raccomando anche di scaricare SQL Server 2012 perché il nuovo Management Studio è un miglioramento molto necessario rispetto alle versioni precedenti.

Una volta che VS 2012 è attivo e funzionante, andare avanti e creare un nuovo progetto. Vai a File -> Nuovo progetto e scegli un Applicazione Internet. Non è un modello perfetto, ma porterà a termine il lavoro.

Nota: il codice per questa applicazione demo si trova in un repository Github. Non passerò attraverso ogni singolo pezzo di codice in questa app, ma avrai una buona conoscenza di un'applicazione MVC4 alla fine di questo tutorial.

Entity Framework

Userò il codice Entity Framework (EF) First per il modello di dati. Codice EF In primo luogo ci consente di generare tabelle di database con nient'altro che alcuni oggetti Plain Old CLR (POCO). Inoltre, EF ci consente di utilizzare LINQ per le entità e le espressioni Lambda, semplificando la ricerca e l'emissione di comandi. Una vittoria vincere!

La nostra applicazione sarà un sito di recensioni per la revisione di ... cose. Pertanto, il modello di dati deve incorporare tutti i bit e i pezzi necessari per una singola revisione. Inizieremo con una classe chiamata Revisione. Scrivi la seguente classe nel suo file nel file Modelli directory:

 // Review.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Review.cs Revisione della classe pubblica public int Id get; impostato;  [Obbligatorio] stringa pubblica Contenuto get; impostato;  [Obbligatorio] [StringLength (128)] public string Argomento get; impostato;  [Obbligatorio] stringa pubblica Email get; impostato;  [Obbligatorio] bool pubblico IsAnonymous get; impostato;  public int CategoryId get; impostato;  Categoria categoria pubblica virtuale get; impostato;  IEnumerable virtuale pubblico Commenti ottieni; impostato; 

Il Revisione la classe ha è Id (la chiave primaria), il Soddisfare proprietà per archiviare la recensione, a Argomento come un nome di ristorante (o qualsiasi nome di un'organizzazione), a E-mail proprietà e un IsAnonymous flag per indicare se il revisore è anonimo. Il CategoryId e il Categoria le proprietà creano una relazione di chiave esterna per legare una revisione a a Categoria (es .: Medici, Dentisti, ecc.). E l'ultimo è una raccolta di Commento oggetti.

Ora scrivi il Commento classe. Ancora una volta, aggiungi la nuova classe al Modelli directory:

 // Comment.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Comment.cs public class Commento public int Id get; impostato;  [Obbligatorio] stringa pubblica Contenuto get; impostato;  [Obbligatorio] stringa pubblica Email get; impostato;  [Obbligatorio] bool pubblico IsAnonymous get; impostato;  public int ReviewId get; impostato;  recensione pubblica recensione get; impostato; 

La classe di commento ha un Id proprietà per la chiave primaria, Soddisfare del commento, a E-mail proprietà e un IsAnonymous bandiera per gli utenti. Poi ci sono ReviewId e Revisione proprietà per creare una relazione chiave esterna tra commenti e recensioni.

L'ultimo è il Categoria classe. Ecco il suo codice:

 // Category.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Category.cs public class Categoria public int Id get; impostato;  [Obbligatorio] [StringLength (32)] stringa pubblica Nome get; impostato; 

Questa classe è auto-esplicativa.

Probabilmente hai notato un uso esteso del [Necessario] annotazione dei dati nelle classi precedenti. Questi designano un campo non annullabile nel database e forniscono la convalida in un secondo momento lungo la strada. Se lo desideri, puoi anche creare i tuoi attributi di convalida personalizzati. Inoltre [Necessario], abbiamo anche usato il virtuale parola chiave per alcune proprietà; tali proprietà indicano relazioni con le chiavi esterne con altre tabelle.

Per creare le tabelle corrispondenti per queste classi, dovrai creare un DbContext classe. Il codice seguente crea una classe di contesto chiamata ReviewedContext:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContext.cs public class ReviewedContext: DbContext public DbSet Recensioni ottieni; impostato;  DbSet pubblico Categorie ottieni; impostato;  DbSet pubblico Commenti ottieni; impostato;  public ReviewedContext () Configuration.ProxyCreationEnabled = false; 

Codice EF In primo luogo ci consente di generare tabelle di database con nient'altro che alcuni oggetti Plain Old CLR (POCO).

Ogni proprietà in questa classe corrisponde a una tabella durante la generazione del database. Il Configuration.ProxyCreationEnabled = false; fa in modo che le entità vengano recuperate come oggetti delle rispettive classi anziché proxy, rendendo molto più facile il debugging.

Successivamente, impostiamo un inizializzatore del database. Un inizializzatore assicura che il database sia creato correttamente quando il modello di dati subisce modifiche. Senza un inizializzatore, dovrai cancellare manualmente il database se apporti una modifica a uno dei tuoi POCO. Esistono diversi tipi di inizializzatori tra cui scegliere: DropCreateDatabaseAlways e DropCreateDatabaseIfModelChanges. I nomi sono auto esplicativi. Quello che useremo è DropCreateDatabaseIfModelChanges.

Il DropCreateDatabaseAlways e DropCreateDatabaseIfModelChanges Gli inizializzatori hanno un effetto collaterale: rilasciano le tabelle (e quindi i dati) nel database quando la struttura del modello cambia. Ma EF Code First fornisce un terzo modo per generare database: migrazioni. Questa nuova funzione tiene traccia delle modifiche al database e non perde i dati man mano che le classi POCO cambiano.

Ecco il codice per il nostro inizializzatore:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContextInitializer.cs // http://slipsum.com/ public class ReviewedContextInitializer: DropCreateDatabaseIfModelChanges protected override void Seed (contesto ReviewedContext) // Usa il contesto per inizializzare il db. 

Il ReviewedContextInitializer la classe ha la precedenza su Seed () metodo. Questo ci dà la possibilità di riempire il nostro database con alcuni dati di test. Ora, dobbiamo visitare il global.asax file e aggiungere la seguente riga al file Application_Start () metodo:

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

Creiamo alcuni repository per il recupero dei dati dal database, e andremo avanti e imposteremo dependency injection (DI) con Ninject. Se non sai esattamente cosa sono DI o Inversion of Control (IoC), prenditi un momento per leggere questo articolo.

Fondamentalmente, l'idea di iniezione di dipendenza è a iniettare una dipendenza concreta in una classe, in contrasto con la codifica hard della classe per dipendere dalla dipendenza concreta. In altre parole, è un disaccoppiamento di una classe concreta da un'altra. Se è ancora chiaro come fango, diamo un'occhiata a un breve esempio:

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

Questo codice crea una classe chiamata foo. Dipende dalla funzionalità di un oggetto di tipo Bar, e il Bar l'oggetto è creato all'interno del foo classe. Questo può essere difficile da mantenere e unit test perché:

• foo e Bar sono strettamente accoppiati. Di conseguenza, la manutenzione è meno che ideale.
• foo dipende da una specifica implementazione di Bar, rendere difficile il test dell'unità.

Questo codice può essere migliorato con poche modifiche. Dai un'occhiata alla revisione foo classe:

 classe pubblica Foo private IBar _bar; public Foo (barra IBar) _bar = bar; 

In poco meno di quattro anni, ASP.NET MVC ha visto la sua quarta versione ...

Ora il foo la classe non dipende da una specifica implementazione di Bar. Invece, un oggetto di una classe che implementa il IBar l'interfaccia è fornita a foo tramite il costruttore di quest'ultimo. Questo approccio migliora notevolmente la manutenibilità, consentendoci anche di iniettare qualsiasi IBar oggetto - rendendo più facile testare il nostro codice unitario.

Con questa breve descrizione fuori mano, facciamo in modo che Ninject sia attivo e funzionante. Avvia la console di Gestione pacchetti ed esegui Installa-pacchetto Ninject.MVC3. Questo aggiungerà Ninject al nostro progetto.

Il primo repository che creeremo è il ReviewsRepository, e implementerà il IReviewRepository interfaccia. Ecco l'interfaccia:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Abstract/IReviewRepository.cs interfaccia pubblica IReviewRepository Review Get (int id); IQueryable Prendi tutto(); Rivedi Aggiungi (Rivedi recensione); Aggiorna recensione (recensione recensione); void Delete (int reviewId); IEnumerable GetByCategory (categoria categoria); IEnumerable GetReviewComments (int id); 

Questa interfaccia garantisce che i nostri repository di recensioni forniscano le operazioni CRUD di base. Abbiamo anche l'utilità di recuperare le recensioni da una categoria specifica, oltre a recuperare i commenti per una determinata recensione. Ora scriviamo una classe concreta che implementa questa interfaccia:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Repos/ReviewRepository.cs ReviewRepository classe pubblica: IReviewRepository privato ReviewedContext _db get; impostato;  public ReviewRepository (): this (new ReviewedContext ())  public ReviewRepository (ReviewedContext db) _db = db;  public Review Get (int id) return _db.Reviews.SingleOrDefault (r => r.Id == id);  IQueryable pubblico GetAll () return _db.Reviews;  recensione pubblica Aggiungi (Revisione) _db.Reviews.Add (recensione); _db.SaveChanges (); recensione di ritorno;  Aggiornamento recensione pubblica (Revisione) _db.Entry (review) .State = EntityState.Modified; _db.SaveChanges (); recensione di ritorno;  public void Delete (int reviewId) var review = Get (reviewId); _db.Reviews.Remove (recensione);  IEnumerable pubblico GetByCategory (categoria Categoria) return _db.Reviews.Where (r => r.CategoryId == category.Id);  IEnumerable pubblico GetReviewComments (int id) return _db.Comments.Where (c => c.ReviewId == id); 

WebAPI è un framework MVC che possiamo usare per creare facilmente un'API RESTful ...

Questo repository si basa su a ReviewedContext oggetto che è memorizzato come variabile di classe. Ciò ci consente di utilizzare LINQ in qualsiasi metodo del repository, facilitando l'interazione con il database.

WebAPI ha una bella funzionalità che ci consente di aggiungere il nostro framework DI. Questa funzione va oltre lo scopo di questo tutorial, quindi assicurati di leggere questo articolo per ottenere questa impostazione.

Uno dei luoghi più importanti per il nostro codice è il App_Start cartella, che contiene un file chiamato NinjectCommonWeb.cs (l'installazione di Ninject aggiunge automaticamente questo file a App_Start). Questo file contiene una classe statica chiamata NinjectWebCommon, e ha un metodo chiamato RegisterServices (). In questo metodo, aggiungi il seguente codice:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/NinjectWebCommon.cs kernel.Bind().A(); kernel.Bind().A(); kernel.Bind().A(); GlobalConfiguration.Configuration.DependencyResolver = new NinjectResolver (kernel);

Le prime tre istruzioni collegano un'interfaccia a un'implementazione concreta dell'interfaccia e la quarta riga imposta la DI per WebAPI (la funzionalità trattata nell'articolo precedente).

WebAPI

Creiamo ora i controller per l'API. WebAPI è un framework MVC che possiamo usare per creare facilmente un servizio RESTful e può essere eseguito all'interno di un'applicazione MVC4, nel proprio progetto, oppure può essere ospitato autonomamente al di fuori di IIS. Ma non è tutto; ha molte altre caratteristiche, come ad esempio: negoziazione del contenuto (per serializzare automaticamente i dati in qualsiasi formato richiesto), modello di associazione, convalida e molti altri.

Prima dobbiamo creare un endpoint con WebAPI e lo facciamo creando una classe che eredita ApiController. Iniziare con questo è piuttosto facile. Visual Studio 2012 ha una nuova funzionalità che crea un nuovo controller parzialmente scaffoldato.

Questo creerà una classe controller con alcuni metodi già definiti per te. Ecco un esempio:

 // GET api / default1 public IEnumerable Get () return new string [] "value1", "value2";  // GET api / default1 / 5 stringa pubblica Get (int id) return "value";  // POST api / default1 public void Post (valore stringa)  // PUT api / default1 / 5 public void Put (int id, valore stringa)  // DELETE api / default1 / 5 public void Elimina (int id ) 

I nomi dei metodi corrispondono al verbo HTTP che rappresentano. Ora creeremo il ReviewsController classe. Il codice un po 'lungo, ma piuttosto semplice.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/ReviewsController.cs public class RecensioniController: ApiController private ICategoriesRepository _categoriesRepository get; impostato;  IReviewRepository privato _reviewRepository get; impostato;  public ReviewsController (IReviewRepository reviewRepository, ICategoriesRepository categoriesRepository) _reviewRepository = reviewRepository; _categoriesRepository = categoriesRepository;  // GET api / esamina pubblico IEnumerable Get () var reviews = _reviewRepository.GetAll (); restituire recensioni;  // 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 / revision pubblico HttpResponseMessage Post (Revisione recensione) var response = Request.CreateResponse (HttpStatusCode.Created, review); // Ottieni l'url per recuperare la recensione appena creata. response.Headers.Location = new Uri (Request.RequestUri, string.Format ("recensioni / 0", review.Id)); _reviewRepository.Add (recensione); risposta di ritorno;  // 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 / recensioni / categorie / categoria pubblico HttpResponseMessage GetByCategory (categoria stringa) var findCategory = _categoriesRepository.GetByName (categoria); if (findCategory == null) return Request.CreateResponse (HttpStatusCode.NotFound);  return Request.CreateResponse (HttpStatusCode.OK, _reviewRepository.GetByCategory (findCategory));  // GET api / recensioni / commenti / id pubblico HttpResponseMessage GetReviewComments (int id) var reviewComments = _reviewRepository.GetReviewComments (id); if (reviewComments == null) return Request.CreateResponse (HttpStatusCode.NotFound);  return Request.CreateResponse (HttpStatusCode.OK, reviewComments); 

Questo codice utilizza IReviewRepository e ICategoriesRepository oggetti per eseguire l'azione appropriata (es: recupero di dati per richieste GET, aggiunta di dati con richieste POST, ecc.). Questi respositori sono iniettati con Ninject via Costruttore di iniezione.

Se non hai ancora Fiddler, prendilo subito - anche se non sei uno sviluppatore .NET.

Si noti che alcuni metodi restituiscono diversi tipi di dati. WebAPI ci dà la possibilità di restituire un tipo di dati non stringa (come IEnumerable) e serializzerà l'oggetto da inviare nella risposta del server. Puoi anche usare il nuovo HttpResonseMessage classe per restituire un codice di stato HTTP specifico insieme ai dati restituiti. Un modo per creare un HttpResponseMessage l'oggetto è chiamando Request.CreateResponse (responseCode, data).

Possiamo testare correttamente il nostro progetto WebAPI con uno strumento come Fiddler2. Se non hai ancora Fiddler, prendilo subito - anche se non sei uno sviluppatore .NET. Fiddler è un fantastico strumento di debug HTTP. Una volta eseguito Fiddler, fai clic su RequestBuilder e inserisci l'URL dell'API che desideri testare. Quindi scegli il tipo di richiesta appropriato. Se si effettua una richiesta POST, assicurarsi e specificare a Content-Type: application / json intestazione e quindi inserire una struttura JSON valida nel corpo della richiesta. L'immagine seguente mostra una richiesta JSON POST non elaborata su API / recensioni URL:

Quando invii la richiesta, vedrai qualcosa come la seguente immagine:

Si noti che il codice di stato della richiesta POST è un 201. WebAPI fa un ottimo lavoro nel restituire il codice di stato corretto per un servizio web RESTfull. Divertiti con Fiddler2, è uno strumento fantastico!

Con WebAPI, è possibile specificare il routing per i controller (proprio come MVC). In MVC4, a RouteConfig.cs il file viene aggiunto al App_Start cartella. Le rotte per un progetto WebAPI sono proprio come le rotte MVC.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/RouteConfig.cs routes.MapHttpRoute (nome: "GetReviewComments", routeTemplate: "api / recensioni / commenti / id", valori predefiniti : new id = RouteParameter.Optional, controller = "Recensioni", action = "GetReviewComments"); routes.MapHttpRoute (nome: "GetByCategories", routeTemplate: "api / recensioni / categorie / categoria", valori predefiniti: new category = RouteParameter.Optional, controller = "Recensioni", action = "GetByCategory"); routes.MapHttpRoute (nome: "DefaultApi", routeTemplate: "api / controller / id", valori predefiniti: new id = RouteParameter.Optional);

Il DefaultApi il percorso viene generato automaticamente da Visual Studio. Le altre due rotte sono personalizzate e mappano a metodi specifici sul controller Reviews. Ci sono molti articoli e tutorial che forniscono buone informazioni sul routing. Assicurati di controllare questo fuori.

MVC4

Ciò copre molto di ciò che WebAPI ha da offrire. Successivamente, scriveremo alcuni metodi per visualizzare i dati. Consumeremo l'API in un po ', ma per ora utilizzeremo i repository nel nostro HomeController. UN HomeController è stato creato da Visual Studio; modifichiamo i suoi metodi per visualizzare i dati. Per prima cosa, prendiamo una lista delle categorie in Indice metodo.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs private ICategoriesRepository _categoriesRepository get; impostato;  IReviewRepository privato _reviewRepository get; impostato;  HomeController pubblico (ICategoriesRepository categorieRepository, IReviewRepositoryRepositoryRepository) _categoriesRepository = categoriesRepository; _reviewRepository = reviewRepository;  public ActionResult Index () var categories = _categoriesRepository.GetAll (); return View (categorie); 

Qui, continuiamo a usare DI accettando i repository come parametri per il HomeController costruttore. Ninject inserisce automaticamente le classi concrete appropriate per noi. Successivamente, aggiungiamo del codice al Indice visualizzare per visualizzare le categorie:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Index.cshtml @model IEnumerable 
Scegli una categoria:
 
 @foreach (categoria var nel modello)  
 @Nome della categoria 
  

Questo genera un elenco di categorie su cui gli utenti possono fare clic. Ora aggiungi un nuovo metodo a HomeController che recupera a Revisione. Chiameremo questo metodo Recensioni, mostrato qui:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs Public ActionResult Reviews (stringa id) List recensioni = nuova lista(); if (! string.IsNullOrWhiteSpace (id)) recensioni = _reviewRepository.GetByCategory (_categoriesRepository.GetByName (id)). ToList ();  else reviews = _reviewRepository.GetAll (). ToList ();  foreach (var review nelle recensioni) var comments = _reviewRepository.GetReviewComments (review.Id); review.Comments = comments.ToList ();  return View (recensioni); 

Perché esiste già un percorso per / Controller / action / id, puoi usare un URL come Home / Recensioni / Medici. Il motore di routing passerà "Medici" come id parametro al Recensioni metodo. Noi usiamo il id come categoria e recuperare tutte le recensioni associate a quella categoria. Se non viene fornita alcuna categoria, tuttavia, è semplice recuperare tutte le recensioni nel database. Una volta che abbiamo tutte le recensioni, passiamo la lista di revisione alla vista. Diamo un'occhiata alla vista in questo momento:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Reviews.cshtml 
 @foreach (var review in Model)  
@ review.Topic
 
 @ review.Content 
 var hasComments = review.Comments.Count> 0? "is-comments": null; 
 @foreach (var comment in review.Comments)  
 @ (! comment.IsAnonymous? string.Format ("0 dice", comment.Email): "") 
@ comment.Content
 
  
  

Questo codice utilizza una nuova funzionalità di MVC4. Il

elementi classe l'attributo non apparirà nell'HTML se hasComments è nullo. Leggi di più su questa funzione qui.

JavaScript

Nessuna app web moderna è completa senza JavaScript e la useremo per consumare il nostro servizio WebAPI. Useremo Backbone.js per questo; quindi avanti e scarica Backbone e la sua dipendenza Underscore. Inserire i file JavaScript nel Script elenco.

Trarremo vantaggio da un'altra nuova funzionalità MVC4 chiamata script bundling. Nel App_Start cartella, troverai il BundleConfig.cs file. In questo file, puoi configurare MVC4 per unire insieme i file JavaScript. Aprilo e aggiungi un nuovo pacchetto, come questo:

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

Quindi nel /Views/Shared/_Layout.cshtml file, aggiungi quanto segue nella parte inferiore del corpo della pagina:

 @ Scripts.Render ( "~ / fasci / spina dorsale")

Questo raggrupperà i tuoi script se la tua applicazione è in modalità di debug, o li lascerà da solo con questa disattivata.

Il codice MVC4 che abbiamo scritto per recuperare l'elenco di revisioni è un ottimo modo per visualizzarli, ma tutta la nuova hawtness utilizza Ajax. Rifacciamo il codice per utilizzare Backbone.js. Attraverso JavaScript, recupereremo le viste in modo asincrono dopo il caricamento della pagina. Crea un nuovo file nel Script cartella chiamata home.js. Aggiungi il seguente codice a quel file:

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

Questi sono i modelli di dati JavaScript, ciascuno corrispondente a un URL per recuperare i dati dal servizio WebAPI. Ora scriviamo 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););

Questa vista è per l'intero elenco di recensioni. Quando la collezione è fetch () il metodo è chiamato, innesca il reset evento e poi chiama render (). Il terzo parametro è passato a sopra() il metodo è lo scopo o cosa Questo sarà nel render () richiama. Nel render () metodo, chiama la raccolta ogni() metodo, passando il renderItem () metodo. Il renderItem () il metodo verrà chiamato su ogni elemento della raccolta, generando un nuovo ReviewItem per ogni recensione.

Il codice per ReviewItem segue:

 var ReviewItem = Backbone.View.extend (events: 'click su': 'getComments', tagName: 'li', initialize: function () this.template = _.template ($ ('# reviewsTemplate') .html ()); this.collection = new Comments (); this.collection.on ('reset', this.loadComments, this); this.render ();, rendering: 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 = nuovo CommentItem (model: comment); self.comments.append (item.el);); this. $ el.find ('a'). hide (););

WebAPI è un'aggiunta fantastica allo stack ASP.NET; una ricca API basata su REST non è mai stata così semplice.

Il ReviewItem la vista è responsabile del rendering di ogni singola recensione. Il inizializzare() il metodo compila il modello utilizzato per visualizzare ogni revisione; questo modello risiede in a

Notare il @ script di sezioni nel codice sopra. Questa non è una nuova funzionalità di MVC4, ma è un ottimo strumento per il rendering di parti specifiche di JavaScript. Nel _layout.cshtml file, c'è anche a @RenderSection ("scripts", obbligatorio: false) che rende la sezione definita nella vista. Il

Questo è il modello. Per usarlo, fai questo:

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

Ci sono molti framework di template JavaScript disponibili sul Web: Handlebars.js, mustache.js e Hogan.js sono abbastanza popolari. Assicurati di controllarli e scegli quello che funziona per te.

Conclusione

WebAPI è un'aggiunta fantastica allo stack ASP.NET; una ricca API basata su REST non è mai stata così semplice. Ci sono molte nuove fantastiche funzionalità in MVC4. Assicurati e dai un'occhiata! Come ho già detto, il codice per questo esempio è disponibile su Github. Forchetta!

Codice