Accentsconagua

Een ASP.NET MVC4-applicatie bouwen met EF en WebAPI

Code
Share

ASP.NET MVC heeft een lange weg afgelegd sinds "The Gu" een aantal ideeën noteerde tijdens een vliegtuigrit naar een conferentie in 2007. In iets minder dan vier jaar tijd heeft ASP.NET MVC zijn vierde release gezien en biedt het ontwikkelaars een omgeving dat vergemakkelijkt de ontwikkeling, stroomlijnt processen en bevordert moderne patronen.

Induiken

Recht naar binnen springen is een van de beste manieren om een ​​handvat van nieuwe technologie te krijgen. Laten we doorgaan en direct in de codez duiken!

Opstelling

Ik zal Visual Studio 2012 Release Candidate gebruiken, die hier beschikbaar is. Ik raad ook aan SQL Server 2012 te downloaden omdat de nieuwe Management Studio een broodnodige verbetering ten opzichte van eerdere versies is.

Zodra VS 2012 operationeel is, ga je gang en maak je een nieuw project. Ga naar Bestand -> Nieuw project en kies een Internet-applicatie. Het is geen perfecte sjabloon, maar het krijgt de klus wel geklaard.

Opmerking: de code voor deze demotoepassing bevindt zich in een Github-repo. Ik zal niet alle stukjes code in deze app doornemen, maar aan het einde van deze tutorial heb je een goed begrip van een MVC4-applicatie.

Entity Framework

Ik ga Entity Framework (EF) Code First gebruiken voor het datamodel. EF Code First laat ons databasetabellen genereren met niets meer dan een paar Plain Old CLR Objects (POCO). Bovendien laat EF ons LINQ gebruiken voor entiteiten en lambda-expressies, waardoor het gemakkelijk is om opdrachten te vragen en uit te geven. Een win overwinning!

Onze applicatie zal een beoordelingssite zijn voor het beoordelen van ... dingen. Daarom moet het datamodel alle benodigde stukjes en beetjes bevatten voor een enkele beoordeling. We beginnen met een klasse genaamd Beoordeling. Schrijf de volgende klasse in zijn eigen bestand in de modellen directory:

 // Review.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Review.cs public class Review public int Id get; vast te stellen;  [Verplicht] public string Inhoud get; vast te stellen;  [Vereist] [StringLength (128)] public string Onderwerp get; vast te stellen;  [Vereist] public string Email get; vast te stellen;  [Verplicht] public bool IsAnonymous get; vast te stellen;  public int CategoryId get; vast te stellen;  public virtual Category Category get; vast te stellen;  openbare virtuele IEnumerable Opmerkingen krijg; vast te stellen;

De Beoordeling klasse heeft het ID kaart (de primaire sleutel), de Inhoud eigendom om de beoordeling op te slaan, a Onderwerp zoals een restaurantnaam (of een naam van een organisatie), een E-mail eigendom, en een IsAnonymous vlag om aan te geven of de recensent anoniem is. De Categorie ID en de Categorie eigenschappen creëren een externe sleutelrelatie om een ​​recensie te koppelen aan een Categorie (bijvoorbeeld: artsen, tandartsen, enz.). En als laatste is een verzameling van Commentaar voorwerpen.

Schrijf nu het Commentaar klasse. Voeg de nieuwe klasse opnieuw toe aan de modellen directory:

 // Comment.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Comment.cs public class Reactie public int Id get; vast te stellen;  [Verplicht] public string Inhoud get; vast te stellen;  [Vereist] public string Email get; vast te stellen;  [Verplicht] public bool IsAnonymous get; vast te stellen;  public int ReviewId get; vast te stellen;  openbare Review Review get; vast te stellen;

De reactieklasse heeft een ID kaart eigenschap voor de primaire sleutel, Inhoud van de opmerking, een E-mail eigendom, en een IsAnonymous vlag voor gebruikers. En dan zijn er ReviewId en Beoordeling eigenschappen om een ​​externe sleutelrelatie tussen opmerkingen en beoordelingen te maken.

Laatste is het Categorie klasse. Hier is de code:

 // Category.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Category.cs public class Category public int Id get; vast te stellen;  [Vereist] [StringLength (32)] public string Name get; vast te stellen;

Deze klasse spreekt voor zich.

U hebt waarschijnlijk veel gebruik van de [Verplicht] data-annotatie in de bovenstaande klassen. Deze geven een niet-nulbaar veld aan in de database en bieden later validatie. U kunt ook uw eigen aangepaste validatiekenmerken maken als u dat wilt. In aanvulling op [Verplicht], we gebruikten ook de virtueel sleutelwoord voor sommige eigenschappen; die eigenschappen duiden op buitenlandse sleutelrelaties met andere tabellen.

Als u de bijbehorende tabellen voor deze klassen wilt maken, moet u een DbContext klasse. De volgende code maakt een opgeroepen contextklasse ReviewedContext:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContext.cs public class ReviewedContext: DbContext public DbSet Recensies krijgen; vast te stellen;  openbare DbSet Categorieën krijgen; vast te stellen;  openbare DbSet Opmerkingen krijg; vast te stellen;  public ReviewedContext () Configuration.ProxyCreationEnabled = false;

EF Code First laat ons databasetabellen genereren met niets meer dan een paar Plain Old CLR Objects (POCO).

Elke eigenschap in deze klasse komt overeen met een tabel bij het genereren van de database. De Configuration.ProxyCreationEnabled = false; zorgt ervoor dat de entiteiten worden opgehaald als objecten van hun respectieve klassen in plaats van proxy's - waardoor debuggen veel eenvoudiger wordt.

Vervolgens zetten we een database-initialisatieprogramma op. Een initialisatie zorgt ervoor dat de database correct wordt aangemaakt wanneer het gegevensmodel wijzigingen ondergaat. Zonder een initialisatie moet u de database handmatig verwijderen als u een wijziging aanbrengt in een van uw POCO's. Er zijn een paar verschillende soorten initializers om uit te kiezen: DropCreateDatabaseAlways en DropCreateDatabaseIfModelChanges. De namen spreken voor zich. Degene die we gaan gebruiken is DropCreateDatabaseIfModelChanges.

De DropCreateDatabaseAlways en DropCreateDatabaseIfModelChanges Initializers hebben een neveneffect: ze laten de tabellen (en dus de gegevens) in de database vallen wanneer de modelstructuur verandert. Maar EF Code First biedt een derde manier om databases te genereren: migraties. Deze nieuwe functie houdt wijzigingen in de database bij en verliest geen gegevens wanneer de POCO-klassen veranderen.

Hier is de code voor onze initializer:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContextInitializer.cs // http://slipsum.com/ public class ReviewedContextInitializer: DropCreateDatabaseIfModelChanges protected override void Seed (ReviewedContext-context) // Gebruik de context om de db te seeden.

De ReviewedContextInitializer klasse overschrijft de Zaad() methode. Dit geeft ons de mogelijkheid om onze database te vullen met enkele testgegevens. Nu moeten we de global.asax bestand en voeg de volgende regel toe aan de Application_Start () methode:

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

Laten we een aantal repositories maken voor het ophalen van gegevens uit de database, en we zullen doorgaan met het instellen van afhankelijkheid injectie (DI) met Ninject. Als u niet precies weet wat DI of Inversion of Control (IoC) is, neem dan even de tijd om dit artikel te lezen.

Kortom, het idee van afhankelijkheid injectie is om injecteren een concrete afhankelijkheid in een klasse, in tegenstelling tot het hard coderen van de klas om afhankelijk te zijn van de concrete afhankelijkheid. Met andere woorden, het is een ontkoppeling van de ene concrete klasse van de andere. Als dat nog steeds duidelijk is als modder, laten we dan een kort voorbeeld bekijken:

 public class Foo private Bar _bar; openbare Foo () _bar = nieuwe balk ();

Deze code maakt een klasse genaamd Foo. Het is afhankelijk van de functionaliteit van een object van het type Bar, en de Bar object is gemaakt binnen de Foo klasse. Dit kan moeilijk zijn om te onderhouden en unit test, omdat:

  • Foo en Bar zijn nauw gekoppeld. Als gevolg hiervan is onderhoud minder dan ideaal.
  • Foo is afhankelijk van een specifieke implementatie van Bar, het testen van eenheden moeilijk maken.

Deze code kan worden verbeterd met slechts een paar wijzigingen. Bekijk de herziene versie Foo klasse:

 openbare klasse Foo private IBar _bar; openbare Foo (IBar-balk) _bar = balk;

In iets minder dan vier jaar heeft ASP.NET MVC zijn vierde release gezien ...

Nu de Foo klasse is niet afhankelijk van een specifieke implementatie van Bar. In plaats daarvan, een object van een klasse die het IBar interface wordt geleverd aan Foo via diens constructor. Deze aanpak verbetert de onderhoudbaarheid aanzienlijk, terwijl we ook elk kunnen injecteren IBar object - waardoor het eenvoudiger wordt om onze code te testen.

Met die korte beschrijving uit de weg, laten we Ninject klaarstomen. Start de Package Manager-console op en voer het uit Installatiepakket Ninject.MVC3. Dit zal Ninject aan ons project toevoegen.

De eerste repository die we zullen maken is de ReviewsRepository, en het zal de IReviewRepository interface. Hier is de interface: 

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Abstract/IReviewRepository.cs openbare interface IReviewRepository Review Get (int id); IQueryable Alles krijgen(); Review toevoegen (Review review); Review Update (Review review); void Verwijderen (int reviewId); IEnumerable GetByCategory (categoriecategorie); IEnumerable GetReviewComments (int id);

Deze interface zorgt ervoor dat onze beoordelingsrepository's de standaard CRUD-bewerkingen bieden. We krijgen ook het nut van het ophalen van beoordelingen door een specifieke categorie, evenals het ophalen van de opmerkingen voor een bepaalde beoordeling. Laten we nu een concrete klasse schrijven die deze interface implementeert:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Repos/ReviewRepository.cs public class ReviewRepository: IReviewRepository private ReviewedContext _db get; vast te stellen;  public ReviewRepository (): this (new ReviewedContext ())  public ReviewRepository (ReviewedContext db) _db = db;  public Review Get (int id) return _db.Reviews.SingleOrDefault (r => r.Id == id);  openbare IQueryable GetAll () return _db.Reviews;  openbare recensie toevoegen (Review review) _db.Reviews.Add (review); _db.SaveChanges (); terugkeer beoordeling;  openbare recensie-update (Review review) _db.Entry (review) .State = EntityState.Modified; _db.SaveChanges (); terugkeer beoordeling;  public void Delete (int reviewId) var review = Get (reviewId); _db.Reviews.Remove (review);  openbaar IEnumerable GetByCategory (Categoriecategorie) return _db.Reviews.Where (r => r.CategoryId == category.Id);  openbaar IEnumerable GetReviewComments (int id) return _db.Comments.Where (c => c.ReviewId == id);

WebAPI is een MVC-achtig framework dat we kunnen gebruiken om eenvoudig een RESTful API te maken ...

Deze repository vertrouwt op a ReviewedContext object dat is opgeslagen als een klassenvariabele. Dit stelt ons in staat om LINQ te gebruiken in een van de methoden van de repository, waardoor database-interactie eenvoudig wordt.

WebAPI heeft een leuke functie waarmee we ons eigen DI-raamwerk kunnen toevoegen. Deze functie valt buiten het bestek van deze zelfstudie, dus lees dit artikel om die instelling te krijgen.

Een van de belangrijkste locaties voor onze code is de App_Start map, die een bestand bevat met de naam NinjectCommonWeb.cs (Ninject wordt automatisch geïnstalleerd door dit bestand automatisch toe te voegen App_Start). Dit bestand bevat een statische klasse genaamd NinjectWebCommon, en het heeft een methode genaamd RegisterServices (). Voeg in deze methode de volgende code toe:

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

De eerste drie statements binden een interface aan een concrete implementatie van de interface en de vierde regel stelt de DI in voor WebAPI (de functie die in het bovengenoemde artikel wordt behandeld).

WebAPI

Laten we nu de controllers voor de API maken. WebAPI is een MVC-achtig framework dat we kunnen gebruiken om eenvoudig een RESTful-service te maken, en het kan binnen een MVC4-applicatie draaien, in zijn eigen project, of het kan zelf worden gehost buiten IIS. Maar dat is niet alles; het heeft vele andere functies, zoals: inhoudonderhandeling (om de gegevens automatisch te serialiseren in welk formaat dan ook wordt gevraagd), modelbinding, validatie en nog veel meer.

We moeten eerst een eindpunt maken met WebAPI en dat doen we door een klasse te creëren die erft ApiController. Aan de slag met dit is vrij eenvoudig. Visual Studio 2012 heeft een nieuwe functie waarmee een nieuwe, gedeeltelijk steigercontroller wordt gemaakt.

Hiermee wordt een controllerklasse gemaakt met een paar methoden die al voor u zijn gedefinieerd. Hier is een voorbeeld:

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

De methode-namen komen overeen met het HTTP-werkwoord dat zij vertegenwoordigen. We maken nu het ReviewsController klasse. De code een beetje lang, maar vrij eenvoudig.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/ReviewsController.cs public class BeoordelingenController: ApiController private ICategoriesRepository _categoriesRepository get; vast te stellen;  private IReviewRepository _reviewRepository get; vast te stellen;  public ReviewsController (IReviewRepository reviewRepository, ICategoriesRepositorycategorieënRepository) _reviewRepository = reviewRepository; _categoriesRepository = categoriesRepository;  // GET api / review public IEnumerable Get () var reviews = _reviewRepository.GetAll (); terugkeer beoordelingen;  // GET api / review / 5 public HttpResponseMessage Get (int id) var category = _reviewRepository.Get (id); if (category == null) return Request.CreateResponse (HttpStatusCode.NotFound);  retourneer Request.CreateResponse (HttpStatusCode.OK, categorie);  // POST api / review public HttpResponseMessage Post (Review review) var response = Request.CreateResponse (HttpStatusCode.Created, review); // Haal de URL op om de zojuist gemaakte beoordeling op te halen. response.Headers.Location = new Uri (Request.RequestUri, string.Format ("beoordelingen / 0", review.Id)); _reviewRepository.Add (review); antwoord teruggeven;  // 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 / recensies / categorieën / category public HttpResponseMessage GetByCategory (tekenreekscategorie) var findCategory = _categoriesRepository.GetByName (category); if (findCategory == null) return Request.CreateResponse (HttpStatusCode.NotFound);  return Request.CreateResponse (HttpStatusCode.OK, _reviewRepository.GetByCategory (findCategory));  // GET API / reviews / comments / id public HttpResponseMessage GetReviewComments (int id) var reviewComments = _reviewRepository.GetReviewComments (id); if (reviewComments == null) return Request.CreateResponse (HttpStatusCode.NotFound);  return Request.CreateResponse (HttpStatusCode.OK, reviewComments);

Deze code gebruikt IReviewRepository en ICategoriesRepository objecten om de juiste actie uit te voeren (bijvoorbeeld: gegevens ophalen voor GET-aanvragen, gegevens toevoegen met POST-aanvragen, enz.). Deze respositories worden geïnjecteerd met Ninject via Constructor Injectie.

Als je nog geen Fiddler hebt, download het nu - zelfs als je geen .NET-ontwikkelaar bent.

Merk op dat sommige van de methoden verschillende gegevenstypen retourneren. WebAPI geeft ons de mogelijkheid om een ​​niet-stringend gegevenstype terug te geven (zoals IEnumerable), en het serialiseert het object om het antwoord van de server te verzenden. U kunt ook het nieuwe gebruiken HttpResonseMessage klasse om een ​​specifieke HTTP-statuscode terug te geven samen met de geretourneerde gegevens. Een manier om een ​​te maken HttpResponseMessage object is door te bellen Request.CreateResponse (responseCode, data).

We kunnen ons WebAPI-project goed testen met een tool zoals Fiddler2. Als je nog geen Fiddler hebt, download het nu - zelfs als je geen .NET-ontwikkelaar bent. Fiddler is een fantastische HTTP-foutopsporingstool. Zodra u Fiddler gebruikt, klikt u op RequestBuilder en voert u de API-URL in die u wilt testen. Kies vervolgens het juiste verzoektype. Als u een POST-aanvraag doet, wees er dan zeker van en specificeer a Inhoudstype: toepassing / json header en plaats vervolgens een geldige JSON-structuur in de hoofdtekst van het verzoek. De volgende afbeelding toont een onbewerkt JSON POST-verzoek aan de api / beoordelingen URL:

Wanneer u het verzoek verzendt, ziet u iets als de volgende afbeelding:

Let op de statuscode van de POST-aanvraag is een 201. WebAPI doet geweldig werk van het retourneren van de juiste statuscode voor een RESTfull-webservice. Veel plezier met Fiddler2, het is een fantastische tool!

Met WebAPI kunt u de routering voor de controllers opgeven (net als bij MVC). In MVC4, a RouteConfig.cs bestand is toegevoegd aan de App_Start map. Routes voor een WebAPI-project zijn net als MVC-routes.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/RouteConfig.cs routes.MapHttpRoute (naam: "GetReviewComments", routeTemplate: "api / reviews / comments / id", standaardinstellingen : nieuw id = RouteParameter.Optioneel, controller = "Reviews", action = "GetReviewComments"); routes.MapHttpRoute (naam: "GetByCategories", routeTemplate: "api / reviews / categorieën / category", standaardwaarden: nieuw category = RouteParameter.Optioneel, controller = "Reviews", action = "GetByCategory"); routes.MapHttpRoute (naam: "DefaultApi", routeTemplate: "api / controller / id", standaardwaarden: nieuw id = RouteParameter.Optioneel);

De DefaultApi route wordt automatisch gegenereerd door Visual Studio. De andere twee routes zijn aangepast en verwijzen naar specifieke methoden op de controller voor beoordelingen. Er zijn veel artikelen en tutorials die goede informatie over routing bieden. Zorg ervoor dat je dit leest.

MVC4

Dat omvat veel van wat WebAPI te bieden heeft. Vervolgens zullen we een paar methoden schrijven om de gegevens weer te geven. We consumeren de API in een klein beetje, maar voor nu gebruiken we de opslagplaatsen in onze HomeController. EEN HomeController is gemaakt door Visual Studio; laten we gewoon de methoden aanpassen om de gegevens weer te geven. Laten we eerst een lijst van de categorieën in de Inhoudsopgave methode.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs private ICategoriesRepository _categoriesRepository get; vast te stellen;  private IReviewRepository _reviewRepository get; vast te stellen;  public HomeController (ICategoriesRepository-categorieënRepository, IReviewRepository reviewRepository) _categoriesRepository = categoriesRepository; _reviewRepository = reviewRepository;  public ActionResult Index () var categories = _categoriesRepository.GetAll (); return View (categorieën);

Hier blijven we DI gebruiken door de repositories te accepteren als parameters voor de HomeController constructeur. Ninject injecteert automatisch de juiste betonklassen voor ons. Laten we vervolgens een code toevoegen aan de Inhoudsopgave weergave om de categorieën weer te geven:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Index.cshtml @model IEnumerable 
Kies een categorie:
 
     @foreach (var category in Model)  
  •  @categorie naam 
    •

Dit genereert een lijst met categorieën waarop gebruikers kunnen klikken. Voeg nu een nieuwe methode toe aan HomeController die een Beoordeling. We zullen deze methode noemen beoordelingen, hier getoond: 

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs public ActionResult Reviews (string id) Lijst beoordelingen = nieuwe lijst(); if (! string.IsNullOrWhiteSpace (id)) beoordelingen = _reviewRepository.GetByCategory (_categoriesRepository.GetByName (id)). ToList ();  else reviews = _reviewRepository.GetAll (). ToList ();  foreach (var review in recensies) var comments = _reviewRepository.GetReviewComments (review.Id); review.Comments = comments.ToList ();  return View (recensies);

Omdat er al een route bestaat / Controller / actie / id, u kunt een URL gebruiken zoals Home / Reviews / Artsen. De routing-engine geeft "Artsen" door als de ID kaart parameter naar de beoordelingen methode. Wij gebruiken de ID kaart als de categorie en alle beoordelingen ophalen die aan die categorie zijn gekoppeld. Als er echter geen categorie wordt opgegeven, halen we eenvoudig alle beoordelingen in de database op. Zodra we alle beoordelingen hebben, geven we de beoordelingslijst door aan de weergave. Laten we nu naar de weergave kijken:

 // 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 says,", comment.Email): "") 
    @ comment.Content
     
    •

Deze code maakt gebruik van een nieuwe functie van MVC4. De

    element klasse kenmerk wordt niet in de HTML weergegeven als hasComments is nul. Lees hier meer over deze functie.

    JavaScript

    Geen enkele moderne webapp is compleet zonder JavaScript en we gebruiken het om onze WebAPI-service te gebruiken. We gebruiken hiervoor Backbone.js; dus ga verder en download Backbone en zijn afhankelijkheid Underscore. Plaats de JavaScript-bestanden in de scripts directory.

    We maken gebruik van nog een nieuwe MVC4-functie genaamd scriptbundeling. In de App_Start map, vindt u de BundleConfig.cs het dossier. In dit bestand kunt u MVC4 configureren om JavaScript-bestanden samen te bundelen. Open het en voeg een nieuwe bundel toe, zoals dit:

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

    Dan in de /Views/Shared/_Layout.cshtml bestand, voeg het volgende toe aan de onderkant van het hoofdgedeelte van de pagina:

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

    Hiermee worden uw scripts gebundeld als uw toepassing zich in de foutopsporingsmodus bevindt, of laat u ze met rust terwijl het programma is uitgeschakeld.

    De MVC4-code die we hebben geschreven voor het ophalen van de beoordelingslijst is een prima manier om ze weer te geven, maar alle nieuwe hawtness gebruikt Ajax. Dus laten we de code refactiveren om Backbone.js te gebruiken. Via JavaScript halen we de weergaven asynchroon op nadat de pagina is geladen. Maak een nieuw bestand in de scripts map genoemd home.js. Voeg de volgende code toe aan dat bestand:

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

    Dit zijn de JavaScript-gegevensmodellen, die elk overeenkomen met een URL om gegevens op te halen uit de WebAPI-service. Laten we nu de weergave schrijven:

     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 (weergave. el););

    Deze weergave is voor de volledige lijst met recensies. Wanneer de verzameling is ophalen () methode wordt aangeroepen, het triggert de reset evenement en vervolgens oproepen render (). De derde parameter die is doorgegeven aan de op() methode is de scope, of wat deze zal in de render () Bel terug. In de render () methode, bel de collectie's elk() methode, het passeren van de renderItem () methode. De renderItem () methode wordt aangeroepen op elk item in de verzameling, waardoor een nieuw item wordt gegenereerd ReviewItem voor elke beoordeling.

    De code voor ReviewItem volgt:

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

    WebAPI is een fantastische toevoeging aan de ASP.NET-stack; een feature-rijke REST-gebaseerde API was nog nooit zo eenvoudig.

    De ReviewItem weergave is verantwoordelijk voor het weergeven van elke afzonderlijke beoordeling. De initialiseren () methode compileert de sjabloon die wordt gebruikt om elke beoordeling weer te geven; deze sjabloon bevindt zich in a

      Let op de @sectiescripts in de bovenstaande code. Dit is geen nieuwe functie voor MVC4, maar het is een geweldige tool om specifieke stukjes JavaScript weer te geven. In de _layout.cshtml bestand, er is ook een @RenderSection ("scripts", vereist: false) waardoor de sectie wordt gedefinieerd in de weergave. De

      Dat is de sjabloon. Om het te gebruiken, doe dit:

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

      Er zijn veel JavaScript templatiekaders beschikbaar op het web: Handlebars.js, mustache.js en Hogan.js zijn behoorlijk populair. Zorg ervoor dat u ze uitzoekt en degene kiest die voor u werkt.

      Conclusie

      WebAPI is een fantastische toevoeging aan de ASP.NET-stack; een feature-rijke REST-gebaseerde API was nog nooit zo eenvoudig. Er zijn veel geweldige nieuwe functies in MVC4. Zorg ervoor dat je ze bekijkt! Zoals ik eerder al zei, is de code voor dit voorbeeld beschikbaar op Github. Vork het!

      Code
    ×