Construction d'une application ASP.NET MVC4 avec EF et WebAPI

ASP.NET MVC a parcouru un long chemin depuis que "The Gu" a noté quelques idées lors d'un trajet en avion pour une conférence en 2007. En un peu moins de quatre ans, ASP.NET MVC a vu sa quatrième version, et fournit aux développeurs un environnement qui facilite le développement, rationalise les processus et favorise les modèles modernes.

Plonger

Sauter directement est l’un des meilleurs moyens de maîtriser les nouvelles technologies. Allons-y et plongeons dans le code!

Installer

J'utiliserai la version candidate de Visual Studio 2012, disponible ici. Je recommande également de télécharger SQL Server 2012 car le nouveau Management Studio est une amélioration indispensable par rapport aux versions précédentes..

Une fois que VS 2012 est opérationnel, créez-vous un nouveau projet. Aller à Fichier -> Nouveau projet et choisissez un Application Internet. Ce n'est pas un modèle parfait, mais ça va faire le travail.

Remarque: le code de cette application de démonstration est situé dans un dépôt Github. Je ne vais pas passer en revue chaque élément de code dans cette application, mais vous aurez une bonne compréhension d'une application MVC4 à la fin de ce tutoriel..

Cadre d'entité

Je vais utiliser le code First d'Entity Framework (EF) pour le modèle de données. EF Code First nous permet de générer des tables de base de données avec rien de plus que quelques objets Plain Old CLR Objects (POCO). De plus, EF nous permet d'utiliser les expressions LINQ to Entities et Lambda, facilitant ainsi l'interrogation et l'émission de commandes. Une victoire gagnant!

Notre application sera un site de révision pour la révision… de choses. Par conséquent, le modèle de données doit incorporer tous les éléments nécessaires à un seul examen. Nous allons commencer avec une classe appelée La revue. Écrivez la classe suivante dans son propre fichier dans le Des modèles annuaire:

 // Review.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Review.cs classe publique Review public int Id get; ensemble;  [Obligatoire] chaîne publique Content get; ensemble;  [Obligatoire] [StringLength (128)] chaîne publique Sujet get; ensemble;  [Obligatoire] chaîne publique Email get; ensemble;  [Obligatoire] public bool IsAnonymous get; ensemble;  public int CategoryId get; ensemble;  public virtual Category Catégorie get; ensemble;  public virtuel IEnumerable Commentaires get; ensemble; 

le La revue la classe a c'est Id (la clé primaire), le Contenu propriété pour stocker la revue, un Sujet comme un nom de restaurant (ou tout autre nom d’organisation), un Email propriété, et un IsAnonymous flag pour indiquer si le réviseur est anonyme. le CatégorieId et le Catégorie propriétés créent une relation de clé étrangère pour lier une révision à une Catégorie (par exemple: médecins, dentistes, etc.). Et dernier est une collection de Commentaire objets.

Maintenant, écris le Commentaire classe. Encore une fois, ajoutez la nouvelle classe à la Des modèles annuaire:

 // Comment.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Comment.cs public class Commentaire public int Id get; ensemble;  [Obligatoire] chaîne publique Content get; ensemble;  [Obligatoire] chaîne publique Email get; ensemble;  [Obligatoire] public bool IsAnonymous get; ensemble;  public int ReviewId get; ensemble;  public Review Review get; ensemble; 

La classe de commentaire a un Id propriété pour la clé primaire, Contenu du commentaire, un Email propriété, et un IsAnonymous drapeau pour les utilisateurs. Puis il y a ReviewId et La revue propriétés pour créer une relation de clé étrangère entre les commentaires et les critiques.

Le dernier est le Catégorie classe. Voici son code:

 // Category.cs // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Category.cs public class Catégorie public int Id get; ensemble;  [Obligatoire] [StringLength (32)] chaîne publique Nom get; ensemble; 

Cette classe est explicite.

Vous avez probablement remarqué une utilisation intensive du [Champs obligatoires] annotation de données dans les classes ci-dessus. Ceux-ci désignent un champ non nullable dans la base de données et permettent une validation ultérieure. Vous pouvez également créer vos propres attributs de validation personnalisés si vous le souhaitez. En plus de [Champs obligatoires], nous avons également utilisé le virtuel mot-clé pour certaines propriétés; ces propriétés signifient des relations de clé étrangère avec d'autres tables.

Pour créer les tables correspondantes pour ces classes, vous devez créer un DbContext classe. Le code suivant crée une classe de contexte appelée CommentéContext:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContext.cs public class RéviséContext: DbContext public DbSet Avis get; ensemble;  DbSet public Catégories get; ensemble;  DbSet public Commentaires get; ensemble;  public CommentedContext () Configuration.ProxyCreationEnabled = false; 

EF Code First nous permet de générer des tables de base de données avec rien de plus que de simples objets POCO (Plain Old CLR Objects).

Chaque propriété de cette classe correspond à une table lors de la génération de la base de données. le Configuration.ProxyCreationEnabled = false; s'assure que les entités sont récupérées en tant qu'objets de leurs classes respectives au lieu de mandataires - ce qui facilite grandement le débogage.

Ensuite, nous configurons un initialiseur de base de données. Un initialiseur garantit que la base de données est créée correctement lorsque le modèle de données est modifié. Sans initialiseur, vous devrez supprimer manuellement la base de données si vous modifiez l'un de vos POCO. Il existe différents types d'initialisateurs parmi lesquels choisir: DropCreateDatabaseAlways et DropCreateDatabaseIfModelChanges. Les noms sont explicites. Celui que nous allons utiliser est DropCreateDatabaseIfModelChanges.

le DropCreateDatabaseAlways et DropCreateDatabaseIfModelChanges Les initialiseurs ont un effet secondaire: ils suppriment les tables (et donc les données) dans la base de données lorsque la structure du modèle change. Mais EF Code First fournit un troisième moyen de générer des bases de données: Migrations. Cette nouvelle fonctionnalité permet de suivre les modifications apportées à la base de données et ne perd pas de données lorsque les classes POCO changent..

Voici le code pour notre initialiseur:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/ReviewedContextInitializer.cs // http://slipsum.com/ classe publique CommentéeContextInitializer: DropCreateDatabaseIfModelChanges protected override void Seed (contexte examinéContext) // Utilisez le contexte pour créer la base de données. 

le CommentéContextInitialiseur la classe annule la La graine() méthode. Cela nous donne la possibilité de remplir notre base de données avec certaines données de test. Maintenant, nous devons visiter le Global.asax déposer et ajouter la ligne suivante à la Application_Start () méthode:

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

Créons des référentiels pour extraire des données de la base de données, puis configurons l’injection de dépendance (DI) avec Ninject. Si vous ne savez pas exactement ce que sont DI ou Inversion of Control (IoC), prenez le temps de lire cet article..

Fondamentalement, l’idée de l’injection de dépendance consiste à injecter une dépendance concrète dans une classe, par opposition à coder en dur la classe pour qu'elle soit dépendante de la dépendance concrète. En d'autres termes, il s'agit du découplage d'une classe concrète d'une autre. Si cela reste clair comme de la boue, regardons un bref exemple:

 classe publique Foo private Bar _bar; public Foo () _bar = new Bar (); 

Ce code crée une classe appelée Foo. Cela dépend de la fonctionnalité d'un objet de type Bar, et le Bar l'objet est créé dans le Foo classe. Cela peut être difficile à maintenir et à tester unitaire pour les raisons suivantes:

• Foo et Bar sont étroitement couplés. En conséquence, la maintenance est loin d'être idéale.
• Foo dépend d'une mise en œuvre spécifique de Bar, rendant les tests unitaires difficiles.

Ce code peut être amélioré avec juste quelques modifications. Regardez la version révisée Foo classe:

 classe publique Foo private IBar _bar; public Foo (IBar bar) _bar = bar; 

En un peu moins de quatre ans, ASP.NET MVC a vu sa quatrième version…

Maintenant le Foo classe ne dépend pas d'une mise en œuvre spécifique de Bar. Au lieu de cela, un objet d'une classe implémentant le IBar l'interface est fournie à Foo via le constructeur de ce dernier. Cette approche améliore considérablement la maintenabilité, tout en nous permettant d’injecter IBar object - facilite le test unitaire de notre code.

Avec cette brève description, faisons en sorte que Ninject soit opérationnel. Lancez la console du gestionnaire de packages et exécutez Paquet d'installation Ninject.MVC3. Cela ajoutera Ninject à notre projet.

Le premier référentiel que nous allons créer est le AvisDépôt, et il mettra en œuvre le IReviewRepository interface. Voici l'interface:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Abstract/IReviewRepository.cs interface publique IReviewRepository Review Get (id id); IQueryable Avoir tout(); Review Ajouter (Review Review); Examen de mise à jour (examen d'examen); void Delete (int reviewId); IEnumerable GetByCategory (catégorie catégorie); IEnumerable GetReviewComments (int id); 

Cette interface garantit que nos référentiels d’examen fournissent les opérations CRUD de base. Nous avons également l’utilité de récupérer les avis d’une catégorie spécifique, ainsi que les commentaires d’un commentaire donné. Maintenant écrivons une classe concrète implémentant cette interface:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Models/Repos/ReviewRepository.cs, classe publique ReviewRepository: IReviewRepository private CommentedContext _db get; ensemble;  public ReviewRepository (): this (nouvelle ReviewContext ())  public ReviewRepository (base de données ReviewContext) _db = db;  public Review Obtenir (id int) return _db.Reviews.SingleOrDefault (r => r.Id == id);  public IQueryable GetAll () return _db.Reviews;  public Review Add (examen critique) _db.Reviews.Add (examen); _db.SaveChanges (); avis de retour;  public Review Update (Révision de révision) _db.Entry (révision) .State = EntityState.Modified; _db.SaveChanges (); avis de retour;  public void Delete (int reviewId) var review = Get (reviewId); _db.Reviews.Remove (examen);  public IEnumerable GetByCategory (catégorie catégorie) return _db.Reviews.Where (r => r.CategoryId == category.Id);  public IEnumerable GetReviewComments (int id) return _db.Comments.Where (c => c.ReviewId == id); 

WebAPI est un framework de type MVC que nous pouvons utiliser pour créer facilement une API RESTful…

Ce référentiel repose sur un CommentéContext objet stocké en tant que variable de classe. Cela nous permet d’utiliser LINQ dans n’importe laquelle des méthodes du référentiel, facilitant ainsi l’interaction de la base de données..

WebAPI a une fonctionnalité intéressante qui nous permet d'ajouter notre propre framework DI. Cette fonctionnalité dépasse le cadre de ce didacticiel. Assurez-vous donc de lire cet article pour obtenir cette configuration..

L’un des emplacements les plus importants de notre code est le App_Start dossier, qui contient un fichier appelé NinjectCommonWeb.cs (l'installation de Ninject ajoute automatiquement ce fichier à App_Start). Ce fichier contient une classe statique appelée NinjectWebCommon, et il a une méthode appelée RegisterServices (). Dans cette méthode, ajoutez le code suivant:

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

Les trois premières instructions lient une interface à une implémentation concrète, et la quatrième ligne configure la DI pour WebAPI (fonctionnalité décrite dans l'article susmentionné)..

WebAPI

Créons maintenant les contrôleurs pour l'API. WebAPI est un framework de type MVC que nous pouvons utiliser pour créer facilement un service RESTful. Il peut être exécuté dans une application MVC4, dans son propre projet ou être auto-hébergé en dehors d'IIS. Mais ce n'est pas tout; il comporte de nombreuses autres fonctionnalités, telles que: la négociation de contenu (pour sérialiser automatiquement les données dans le format demandé), la liaison de modèle, la validation, etc..

Nous devons d’abord créer un noeud final avec WebAPI, et nous le faisons en créant une classe qui hérite ApiController. Commencer avec ceci est plutôt facile. Visual Studio 2012 a une nouvelle fonctionnalité qui crée un nouveau contrôleur partiellement échafaudé.

Cela créera une classe de contrôleur avec quelques méthodes déjà définies pour vous. Voici un exemple:

 // GET api / default1 public IEnumerable Get () retourne une nouvelle chaîne [] "valeur1", "valeur2";  // GET api / default1 / 5 chaîne publique Get (int id) return "value";  // POST api / default1 public void Post (valeur de chaîne)  // PUT api / default1 / 5 public void Put (id int, valeur de chaîne)  // DELETE api / default1 / 5 public void Supprimer (int id ) 

Les noms de méthodes correspondent au verbe HTTP qu'ils représentent. Nous allons maintenant créer le AvisContrôleur classe. Le code un peu long, mais assez simple.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/ReviewsController.cs classe publique ReviewsController: ApiController private ICategoriesRepository _categoriesRepository get; ensemble;  IReviewRepository privé _reviewRepository get; ensemble;  public ReviewsController (IReviewRepository reviewRepository, ICategoriesRepository categoriesRepository) _reviewRepository = reviewRepository; _categoriesRepository = categoriesRepository;  // GET api / review public IEnumerable Get () var reviews = _reviewRepository.GetAll (); renvoyer les avis;  // GET api / review / 5 public HttpResponseMessage Obtenir (id int) var category = _reviewRepository.Get (id); if (category == null) return Request.CreateResponse (HttpStatusCode.NotFound);  return Request.CreateResponse (HttpStatusCode.OK, catégorie);  // POST api / review public HttpResponseMessage Post (Review review) var response = Request.CreateResponse (HttpStatusCode.Created, review); // Récupère l'URL permettant de récupérer la révision nouvellement créée. response.Headers.Location = new Uri (Request.RequestUri, string.Format ("reviews / 0", review.Id)); _reviewRepository.Add (review); retour de réponse;  // 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 / reviews / categories / category public HttpResponseMessage GetByCategory (catégorie de chaîne) var findCategory = _categoriesRepository.GetByName (catégorie); 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); 

Ce code utilise IReviewRepository et ICatégoriesRepository objets permettant d'effectuer l'action appropriée (par exemple: récupération de données pour des requêtes GET, ajout de données avec des requêtes POST, etc.). Ninject via ces repositories est injecté via Injection de constructeur.

Si vous n'avez pas encore Fiddler, procurez-vous-le maintenant, même si vous n'êtes pas un développeur .NET.

Notez que certaines méthodes renvoient des types de données différents. WebAPI nous permet de renvoyer un type de données non-chaîne (tel que IEnumerable), et il sérialisera l'objet à envoyer dans la réponse du serveur. Vous pouvez également utiliser le nouveau HttpResonseMessage classe à renvoyer un code d’état HTTP spécifique avec les données renvoyées. Une façon de créer un HttpResponseMessage l'objet est en appelant Request.CreateResponse (code de réponse, données).

Nous pouvons tester correctement notre projet WebAPI avec un outil tel que Fiddler2. Si vous n'avez pas encore Fiddler, procurez-vous-le maintenant, même si vous n'êtes pas un développeur .NET. Fiddler est un fantastique outil de débogage HTTP. Une fois que vous exécutez Fiddler, cliquez sur RequestBuilder et entrez l'URL de l'API que vous souhaitez tester. Ensuite, choisissez le type de demande approprié. Si vous faites une demande POST, assurez-vous et spécifiez un Type de contenu: application / json en-tête, puis placez une structure JSON valide dans le corps de la demande. L’image suivante illustre une demande JSON POST brute au serveur api / critiques URL:

Lorsque vous envoyez la demande, vous verrez quelque chose comme l'image suivante:

Notez que le code de statut de la demande POST est 201. WebAPI renvoie très bien le code de statut correct pour un service Web RESTfull. Amusez-vous avec Fiddler2, c'est un outil fantastique!

Avec WebAPI, vous pouvez spécifier le routage des contrôleurs (tout comme MVC). Dans MVC4, un RouteConfig.cs le fichier est ajouté au App_Start dossier. Les routes pour un projet WebAPI ressemblent aux routes MVC.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/App_Start/RouteConfig.cs routes.MapHttpRoute (nom: "GetReviewComments", routeTemplate: "api / reviews / comments / id", defaults : new id = RouteParameter.Optional, controller = "Avis", action = "GetReviewComments"); itinéraires.MapHttpRoute (nom: "GetByCategories", routeTemplate: "api / reviews / catégories / catégorie", par défaut: nouveau category = RouteParameter.Optional, controller = "Avis", action = "GetByCategory"); routes.MapHttpRoute (nom: "DefaultApi", routeTemplate: "api / contrôleur / id", par défaut: new id = RouteParameter.Optional);

le DefaultApi route est automatiquement généré par Visual Studio. Les deux autres itinéraires sont personnalisés et mappés à des méthodes spécifiques sur le contrôleur Reviews. De nombreux articles et tutoriels fournissent de bonnes informations sur le routage. Assurez-vous de vérifier celui-ci.

MVC4

Cela couvre beaucoup de ce que WebAPI a à offrir. Ensuite, nous écrirons quelques méthodes pour afficher les données. Nous allons utiliser l'API dans un petit moment, mais pour le moment, nous allons utiliser les référentiels de notre AccueilContrôleur. UNE AccueilContrôleur a été créé par Visual Studio; modifions simplement ses méthodes pour afficher les données. D'abord, obtenons une liste des catégories dans le Indice méthode.

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs private ICategoriesRepository _categoriesRepository get; ensemble;  IReviewRepository privé _reviewRepository get; ensemble;  public HomeController (ICategoriesRepository categoriesRepository, IReviewRepository reviewRepository) _categoriesRepository = categoriesRepository; _reviewRepository = reviewRepository;  public ActionResult Index () var categories = _categoriesRepository.GetAll (); retourner la vue (catégories); 

Ici, nous continuons à utiliser DI en acceptant les référentiels en tant que paramètres de la AccueilContrôleur constructeur. Ninject nous injecte automatiquement les classes concrètes appropriées. Ensuite, ajoutons du code à la Indice voir pour afficher les catégories:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Views/Home/Index.cshtml @model IEnumerable 
Choisissez une catégorie:
 
 @foreach (catégorie var dans Model)  
 @Nom de catégorie 
  

Cela génère une liste de catégories sur lesquelles les utilisateurs peuvent cliquer. Maintenant, ajoutez une nouvelle méthode à AccueilContrôleur qui récupère un La revue. Nous appellerons cette méthode Avis, montré ici:

 // https://github.com/jcreamer898/NetTutsMvcEf/blob/master/Reviewed/Controllers/HomeController.cs public Avis sur ActionResult (string id) List reviews = nouvelle liste(); if (! string.IsNullOrWhiteSpace (id)) reviews = _reviewRepository.GetByCategory (_categoriesRepository.GetByName (id)). ToList ();  else reviews = _reviewRepository.GetAll (). ToList ();  foreach (var review dans les reviews) var comments = _reviewRepository.GetReviewComments (review.Id); review.Comments = comments.ToList ();  retour Voir (revues); 

Parce qu’une route existe déjà pour / contrôleur / action / id, vous pouvez utiliser une URL telle que Accueil / Avis / Médecins. Le moteur de routage passera "Doctors" en tant que identifiant paramètre à la Avis méthode. Nous utilisons le identifiant en tant que catégorie et récupérer toutes les critiques associées à cette catégorie. Cependant, si aucune catégorie n'est fournie, nous récupérons simplement toutes les revues de la base de données. Une fois que nous avons toutes les critiques, nous passons la liste des critiques à la vue. Regardons la vue en ce moment:

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

Ce code utilise une nouvelle fonctionnalité de MVC4. le

éléments classe attribut n'apparaîtra pas dans le code HTML si hasComments est nul. En savoir plus sur cette fonctionnalité ici.

JavaScript

Aucune application web moderne n'est complète sans JavaScript, et nous l'utilisons pour utiliser notre service WebAPI. Nous allons utiliser Backbone.js pour cela; Alors, avancez et téléchargez Backbone et sa dépendance Underscore. Placez les fichiers JavaScript dans le Les scripts annuaire.

Nous allons tirer parti d'une autre nouvelle fonctionnalité de MVC4 appelée «groupement de scripts». dans le App_Start dossier, vous trouverez le BundleConfig.cs fichier. Dans ce fichier, vous pouvez configurer MVC4 pour regrouper des fichiers JavaScript. Ouvrez-le et ajoutez un nouveau paquet, comme ceci:

 bundles.Add (nouveau ScriptBundle ("~ / bundles / Backbone"). Include ("~ / Scripts / underscore *", "~ / Scripts / Backbone *"));

Puis dans le /Views/Shared/_Layout.cshtml fichier, ajoutez ce qui suit au bas du corps de la page:

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

Cela regroupera vos scripts si votre application est en mode débogage, ou les laissera seuls avec elle désactivée.

Le code MVC4 que nous avons écrit pour récupérer la liste de critiques est un bon moyen de les afficher, mais toute la nouvelle approche utilise Ajax. Refactorisons donc le code pour utiliser Backbone.js. Grâce à JavaScript, nous allons récupérer les vues de manière asynchrone après le chargement de la page. Créer un nouveau fichier dans le Les scripts dossier appelé home.js. Ajoutez le code suivant à ce fichier:

 var Review = 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 /');

Il s'agit des modèles de données JavaScript, chacun correspondant à une URL permettant d'extraire des données du service WebAPI. Maintenant écrivons la vue:

 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 (modèle) var view = new ReviewItem (modèle: modèle); ceci. $ el.append (vue. el););

Cette vue concerne la liste complète des avis. Quand la collection est chercher () méthode est appelée, elle déclenche la réinitialiser événement et appelle ensuite rendre(). Le troisième paramètre passé à la sur() méthode est la portée, ou quoi ce sera dans le rendre() rappeler. dans le rendre() méthode, appelez la collection chaque() méthode, en passant le renderItem () méthode. le renderItem () La méthode sera appelée sur chaque élément de la collection, générant une nouvelle ReviewItem pour chaque revue.

Le code pour ReviewItem suit:

 var ReviewItem = Backbone.View.extend (events: 'cliquez sur un': 'getComments', tagName: 'li', initialisez: function () this.template = _.template ($ ('# commentairesTemplate') .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 = new CommentItem (modèle: comment); self.comments.append (item.el);); this. $ el.find ('a'). mas (););

WebAPI est un ajout fantastique à la pile ASP.NET. une API basée sur REST riche en fonctionnalités n'a jamais été aussi simple.

le ReviewItem view est responsable du rendu de chaque révision individuelle. le initialiser() méthode compile le modèle utilisé pour afficher chaque avis; ce modèle réside dans un

Remarquez le scripts de section dans le code ci-dessus. Ce n'est pas une nouvelle fonctionnalité de MVC4, mais c'est un excellent outil pour restituer des éléments spécifiques de JavaScript. dans le _layout.cshtml fichier, il y a aussi un @RenderSection ("scripts", requis: false) qui rend la section définie dans la vue. le

C'est le modèle. Pour l'utiliser, procédez comme suit:

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

Il existe de nombreux frameworks de templates JavaScript disponibles sur le Web: Handlebars.js, moustache.js et Hogan.js sont très populaires. Soyez sûr et vérifiez-les et choisissez celui qui fonctionne pour vous.

Conclusion

WebAPI est un ajout fantastique à la pile ASP.NET. une API basée sur REST riche en fonctionnalités n'a jamais été aussi simple. Il y a beaucoup de nouvelles fonctionnalités intéressantes dans MVC4. Soyez sûr et vérifiez-les! Comme je l'ai mentionné précédemment, le code de cet exemple est disponible sur Github. Fourche-le!

Code