Construirea unei aplicații MVC4 ASP.NET cu EF și WebAPI

ASP.NET MVC a parcurs un drum lung de când "The Gu" a notat câteva idei în timpul unei călătorii cu avionul la o conferință din 2007. În doar patru ani, ASP.NET MVC a văzut cea de-a patra versiune și oferă dezvoltatorilor un mediu care ușurează dezvoltarea, simplifică procesele și promovează modele moderne.

Scufundare in

Jumping dreapta este una dintre cele mai bune moduri de a obține un mâner de noi tehnologii. Hai să mergem înainte și să ne aruncăm cu capul în cod!

Înființat

Voi folosi Visual Studio 2012 Release Candidate, care este disponibil aici. De asemenea, vă recomandăm să descărcați SQL Server 2012 deoarece noul Management Studio este o îmbunătățire mult mai necesară față de versiunile anterioare.

Odată ce VS 2012 este în desfășurare, continuați și creați un nou proiect. Mergi la Fișier -> Proiect nou și alegeți un Aplicație Internet. Nu este un șablon perfect, dar va face treaba.

Notă: codul pentru această aplicație demo se află într-un replică Github. Nu voi trece prin fiecare bucată de cod în această aplicație, dar veți avea o bună înțelegere a unei aplicații MVC4 la sfârșitul acestui tutorial.

Cadrul entităților

Voi folosi codul Entity Framework (EF) pentru modelul de date. Codul EF ne permite să generăm tabele de baze de date cu nimic mai mult decât câteva obiecte obișnuite CLR vechi (POCO). În plus, EF ne permite să folosim LINQ la expresii Entities și Lambda, facilitând interogarea și emiterea comenzilor. O victorie câștigătoare!

Cererea noastră va fi un site de recenzie pentru revizuirea ... chestii. Prin urmare, modelul de date trebuie să includă toate fragmentele necesare pentru o singură recenzie. Vom începe cu o clasă chemată Revizuire. Scrieți următoarea clasă în fișierul propriu în modele director:

 // Review.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Review.cs Revizuirea clasei publice public int Id get; a stabilit;  [Necesar] șir public Conținut get; a stabilit;  [Obligatoriu] [StringLength (128)] șir public Topic get; a stabilit;  [Necesar] șir public Email get; a stabilit;  [Necesar] bool public IsAnonymous get; a stabilit;  public int CategoriaId get; a stabilit;  public virtual Categorie Categorie get; a stabilit;  public IEnumerable virtual Comentariile get; a stabilit; 

Revizuire clasa are id-ul (cheia primară), Conţinut proprietate pentru a stoca recenzia, a Subiect cum ar fi numele unui restaurant (sau orice nume al unei organizații), un E-mail proprietate, și un IsAnonymous steag pentru a indica dacă recenzorul este anonim. categoryID si Categorie proprietățile creează o relație cheie străină pentru a lega o revizuire la o Categorie (de exemplu: medici, stomatologi etc.). Și ultimul este o colecție de cometariu obiecte.

Acum, scrieți cometariu clasă. Încă o dată, adăugați noua clasă la modele director:

 // Comment.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Comment.cs clasă publică Comentariu public int Id get; a stabilit;  [Necesar] șir public Conținut get; a stabilit;  [Necesar] șir public Email get; a stabilit;  [Necesar] bool public IsAnonymous get; a stabilit;  public int ReviewId get; a stabilit;  recenzie publică de opinie get; a stabilit; 

Clasa de comentarii are un id-ul proprietate pentru cheia primară, Conţinut a comentariului, a E-mail proprietate, și un IsAnonymous pentru utilizatori. Apoi sunt ReviewId și Revizuire proprietăți pentru a crea o relație cheie străină între comentarii și recenzii.

Ultimul este Categorie clasă. Iată codul său:

 // Categorie.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Category.cs clasa publica Categorie public int Id get; a stabilit;  [Necesar] [StringLength (32)] șir public Numele get; a stabilit; 

Această clasă este auto-explicativă.

Probabil ați observat utilizarea extensivă a [Necesar] adnotări de date în clasele de mai sus. Acestea desemnează un câmp non-nullabil în baza de date și oferă validarea mai târziu pe drum. De asemenea, puteți crea propriile atribute de validare personalizate, dacă doriți. Pe lângă [Necesar], am folosit de asemenea virtual cuvânt cheie pentru unele proprietăți; aceste proprietăți semnifică relații cheie străine cu alte tabele.

Pentru a crea tabelele corespunzătoare pentru aceste clase, va trebui să creați o DbContext clasă. Următorul cod creează o clasă de context numită ReviewedContext:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContext.cs Clasă publică revizuităContext: DbContext public DbSet Recenzii a lua; a stabilit;  public DbSet Categorii get; a stabilit;  public DbSet Comentariile get; a stabilit;  publicul revizuitContext () Configuration.ProxyCreationEnabled = false; 

Codul EF ne permite să generăm tabele de baze de date cu nimic mai mult decât câteva obiecte obișnuite CLR vechi (POCO).

Fiecare proprietate din această clasă corespunde unui tabel atunci când se generează baza de date. Configuration.ProxyCreationEnabled = false; asigură că entitățile sunt preluate ca obiecte din clasele respective în loc de proxy-uri - făcând depanarea mult mai ușor.

Apoi, am creat un inițializator de bază de date. Un inițializator asigură că baza de date este creată corect atunci când modelul de date suferă modificări. Fără un inițializator, va trebui să ștergeți manual baza de date dacă faceți o schimbare la unul dintre POCO-urile dvs. Există câteva tipuri diferite de inițializatoare din care puteți alege: DropCreateDatabaseAlways și DropCreateDatabaseIfModelChanges. Numele sunt explicative. Cel pe care îl vom folosi este DropCreateDatabaseIfModelChanges.

DropCreateDatabaseAlways și DropCreateDatabaseIfModelChanges inițializatorii au un efect secundar: scot tabelele (și astfel datele) în baza de date atunci când structura modelului se modifică. Dar Codul EF oferă mai întâi oa treia modalitate de a genera baze de date: migraţii. Această caracteristică nouă urmărește modificările aduse bazei de date și nu pierde date pe măsură ce se schimbă clasele POCO.

Iată codul pentru inițializatorul nostru:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContextInitializer.cs // http://slipsum.com/ public class ReviewedContextInitializer: DropCreateDatabaseIfModelChanges override protected void Seed (context reviewedContext) // Folosiți contextul pentru a însemna db. 

ReviewedContextInitializer clasa suprascrie Seed () metodă. Acest lucru ne oferă posibilitatea de a umple baza de date cu câteva date de testare. Acum, trebuie să vizităm Global.asax fișier și adăugați următoarea linie la Application_Start () metodă:

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

Să creăm niște depozitări pentru recuperarea datelor din baza de date și vom continua și vom instala injectarea de dependență (DI) cu Ninject. Dacă nu știți exact ce înseamnă DI sau Inversion of Control (IoC), faceți puțin timp să citiți acest articol.

Practic, ideea de injectare a dependenței este de a injecta o dependență concretă într-o clasă, spre deosebire de codarea greu a clasei de a fi dependentă de dependența concretă. Cu alte cuvinte, este o decuplare a unei clase concrete de la alta. Dacă aceasta este încă clară ca noroi, să examinăm un scurt exemplu:

 clasa publică Foo private Bar _bar; public Foo () _bar = Bar nou (); 

Acest cod creează o clasă numită foo. Aceasta depinde de funcționalitatea unui obiect de tip Bar, si Bar obiect este creat în cadrul foo clasă. Acest lucru poate fi dificil de intretinut si testul unitar deoarece:

• foo și Bar sunt strâns cuplate. Ca urmare, întreținerea este mai puțin decât ideală.
• foo este dependentă de o implementare specifică a Bar, făcând dificilă testarea unității.

Acest cod poate fi îmbunătățit cu doar câteva modificări. Uitați-vă la revizuit foo clasă:

 clasa publica Foo private IBar _bar; public Foo (bar IBar) _bar = bar; 

În doar patru ani, ASP.NET MVC și-a văzut cea de-a patra ediție ...

Acum foo clasa nu depinde de o implementare specifică a Bar. În schimb, un obiect al unei clase de implementare a Ibar interfața este furnizată foo prin constructorul acestuia. Această abordare îmbunătățește foarte mult mentenabilitatea, permițându-ne, de asemenea, să injectăm orice Ibar obiect - ceea ce face mai ușor unitatea de testare codul nostru.

Cu o scurtă descriere atentă, hai să mergem la Ninge. Activați Consola Manager de pachete și executați Instalați-Pachetul Ninject.MVC3. Acest lucru va adăuga Ninject la proiectul nostru.

Primul depozit pe care îl vom crea este ReviewsRepository, și va implementa IReviewRepository interfață. Iată interfața:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Abstract/IReviewRepository.cs interfață publică IReviewRepository Review Get (int id); IQueryable Ia tot(); Examinați Adăugați (Revizuire recenzie); Actualizare revizuire (revizuire recenzie); void Șterge (int reviewId); IEnumerable GetByCategory (Categorie categorie); IEnumerable Comenzile GetReview (int id); 

Această interfață asigură că depozitele noastre de recenzii furnizează operațiunile CRUD de bază. Avem, de asemenea, utilitatea de a prelua recenzii de la o anumită categorie, precum și de a recupera comentariile pentru o anumită recenzie. Acum, să scriem o clasă concretă care implementează această interfață:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Repos/ReviewRepository.cs clasă publică ReviewRepository: IReviewRepository private ReviewedContext _db get; a stabilit;  publicReviewRepository (): acest (noul ReviewedContext ())  Revista de opinii publice (ReviewedContext db) _db = db;  public Revista Obțineți (int id) returnați _db.Reviews.SingleOrDefault (r => r.Id == id);  public IQueryable GetAll () return _db.Reviews;  public Review Adăugați (recenzie de opinie) _db.Reviews.Add (recenzie); _db.SaveChanges (); revizuirea returnării;  Actualizare publică de opinie (revizuire recenzie) _db.Entry (revizuire) .State = EntityState.Modified; _db.SaveChanges (); revizuirea returnării;  public void Șterge (int reviewId) var review = Get (reviewId); _db.Reviews.Remove (revizuire);  public IEnumerable GetByCategory (Categorie categorie) întoarcere _db.Reviews.Where (r => r.CategoryId == category.Id);  public IEnumerable Comenzile GetReview (int id) returnați _db.Comments.Where (c => c.ReviewId == id); 

WebAPI este un cadru asemănător MVC pe care îl putem folosi pentru a crea cu ușurință un API RESTful ...

Acest depozit se bazează pe ReviewedContext obiect care este stocat ca variabilă de clasă. Acest lucru ne permite să folosim LINQ în oricare dintre metodele repozitorului, facilitând interacțiunea bazei de date.

WebAPI are o caracteristică plăcută care ne permite să adăugăm propriul cadru DI. Această caracteristică este dincolo de sfera de aplicare a acestui tutorial, așa că asigurați-vă că ați citit acest articol pentru a ajuta la obținerea acestei configurații.

Una dintre cele mai importante locații pentru codul nostru este App_Start , care conține un fișier numit NinjectCommonWeb.cs (instalarea programului Ninject adaugă automat acest fișier la App_Start). Acest fișier conține o clasă statică numită NinjectWebCommon, și are o metodă numită RegisterServices (). În această metodă, adăugați următorul cod:

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

Primele trei declarații leagă o interfață la o implementare concretă a interfeței, iar a patra linie stabilește DI pentru WebAPI (caracteristica acoperită în articolul menționat mai sus).

WebAPI

Să creăm acum controlerele pentru API. WebAPI este un cadru de tip MVC pe care îl putem folosi pentru a crea cu ușurință un serviciu RESTful și poate rula în interiorul unei aplicații MVC4, în propriul său proiect sau poate fi găzduit în afara IIS. Dar asta nu este tot; are multe alte caracteristici, cum ar fi: negocierea conținutului (pentru a serializa automat datele în orice format este solicitat), modelul de legare, validarea și multe altele.

Mai întâi trebuie să creăm un punct final cu WebAPI și facem asta creând o clasă care moșteneste ApiController. Noțiuni de bază cu acest lucru este destul de ușor. Visual Studio 2012 are o caracteristică nouă care creează un controler nou, parțial schele.

Aceasta va crea o clasă de controler cu câteva metode deja definite pentru dvs. Iată un exemplu:

 // GET api / default1 public IEnumerable Obțineți () returnați șirul nou [] "value1", "value2";  // GET api / default1 / 5 șir public Get (int id) return "value";  // POST api / default1 public void Post (valoare șir)  // PUT api / default1 / 5 public void Puneți (int id, valoare șir)  // DELETE api / default1 / ) 

Numele de metode corespund verbului HTTP pe care îl reprezintă. Vom crea acum ReviewsController clasă. Codul un pic lung, dar destul de simplu.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/ReviewsController.cs clasă publică ReviewsController: ApiController private ICategoriesRepository _categoriesRepository get; a stabilit;  privat IReviewRepository _reviewRepository get; a stabilit;  public ReviewsController (IReviewRepository reviewRepository, ICategoriesRepository categoriesRepository) _reviewRepository = reviewRepository; _categoriesRepository = categoriesRepository;  // GET api / review public IEnumerable Obțineți () var reviews = _reviewRepository.GetAll (); revizuiri returnate;  // GET api / review / 5 public HttpResponseMessage Obțineți (int id) var category = _reviewRepository.Get (id); dacă (category == null) returnează Request.CreateResponse (HttpStatusCode.NotFound);  returnați Request.CreateResponse (HttpStatusCode.OK, categorie);  // POST api / revizuirea publicului HttpResponseMessage Post (Revizuire recenzie) var response = Request.CreateResponse (HttpStatusCode.Created, review); // Obțineți urlul pentru a prelua recenzia creată recent. answer.Headers.Location = nou Uri (Request.RequestUri, string.Format ("reviews / 0", review.Id)); _reviewRepository.Add (revizuire); return răspuns;  // PUT api / review / 5 public void Put (Revizuire recenzie) _reviewRepository.Update (revizuire);  // DELETE api / review / 5 public HttpResponseMessage Șterge (int id) _reviewRepository.Delete (id); returnează Request.CreateResponse (HttpStatusCode.NoContent);  // GET api / reviews / categories / category public HttpResponseMessage GetByCategory (Categorie de șir) var findCategory = _categoriesRepository.GetByName (categorie); dacă (findCategory == null) returnează Request.CreateResponse (HttpStatusCode.NotFound);  returnați Request.CreateResponse (HttpStatusCode.OK, _reviewRepository.GetByCategory (findCategory));  // GET api / comentarii / comentarii / id publice HttpResponseMessage GetReviewComments (int id) var reviewComments = _reviewRepository.GetReviewComments (id); dacă reviewComments == null) returnează Request.CreateResponse (HttpStatusCode.NotFound);  returnează Request.CreateResponse (HttpStatusCode.OK, reviewComments); 

Acest cod folosește IReviewRepository și ICategoriesRepository obiecte pentru a efectua acțiunea adecvată (de exemplu: preluarea datelor pentru cererile GET, adăugarea de date cu cererile POST etc.). Aceste depozite sunt injectate cu Ninject via Constructor Injecție.

Dacă nu aveți încă Fiddler, obțineți-l acum - chiar dacă nu sunteți dezvoltator .NET.

Observați că unele metode returnează diferite tipuri de date. WebAPI ne dă posibilitatea de a returna un tip de date non-string (cum ar fi IEnumerable), și va serializa obiectul pentru a trimite răspunsul serverului. De asemenea, puteți utiliza noul HttpResonseMessage pentru a returna un cod de stare specific HTTP împreună cu datele returnate. O modalitate de a crea un HttpResponseMessage obiect este prin apelare Request.CreateResponse (răspunsCod, date).

Putem testa în mod corespunzător proiectul nostru WebAPI cu un instrument cum ar fi Fiddler2. Dacă nu aveți încă Fiddler, obțineți-l acum - chiar dacă nu sunteți dezvoltator .NET. Fiddler este un instrument fantastic de depanare HTTP. După ce executați Fiddler, faceți clic pe RequestBuilder și introduceți adresa URL API pe care doriți să o testați. Apoi alegeți tipul de solicitare corespunzător. Dacă faceți o solicitare POST, asigurați-vă că specificați a Tip de conținut: aplicație / json antet și apoi plasați o structură JSON validă în corpul solicitării. Următoarea imagine demonstrează o cerere JSON POST brut către api / comentarii Adresa URL:

Când trimiteți solicitarea, veți vedea ceva asemănător cu următoarea imagine:

Observați că codul de stare al solicitării POST este un număr de 201. WebAPI face o treabă excelentă de a returna codul de stare corect pentru un serviciu Web complet REST. Distrează-te cu Fiddler2, este un instrument fantastic!

Cu WebAPI, puteți specifica rutarea pentru controlere (la fel ca MVC). În MVC4, a RouteConfig.cs fișierul este adăugat la App_Start pliant. Rutele pentru un proiect WebAPI sunt la fel ca și rutele MVC.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/RouteConfig.cs routes.MapHttpRoute (nume: "GetReviewComments", routeTemplate: "api / reviews / comments / id", implicit : id = RouteParameter.Optional, controller = "Reviews", action = "GetReviewComments"); routes.MapHttpRoute (nume: "GetByCategories", routeTemplate: "api / reviews / categories / category", implicite: new category = RouteParameter.Optional, controller = "Recenzii", action = "GetByCategory"); routes.MapHttpRoute (nume: "DefaultApi", routeTemplate: "api / controller / id", implicit: new id = RouteParameter.Optional);

DefaultApi ruta este generată automat de Visual Studio. Celelalte două rute sunt personalizate și hartă la anumite metode de pe controlerul Review. Există multe articole și tutoriale care oferă informații bune despre rutare. Asigurați-vă că o verificați.

MVC4

Aceasta acoperă o mulțime de ceea ce WebAPI are de oferit. Apoi, vom scrie câteva metode pentru afișarea datelor. Vom consuma puțin API, dar deocamdată vom folosi depozitele din noi HomeController. A HomeController a fost creat de Visual Studio; hai să-i modificăm metodele pentru a afișa datele. În primul rând, să obținem o listă a categoriilor din Index metodă.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs private ICategoriesRepository _categoriesRepository get; a stabilit;  privat IReviewRepository _reviewRepository get; a stabilit;  public HomeController (IC CategoriiRepository categoriesRepository, IReviewRepository reviewRepository) _categoriesRepository = categoriesRepository; _reviewRepository = recenzieRepository;  public ActionResult Index () var categorii = _categoriesRepository.GetAll (); retur View (categorii); 

Aici, vom continua să folosim DI acceptând depozitele ca parametri pentru HomeController constructor. Ninject injectează automat clasele corespunzătoare de beton pentru noi. Apoi, să adăugăm un cod la Index vizualizați pentru a afișa categoriile:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Index.cshtml @model IEnumerable 
Alege o categorie:
 
 @foreach (categoria var în Model)  
 @Numele categoriei 
  

Aceasta generează o listă de categorii la care utilizatorii pot face clic. Acum adăugați o nouă metodă la HomeController care recuperează a Revizuire. Vom numi această metodă opinii, prezentat aici:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs Recenzii publice ActionResult (id de șir) List recenzii = Listă nouă(); dacă (! string.IsNullOrWhiteSpace (id)) reviews = _reviewRepository.GetByCategory (_categoriesRepository.GetByName (id)). ToList ();  altceva reviews = _reviewRepository.GetAll (). ToList ();  foreach (rev varianta în recenzii) var comments = _reviewRepository.GetReviewComments (review.Id); review.Comments = comments.ToList ();  retur View (recenzii); 

Deoarece există deja un traseu / Controler / acțiune / id, puteți utiliza o adresă URL, cum ar fi Prima / Opinii / Doctori. Motorul de rutare va trece "Doctorii" ca id parametru la opinii metodă. Noi folosim id ca categorie și să preluați toate recenziile asociate cu acea categorie. Dacă nu este furnizată nicio categorie, cu toate acestea, vom prelua simplu toate recenziile din baza de date. Odată ce avem toate recenziile, trecem lista de examinare în vizualizare. Să ne uităm la punctul de vedere acum:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Reviews.cshtml 
 @foreach (recenzie var în model)  
@ review.Topic
 
 @ review.Content 
 var hasComments = review.Comments.Count> 0? "este-comentarii": null; 
 @foreach (comentează în comentariu.Comments)  
 @ (! comment.IsAnonymous? string.Format ("0 spune,", comment.Email): "") 
@ comment.Content
 
  
  

Acest cod utilizează o nouă caracteristică a MVC4.

Element clasă atributul nu va apărea în HTML dacă hasComments este nul. Citiți mai multe despre această funcție aici.

JavaScript

Nici o aplicație web modernă nu este completă fără JavaScript și o vom folosi pentru a consuma serviciul WebAPI. Vom folosi Backbone.js pentru acest lucru; așa că, înainte de peste și de a descărca Backbone și dependența sa Underscore. Plasați fișierele JavaScript în Scripturi director.

Vom profita de o altă caracteristică nouă MVC4 numită grupare de script-uri. În App_Start dosarul, veți găsi BundleConfig.cs fişier. În acest fișier, puteți configura MVC4 pentru a uni împreună fișierele JavaScript. Deschideți-l și adăugați un nou pachet, după cum urmează:

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

Apoi în /Views/Shared/_Layout.cshtml fișier, adăugați următoarele în partea de jos a corpului paginii:

 @ Scripts.Render ( "~ / mănunchiuri / coloana vertebrală")

Acest lucru va lega scripturile dacă aplicația dvs. este în modul de depanare sau le lasă singuri cu ea dezactivată.

Codul MVC4 pe care l-am scris pentru recuperarea listei de revizuiri este o modalitate foarte bună de a le afișa, dar toată noile hawtness utilizează Ajax. Deci, haideți să refactor codul pentru a utiliza Backbone.js. Prin JavaScript, vom prelua vizualizările în mod asincron după încărcarea paginii. Creați un fișier nou în Scripturi director numit home.js. Adăugați următorul cod în acel fișier:

 var Revizuire = Backbone.Model.extend (); var Opinii = Backbone.Collection.extend (model: Review, url: '/ api / reviews'); var Comentariu = Backbone.Model.extend (); var Comentarii = Backbone.Collection.extend (model: Comentariu, url: '/ api / reviews / comments /');

Acestea sunt modelele de date JavaScript, fiecare corespunzând unei adrese URL pentru a prelua date de la serviciul WebAPI. Acum, să scriem vizualizarea:

 var ListReviews = Backbone.View.extend (el: '.reviews', initialize: function () this.collection.on ('reset', this.render, this); this.collection.fetch renderItem: funcția (modelul) var view = new ReviewItem (model: model), acest. $ el.append (vizualizare. el););

Această vizualizare este pentru întreaga listă de recenzii. Când sunt colecțiile fetch () metoda se numește, declanșează restabili eveniment și apoi apeluri face(). Al treilea parametru a trecut la pe() metoda este domeniul de aplicare, sau ceea ce acest va fi în face() suna inapoi. În face() metodă, sunați la colecția fiecare() metoda, trecerea renderItem () metodă. renderItem () metoda va fi apelată pe fiecare element din colecție, generând un nou ReviewItem pentru fiecare revizuire.

Codul pentru ReviewItem urmează:

 var ReviewItem = Backbone.View.extend (evenimente: 'a face clic pe': 'getComments', tagName: 'li', initialize: function () this.template = _.template ($ 'reviewsTemplate') (), this.render ();, render: function () var html = aceasta (date: 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); auto.comments.append (item.el);)); aceasta. $ el.find ('a') ascunde (););

WebAPI este o completare fantastică a stivei ASP.NET; un API bogat bazat pe caracteristici REST nu a fost niciodată mai ușor.

ReviewItem vizualizare este responsabil pentru a face fiecare revizuire individuale. inițializa () metoda compilează șablonul utilizat pentru a afișa fiecare recenzie; acest șablon se află într-un

Observați @ script-uri de secțiune în codul de mai sus. Aceasta nu este o caracteristică nouă pentru MVC4, dar este un instrument excelent pentru a face anumite piese de JavaScript. În _layout.cshtml fișier, există și o @RenderSection ("scripturi", necesare: false) care face secțiunea definită în vizualizare.

Acesta este șablonul. Pentru ao folosi, procedați astfel:

 var template = _.template ($ ('# șablon'). html ()); var html = șablon (someCondition: true, ieșire: 'hello world', list: ['foo', 'bar', 'bam']);

Există multe cadre de template-uri JavaScript disponibile pe Web: Handlebars.js, mustache.js și Hogan.js sunt destul de populare. Asigurați-vă că le verificați și alegeți unul care lucrează pentru dvs..

Concluzie

WebAPI este o completare fantastică a stivei ASP.NET; un API bogat bazat pe caracteristici REST nu a fost niciodată mai ușor. Există o mulțime de noi caracteristici noi în MVC4. Asigurați-vă că le verificați! După cum am menționat anterior, codul pentru acest exemplu este disponibil pe Github. Încărcați-l!

Cod