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.
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!
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.
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 IEnumerableKommentarer 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 DbSetAnmeldelser 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: DropCreateDatabaseIfModelChangesprotected 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); IQueryableFå 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 IQueryableGetAll () 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).
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 IEnumerableGet () 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 IEnumerableGet () 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.
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 IEnumerableVelg 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) Listeanmeldelser = 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.
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 element. Ryggraden trekker malen ut av
element og kombinerer det med anmeldelsen.
EN klikk
Event Handler er også satt opp for å laste inn kommentarene for hver anmeldelse. Når lenken er klikket, vil getComments ()
Metoden kalles, henter kommentarene ved å sende en id
til WebAPI-tjenesten. De hente ()
Metoden er bare en abstraksjon til jQuery $ .ajax
metode, så normale Ajax parametere, som data
, kan bestås i hente ()
anrop. Til slutt, loadComments ()
Metoden vil brann og skape en ny CommentItem
se for hver kommentar returnert. De TagNavn
på denne visningen sikrer visningen er opprettet med en som sin
$ el
eiendom.
Neste, la oss se på CommentItem
utsikt:
var CommentItem = Backbone.View.extend (tagName: 'li', initialiser: funksjon () this.template = _.template ($ ('# commentsTemplate'). html ()); this.render (); , gjengi: funksjon () var html = this.template (this.model.toJSON ()); dette. $ el.html (html););
Dette er en enkel visning som gjør hver kommentar. La oss nå endre Review.cshtml
se som følger:
@model IEnumerable@section scripts
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 elementene er Underscore maler for å gjengi innhold. De følger en Ruby-esque syntaks, og alt inni
<% %>
er vurdert som en uttalelse. Alt inne i <%= %>
vil sende ut til HTML. Looper og betingede utsagn kan brukes slik:
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.
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!