Bygg en ASP.NET MVC4-applikasjon med EF og WebAPI

ASP.NET MVC har kommet langt siden "The Gu" tok opp noen ideer under en flytur til en konferanse i 2007. I løpet av fire år har ASP.NET MVC sett sin fjerde utgave, og det gir utviklere et miljø som forenkler utviklingen, strømlinjer prosesser og fremmer moderne mønstre.


Dykk inn

Hopping rett inn er en av de beste måtene å få tak i ny teknologi. La oss gå videre og dykk rett inn i kodekode!

Setup

Jeg skal bruke Visual Studio 2012 Release Candidate, som er tilgjengelig her. Jeg anbefaler også å laste ned SQL Server 2012 fordi det nye Management Studio er en tiltrukket forbedring i forhold til tidligere versjoner.

Når VS 2012 er oppe, gå videre og opprett et nytt prosjekt. Gå til Fil -> Nytt prosjekt og velg en Internett-applikasjon. Det er ikke en perfekt mal, men det vil få jobben gjort.

Merk: Koden for denne demo-applikasjonen er plassert i en Github-repo. Jeg vil ikke gå gjennom hvert enkelt stykke kode i denne appen, men du vil ha en god forståelse av et MVC4-program på slutten av denne opplæringen.

Entity Framework

Jeg skal bruke Entity Framework (EF) kode først for datamodellen. EF-kode Først kan vi generere databasetabeller med ikke noe mer enn noen få Vanlige gamle CLR-objekter (POCO). Plus, EF lar oss bruke LINQ til Entiteter og Lambda-uttrykk, noe som gjør det enkelt å spørre og utstede kommandoer. En vinn seier!

Vår søknad vil bli en gjennomgangsside for gjennomgang av ... ting. Derfor må datamodellen inkorporere alle nødvendige biter og stykker for en enkelt gjennomgang. Vi starter med en klasse som heter Anmeldelse. Skriv følgende klasse i sin egen fil i modeller katalogen:

 // Review.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Review.cs offentlig klasse Review public int Id get; sett;  [Obligatorisk] offentlig streng Innhold get; sett;  [Obligatorisk] [StringLength (128)] offentlig streng Emne get; sett;  [Obligatorisk] offentlig streng E-post get; sett;  [Obligatorisk] offentlig bool IsAnonymous get; sett;  offentlig int KategoriId get; sett;  offentlig virtuell kategori kategori get; sett;  offentlig virtuell IEnumerable Kommentarer get; sett; 

De Anmeldelse klassen har det id (primærnøkkelen), Innhold eiendom for å lagre anmeldelsen, a Emne for eksempel et restaurantnavn (eller et hvilket som helst navn på en organisasjon), en e-post eiendom og en IsAnonymous flagg for å indikere om anmelder er anonym. De Kategori- og Kategori egenskaper oppretter et utenlandsk nøkkelforhold for å knytte en anmeldelse til en Kategori (for eksempel: Leger, Tannleger, etc). Og sist er en samling av Kommentar objekter.

Skriv nå Kommentar klasse. Nok en gang legger du til den nye klassen i modeller katalogen:

 // Comment.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Comment.cs offentlig klasse Kommentar public int Id get; sett;  [Obligatorisk] offentlig streng Innhold get; sett;  [Obligatorisk] offentlig streng E-post get; sett;  [Obligatorisk] offentlig bool IsAnonymous get; sett;  offentlig int ReviewId get; sett;  offentlig gjennomgang anmeldelse get; sett; 

Kommentarklassen har en id eiendom for primærnøkkelen, Innhold av kommentaren, en e-post eiendom og en IsAnonymous flagg for brukere. Så er det ReviewId og Anmeldelse egenskaper for å opprette et fremmed nøkkelforhold mellom kommentarer og vurderinger.

Sist er det Kategori klasse. Her er koden sin:

 // Category.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Category.cs offentlig klasse Kategori public int Id get; sett;  [Obligatorisk] [StringLength (32)] offentlig streng Navn get; sett; 

Denne klassen er selvforklarende.

Du har sikkert lagt merke til omfattende bruk av [Obligatorisk] data annotasjon i de ovennevnte klassene. Disse angir et ikke-nullstillbart felt i databasen og gir validering senere nedover veien. Du kan også lage dine egne egendefinerte valideringsattributter hvis du ønsker det. I tillegg til [Obligatorisk], Vi brukte også virtuell søkeord for noen eiendommer; disse egenskapene betegner utenlandske nøkkelrelasjoner med andre tabeller.

For å lage de tilsvarende tabellene for disse klassene må du opprette en DbContext klasse. Følgende kode oppretter en kontekstklasse kalt ReviewedContext:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContext.cs offentlig klasse AnmeldtContext: DbContext public DbSet Anmeldelser get; sett;  offentlig DbSet Kategorier get; sett;  offentlig DbSet Kommentarer get; sett;  offentlig AnmeldtContext () Configuration.ProxyCreationEnabled = false; 

EF-kode Først kan vi generere databasetabeller med ikke noe mer enn noen få Vanlige gamle CLR-objekter (POCO).

Hver eiendom i denne klassen tilsvarer et bord når du genererer databasen. De Configuration.ProxyCreationEnabled = false; sørger for at enhetene hentes som objekter av sine respektive klasser i stedet for proxyer - noe som gjør debugging mye enklere.

Deretter setter vi opp en databaseinitialiser. En initialiserer sikrer at databasen er opprettet riktig når datamodellen gjennomgår noen endring. Uten en initialiserer må du manuelt slette databasen hvis du endrer en av dine POCOer. Det er noen forskjellige typer initieringsapparater å velge mellom: DropCreateDatabaseAlways og DropCreateDatabaseIfModelChanges. Navnene er selvforklarende. Den vi skal bruke er DropCreateDatabaseIfModelChanges.

De DropCreateDatabaseAlways og DropCreateDatabaseIfModelChanges initiativtakerne har en bivirkning: de slipper tabellene (og dermed dataene) i databasen når modellstrukturen endres. Men EF Code First gir en tredje måte å generere databaser: Migrations. Denne nye funksjonen sporer endringer i databasen og mister ikke data ettersom POCO-klassene endres.

Her er koden for vår initialiserer:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContextInitializer.cs // http://slipsum.com/ offentlig klasse ReviewedContextInitializer: DropCreateDatabaseIfModelChanges protected override void Seed (ReviewedContext context) // Bruk konteksten til å frøke db. 

De ReviewedContextInitializer klassen overstyrer Frø() metode. Dette gir oss muligheten til å fylle vår database med noen testdata. Nå må vi besøke Global.asax fil og legg til følgende linje til Application_Start () metode:

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

La oss lage noen lagre for å hente data fra databasen, og vi vil fortsette og sette opp avhengighetsinjeksjon (DI) med Ninject. Hvis du ikke vet nøyaktig hva DI eller Inversion of Control (IoC) er, ta et øyeblikk å lese denne artikkelen.

I utgangspunktet er ideen om avhengighetsinjeksjon til injisere en konkret avhengighet i en klasse, i motsetning til hardkoding av klassen for å være avhengig av den konkrete avhengigheten. Med andre ord er det en avkobling av en konkret klasse fra en annen. Hvis det fortsatt er klart som gjørme, la oss se på et kort eksempel:

 offentlig klasse Foo private Bar _bar; offentlig Foo () _bar = ny Bar (); 

Denne koden oppretter en klasse som kalles foo. Det er avhengig av funksjonaliteten til et objekt av typen Bar, og Bar objekt blir opprettet i foo klasse. Dette kan være vanskelig å vedlikeholde og enhetstesten fordi:

  • foo og Bar er tett koblet. Som et resultat er vedlikehold mindre enn ideelt.
  • foo er avhengig av en bestemt implementering av Bar, gjør enhetstesting vanskelig.

Denne koden kan forbedres med bare noen få modifikasjoner. Ta en titt på den reviderte foo klasse:

 offentlig klasse Foo privat IBar _bar; offentlig Foo (IBar bar) _bar = bar; 

På bare under fire år har ASP.NET MVC sett sin fjerde utgave ...

Nå, den foo klassen er ikke avhengig av en bestemt implementering av Bar. I stedet er et objekt av en klasse som implementerer Ibar grensesnitt leveres til foo via dennes konstruktør. Denne tilnærmingen forbedrer betraktelig vedlikehold, samtidig som vi tillater å injisere noen Ibar objekt - noe som gjør det enklere å prøve enheten vår kode.

Med den korte beskrivelsen ut av veien, la oss få Ninject opp og løpe. Brann opp Package Manager Console og kjør Installer-pakke Ninject.MVC3. Dette vil legge til Ninject i vårt prosjekt.

Det første depotet vi lager, er ReviewsRepository, og det vil implementere IReviewRepository grensesnitt. Her er grensesnittet:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Abstract/IReviewRepository.cs offentlig grensesnitt IReviewRepository Review Get (int id); IQueryable Få alt(); Review Legg til (anmeldelse anmeldelse); Gjennomgå Oppdatering (Gjennomgå anmeldelse); void Delete (int reviewId); IEnumerable GetByCategory (Kategori kategori); IEnumerable GetReviewComments (int id); 

Dette grensesnittet sikrer at våre revisjonsarkiver gir grunnleggende CRUD-operasjoner. Vi får også nytte av å hente vurderinger av en bestemt kategori, samt å hente kommentarene for en gitt anmeldelse. La oss nå skrive en konkret klasse som implementerer dette grensesnittet:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Repos/ReviewRepository.cs offentlig klasse ReviewRepository: IReviewRepository private ReviewedContext _db get; sett;  offentlig anmeldelseRepository (): this (new ReviewedContext ())  public reviewRepository (ReviewedContext db) _db = db;  offentlig vurdering Get (int id) return _db.Reviews.SingleOrDefault (r => r.Id == id);  offentlig IQueryable GetAll () return _db.Reviews;  offentlig vurdering Legg til (omtale) _db.Reviews.Add (anmeldelse); _db.SaveChanges (); returnere anmeldelse;  offentlig gjennomgang oppdatering (gjennomgang anmeldelse) _db.Entry (anmeldelse) .State = EntityState.Modified; _db.SaveChanges (); returnere anmeldelse;  offentlig ugyldig Slett (int reviewId) var review = Get (reviewId); _db.Reviews.Remove (gjennomgang);  offentlig IEnumerable GetByCategory (Kategori kategori) return _db.Reviews.Where (r => r .CategoryId == category.Id);  offentlig IEnumerable GetReviewComments (int id) return _db.Comments.Where (c => c.ReviewId == id); 

WebAPI er et MVC-lignende rammeverk som vi kan bruke til å enkelt lage et RESTful API ...

Dette depotet er avhengig av en ReviewedContext objekt som er lagret som en klassevariabel. Dette gjør det mulig for oss å bruke LINQ i et hvilket som helst av lagringssystemets metoder, noe som gjør databasens interaksjon enkelt.

WebAPI har en fin funksjon som lar oss legge til vårt eget DI rammeverk. Denne funksjonen er utenfor omfanget av denne opplæringen, så vær sikker på at du leser denne artikkelen for å få det oppsettet.

En av de viktigste stedene for koden vår er App_Start mappe, som inneholder en fil som heter NinjectCommonWeb.cs (installerer Ninject legger automatisk til denne filen til App_Start). Denne filen inneholder en statisk klasse som heter NinjectWebCommon, og det har en metode kalt RegisterServices (). I denne metoden legger du til følgende kode:

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

De tre første setningene binder et grensesnitt til en konkret implementering av grensesnittet, og den fjerde linjen setter opp DI for WebAPI (funksjonen dekket i den nevnte artikkelen).

WebAPI

La oss nå opprette kontrollerne for API. WebAPI er et MVC-lignende rammeverk som vi kan bruke til å enkelt lage en RESTful tjeneste, og den kan løpe inne i et MVC4-program, i sitt eget prosjekt, eller det kan være selvvertatt utenfor IIS. Men det er ikke alt; den har mange andre funksjoner, for eksempel: innholdsforhandlinger (for automatisk å serialisere dataene i hvilket format som er forespurt), modellbinding, validering og mange flere.

Vi må først opprette et sluttpunkt med WebAPI, og det gjør vi ved å lage en klasse som arver ApiController. Komme i gang med dette er ganske enkelt. Visual Studio 2012 har en ny funksjon som lager en ny, delvis stillastet kontroller.

Dette vil skape en kontrollerklasse med noen få metoder som allerede er definert for deg. Her er et eksempel:

 // GET api / default1 public IEnumerable Get () returner ny streng [] "value1", "value2";  // GET api / default1 / 5 public string Få (int id) return "value";  // POST api / default1 offentlig tomt Post (streng verdi)  // PUT api / default1 / 5 offentlig tomt Put (int id, streng verdi)  // DELETE api / default1 / 5 public void Slett ) 

Metodenavnene samsvarer med HTTP-verbet de representerer. Vi lager nå ReviewsController klasse. Koden er litt lang, men ganske grei.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/ReviewsController.cs offentlig klasse ReviewsController: ApiController private ICategoriesRepository _categoriesRepository get; sett;  privat IReviewRepository _reviewRepository get; sett;  offentlige reviewsController (IReviewRepository reviewRepository, ICategoriesRepository categoriesRepository) _reviewRepository = reviewRepository; _categoriesRepository = categoriesRepository;  // GET api / review public IEnumerable Get () var reviews = _reviewRepository.GetAll (); returnere vurderinger;  // GET api / review / 5 public HttpResponseMessage Get (int id) var kategori = _reviewRepository.Get (id); hvis (kategori == null) return Request.CreateResponse (HttpStatusCode.NotFound);  returnere Request.CreateResponse (HttpStatusCode.OK, kategori);  // POST api / review offentlig HttpResponseMessage Post (Review Review) var response = Request.CreateResponse (HttpStatusCode.Created, review); // Hent url for å hente den nyopprettede anmeldelsen. response.Headers.Location = new Uri (Request.RequestUri, string.Format ("reviews / 0", review.Id)); _reviewRepository.Add (gjennomgang); returrespons;  // PUT api / review / 5 public void Put (Review Review) _reviewRepository.Update (anmeldelse);  // DELETE api / review / 5 public HttpResponseMessage Slett (int id) _reviewRepository.Delete (id); return Request.CreateResponse (HttpStatusCode.NoContent);  // GET api / reviews / categories / kategori offentlig HttpResponseMessage GetByCategory (strengskategori) var findCategory = _categoriesRepository.GetByName (category); hvis (findCategory == null) return Request.CreateResponse (HttpStatusCode.NotFound);  returnere Request.CreateResponse (HttpStatusCode.OK, _reviewRepository.GetByCategory (findCategory));  // GET api / reviews / comments / id offentlig HttpResponseMessage GetReviewComments (int id) var reviewComments = _reviewRepository.GetReviewComments (id); hvis (reviewComments == null) return Request.CreateResponse (HttpStatusCode.NotFound);  returnere Request.CreateResponse (HttpStatusCode.OK, reviewComments); 

Denne koden bruker IReviewRepository og ICategoriesRepository objekter å utføre den aktuelle tiltaket (for eksempel: henting av data for GET-forespørsler, legge til data med POST-forespørsler, osv.). Disse respositoriene injiseres med Ninject via Constructor Injection.

Hvis du ikke har Fiddler ennå, få det nå - selv om du ikke er .NET-utvikler.

Legg merke til at noen av metodene returnerer forskjellige datatyper. WebAPI gir oss muligheten til å returnere en ikke-streng datatype (for eksempel IEnumerable), og det vil serialisere objektet for å sende inn serverens svar. Du kan også bruke den nye HttpResonseMessage klasse for å returnere en bestemt HTTP-statuskode sammen med de returnerte dataene. En måte å lage en HttpResponseMessage objektet er ved å ringe Request.CreateResponse (responsCode, data).

Vi kan ordentlig teste vårt WebAPI-prosjekt med et verktøy som Fiddler2. Hvis du ikke har Fiddler ennå, få det nå - selv om du ikke er .NET-utvikler. Fiddler er et fantastisk HTTP feilsøkingsverktøy. Når du kjører Fiddler, klikk på RequestBuilder og skriv inn API-nettadressen du vil teste. Velg deretter ønsket forespørselstype. Hvis du gjør en POST-forespørsel, vær sikker og spesifiser en Innholdstype: søknad / json header, og legg deretter en gyldig JSON-struktur inn i forespørselslegemet. Følgende bilde viser en rå JSON POST-forespørsel til api / vurderinger URL:

Når du sender forespørselen, ser du noe som følgende bilde:

Legg merke til at POST-forespørselen er statuskode er en 201. WebAPI gjør en god jobb med å returnere den riktige statuskoden for en RESTfull webtjeneste. Ha det gøy med Fiddler2, det er et fantastisk verktøy!

Med WebAPI kan du spesifisere rutingen for kontrollerne (akkurat som MVC). I MVC4, a RouteConfig.cs filen er lagt til i App_Start mappe. Ruter for et WebAPI-prosjekt er akkurat som MVC-ruter.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/RouteConfig.cs routes.MapHttpRoute (navn: "GetReviewComments", routeTemplate: "api / reviews / comments / id", standard : ny id = RouteParameter.Optional, controller = "Reviews", action = "GetReviewComments"); Routes.MapHttpRoute (navn: "GetByCategories", routeTemplate: "api / reviews / categories / category", standard: ny category = RouteParameter.Optional, controller = "Reviews", action = "GetByCategory"); ruter.MapHttpRoute (navn: "DefaultApi", ruteTemplate: "api / controller / id", standard: nytt id = RouteParameter.Optional);

De DefaultApi ruten genereres automatisk av Visual Studio. De to andre rutene er tilpassede og kart til bestemte metoder på Anmeldelser-kontrolleren. Det er mange artikler og opplæringsprogrammer som gir god informasjon om ruting. Husk å sjekke denne ut.

MVC4

Det dekker mye av hva WebAPI har å tilby. Deretter skriver vi noen få metoder for å vise dataene. Vi bruker litt av API-en, men for nå bruker vi lagrene i vår HomeController. EN HomeController ble opprettet av Visual Studio; la oss bare endre sine metoder for å vise dataene. Først, la oss få en liste over kategoriene i Hovedsiden metode.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs private ICategoriesRepository _categoriesRepository get; sett;  privat IReviewRepository _reviewRepository get; sett;  offentlig HomeController (ICategoriesRepository categoriesRepository, IReviewRepository reviewRepository) _categoriesRepository = categoriesRepository; _reviewRepository = reviewRepository;  offentlig ActionResult-indeks () var categories = _categoriesRepository.GetAll (); returnere Vis (kategorier); 

Her fortsetter vi å bruke DI ved å akseptere repositoriene som parametere for HomeController konstruktør. Ninject injiserer automatisk de aktuelle betongklassene for oss. Deretter la vi legge til noe kode til Hovedsiden vis for å vise kategoriene:

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

Velg en kategori:

    @foreach (var kategori i modell)
  • @kategori navn

Dette genererer en liste over kategorier som brukere kan klikke på. Legg nå til en ny metode til HomeController som henter a Anmeldelse. Vi kaller denne metoden anmeldelser, vist her:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs offentlig ActionResult Anmeldelser (streng id) Liste anmeldelser = ny liste(); hvis (! streng.IsNullOrWhiteSpace (id)) reviews = _reviewRepository.GetByCategory (_categoriesRepository.GetByName (id)). ToList ();  else reviews = _reviewRepository.GetAll (). ToList ();  foreach (var vurdering i vurderinger) var kommentarer = _reviewRepository.GetReviewComments (review.Id); review.Comments = comments.ToList ();  returvisning (vurderinger); 

Fordi det allerede finnes en rute for / Controller / handling / id, Du kan bruke en nettadresse, for eksempel Hjem / anmeldelser / Leger. Rutemotoren vil passere "Leger" som id parameter til anmeldelser metode. Vi bruker id som kategori og hente alle vurderinger knyttet til den kategorien. Hvis ingen kategori er oppgitt, kan vi imidlertid enkelt hente alle omtaler i databasen. Når vi har alle anmeldelsene, sender vi anmeldelsen til visningen. La oss se på visningen akkurat nå:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Reviews.cshtml 
@foreach (var anmeldelse i modell)

@ review.Topic

@ review.Content

var hasComments = review.Comments.Count> 0? "er-kommentarer": null;
    @foreach (var kommentar i review.Comments)
  • @ (! comment.IsAnonymous? string.Format ("0 sier,", kommentar.Email): "")
    @ comment.Content

Denne koden bruker en ny funksjon av MVC4. De

    elementets klasse attributtet vil ikke vises i HTML hvis hasComments er null. Les mer om denne funksjonen her.

    Javascript

    Ingen moderne webapp er komplett uten JavaScript, og vi bruker den til å konsumere vår WebAPI-tjeneste. Vi bruker Backbone.js for dette; så, fortsett på over og last ned Ryggrad og dens avhengighet Underscore. Plasser JavaScript-filene i scripts katalog.

    Vi vil dra nytte av en annen ny MVC4-funksjon kalt skriptbundting. I App_Start mappe, finner du BundleConfig.cs fil. I denne filen kan du konfigurere MVC4 til å pakke JavaScript-filer sammen. Åpne den og legg til en ny pakke, slik:

     bundles.Add (ny ScriptBundle ("~ / bundles / backbone"). Inkluder ("~ / Skript / underskrift *", "~ / Skript / ryggrad *"));

    Så i /Views/Shared/_Layout.cshtml fil, legg til følgende nederst på sidens kropp:

     @ Scripts.Render ( "~ / bunter / backbone")

    Dette vil pakke opp skriptene dine hvis søknaden din er i feilsøkingsmodus, eller la dem være alene med den slått av.

    MVC4-koden vi skrev for å hente anmeldelse-listen, er en fin måte å vise dem på, men alle nye hawtness bruker Ajax. Så la oss reflektere koden for å bruke Backbone.js. Gjennom JavaScript, henter vi visningene asynkront etter at siden har lastet inn. Opprett en ny fil i scripts mappe kalt home.js. Legg til følgende kode i den filen:

     Var Review = Backbone.Model.extend (); var Anmeldelser = Backbone.Collection.extend (modell: Review, url: '/ api / reviews'); var Kommentar = Backbone.Model.extend (); var Comments = Backbone.Collection.extend (modell: Kommentar, url: '/ api / reviews / comments /');

    Dette er JavaScript-datamodellene, som hver svarer til en URL for å hente data fra WebAPI-tjenesten. La oss nå skrive visningen:

     var ListReviews = Backbone.View.extend (el: '.reviews', initialiser: funksjon () this.collection.on ('reset', this.render, dette); this.collection.fetch ();, gjengi: funksjon () this.collection.each (this.renderItem, this); renderItem: funksjon (modell) var view = new ReviewItem (model: model); dette. $ el.append (se. el););

    Denne utsikten er for hele listen over vurderinger. Når samlingen er hente () Metoden kalles, den utløser tilbakestille arrangement og deretter samtaler render (). Den tredje parameteren passerte til på() Metoden er omfanget, eller hva dette vil være i render () Ring tilbake. I render () metode, ring samlingen er Hver() metode, passerer renderItem () metode. De renderItem () Metoden vil bli kalt på hvert element i samlingen, genererer en ny ReviewItem for hver anmeldelse.

    Koden for ReviewItem følger:

     var ReviewItem = Backbone.View.extend (events: 'klikk a': 'getComments', tagnavn: 'li', initialiser: funksjon () this.template = _.template ($ ('# reviewsTemplate') .html ()); this.collection = nye kommentarer (); this.collection.on ('tilbakestill', this.loadComments, dette); this.render ();, render: function () var html = dette .template (this.model.toJSON ()); dette. $ el.append (html);, getComments: function () this.collection.fetch (data: Id: this.model.get ');, loadComments: funksjon () var selv = dette, elementet; this.comments = dette. $ el.find (' ul '); this.collection.each (funksjon (kommentar) item = new CommentItem (model: comment); self.comments.append (item.el);); dette. $ el.find ('a'). skjul (););

    WebAPI er et fantastisk tillegg til ASP.NET-stakken; en funksjonsrik REST-basert API har aldri vært enklere.

    De ReviewItem visningen er ansvarlig for gjengivelse av hver enkelt anmeldelse. De initialize () Metoden kompilerer malen som brukes til å vise hver anmeldelse Denne malen ligger i en

      Legg merke til @section skript i ovennevnte kode. Dette er ikke en ny funksjon til MVC4, men det er et flott verktøy for å gjengi bestemte deler av JavaScript. I _layout.cshtml fil, det er også en @RenderSection ("scripts", obligatorisk: false) som gjør seksjonen definert i visningen. De

      Det er malen. For å bruke det gjør du dette:

       varmal = _.template ($ ('# template'). html ()); var html = mal (someCondition: true, output: 'hej verden', liste: ['foo', 'bar', 'bam']);

      Det er mange JavaScript templating rammer tilgjengelig på nettet: Handlebars.js, mustache.js og Hogan.js er ganske populære. Pass på og sjekk dem ut og velg den som fungerer for deg.

      Konklusjon

      WebAPI er et fantastisk tillegg til ASP.NET-stakken; en funksjonsrik REST-basert API har aldri vært enklere. Det er mange flotte nye funksjoner i MVC4. Pass på og sjekk dem ut! Som jeg tidligere nevnte, er koden for dette eksemplet tilgjengelig på Github. Fork det!