Developpez.com - Microsoft DotNET
X

Choisissez d'abord la catégorieensuite la rubrique :


Traduction du MVC Music Store Partie 10 : Mise à jour finale de la navigation et de la conception du site et conclusion

Date de publication : 10/01/2012. Date de mise à jour : 10/01/2012.

Par Jon Galloway (Blog)
 Jean-Michel Ormes (Traduction) (Home) (Blog)
 

Le MVC Music Store est une application d'étude qui introduit et explique étape par étape comment utiliser ASP.NET MVC et Visual Web Developer pour faire du développement web. Le MVC Music Store est un exemple simplifié d'application de magasin qui vend des albums de musique en ligne, implémente l'administration du site, l'authentification d'utilisateurs et la fonctionnalité d'achat sous forme de panier. Ce tutoriel détaille toutes les étapes à suivre pour construire le MVC Music Store. La partie 10 du tutoriel s'intitule "Mise à jour finale de la navigation et de la conception du site et conclusion".
Retrouvez l'ensemble des articles de la série sur cette page : MVC Music Store
N'hésitez pas à laisser votre avis sur le contenu de l'article directement via le forum : 5 commentaires Donner une note à l'article (5)

       Version PDF (Miroir)   Version hors-ligne (Miroir)
Viadeo Twitter Facebook Share on Google+        



Traduction
1. Introduction
2. Création de la vue partielle du résumé du panier
3. Création de la vue partielle du menu Genre
4. Mise à jour de la mise en page du site afin d'afficher nos vues partielles
5. Mise à jour de la page de navigation du magasin
6. Mettre à jour la page d'accueil afin d'afficher les albums les plus vendus
7. Conclusion
Remerciements


Traduction

Cet article est la traduction non officielle de l'article original de en Jon Galloway,en Part 10: Final Updates to Navigation and Site Design, Conclusion

Le code source ainsi que le support technique sont disponibles à cette adresse : en http://mvcmusicstore.codeplex.com


1. Introduction

Nous avons finalisé toutes les fonctionnalités majeures de notre site, mais il nous reste encore quelques fonctionnalités à ajouter à la navigation du site, la page d'accueil et la page de navigation du magasin.


2. Création de la vue partielle du résumé du panier

Nous voulons exposer le nombre d'articles du panier de l'utilisateur sur l'ensemble du site.

Nous pouvons facilement implémenter cela en créant une vue partielle que l'on ajoute à notre Site.master.

Comme indiqué précédemment, le contrôleur ShoppingCart inclut une action CartSummary qui retourne une vue partielle :

	  	
//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]
 public ActionResult CartSummary()
{
    var cart = ShoppingCart.GetCart(this.HttpContext);
 
    ViewData["CartCount"] = cart.GetCount();
    return PartialView("CartSummary");
}
		
			
Pour créer la vue partielle CartSummary, faites un clic-droit sur le dossier Views/ShoppingCart folder et choisissez "Add View". Nommez-la "CartSummary" et cochez l'option "Create a partial view" comme indiqué ci-dessous.

La vue partielle CartSummary est vraiment simple - c'est juste un lien vers la vue Index ShoppingCart qui montre le nombre d'articles dans le panier. Le code complet pour le fichier CartSummary.cshtml se présente comme suit :

	  	
@Html.ActionLink("Cart
(" + ViewData["CartCount"] + ")",
    "Index",
    "ShoppingCart",
    new { id = "cart-status" })
		
			
Nous pouvons inclure une vue partielle au sein de n'importe quelle page du site, y compris le Site.master, en utilisant la méthode Html.RenderAction. RenderAction nous oblige à préciser le nom de l'action ("CartSummary") et le nom du contrôleur ("ShoppingCart") comme ci-dessous.

	  	
@Html.RenderAction("CartSummary",
"ShoppingCart")
		
			
Avant de l'ajouter à la mise en page du site, nous allons également créer le menu Genre afin de n'effectuer toutes les mises à jour du Site.master qu'une seule fois.


3. Création de la vue partielle du menu Genre

Nous pouvons rendre la vie beaucoup plus facile à nos utilisateurs qui naviguent à travers le magasin en ajoutant un menu Genre qui va lister tous les genres disponibles dans notre magasin.

Nous allons suivre les mêmes étapes en créant une vue partielle GenreMenu, et ensuite nous pourrons ajouter les deux vues au Site.master. Tout d'abord, ajoutez l'action GenreMenu suivante au StoreController :

	  	
//
// GET: /Store/GenreMenu
[ChildActionOnly]
 public ActionResult GenreMenu()
{
    var genres = storeDB.Genres.ToList();
    return PartialView(genres);
 }
		
			
Cette action retourne une liste de Genres qui sera affichée par la vue partielle que nous allons bientôt créer.

Note : nous avons ajouté l'attribut [ChildActionOnly] à cette action, ce qui indique que nous voulons que cette action soit utilisée uniquement par une vue partielle. Cet attribut permettra d'éviter qu'elle soit utilisée en parcourant /Store/GenreMenu. Ce n'est pas préconisé pour les vues partielles, mais c'est une bonne pratique, dès lors que nous voulons être sûr que notre action soit utilisée telle que nous le souhaitons. Nous retournons également une vue partielle plutôt qu'une vue, ce qui permet au moteur de vue de savoir qu'il ne doit pas utiliser de layout pour cette vue, comme il est inclus dans les autres vues.

Faites un clic-droit sur l'action GenreMenu et créez une vue partielle appelée GenreMenu qui est fortement typée en utilisant la classe Genre comme montré ci-dessous.

Mettez à jour le code de la vue partielle GenreMenu afin d'afficher les articles en utilisant une liste non-ordonnée comme suit.

	  	
@model IEnumerable<MvcMusicStore.Models.Genre>
<ul id="categories">
    @foreach (var genre in Model)
    {
        <li>@Html.ActionLink(genre.Name,
                "Browse", "Store", 
                new { Genre = genre.Name }, null)
        </li>
    }
</ul>
		
			

4. Mise à jour de la mise en page du site afin d'afficher nos vues partielles

Nous pouvons ajouter nos vues partielles à la mise en page du site (/Views/Shared/_Layout.cshtml) en appelant Html.RenderAction(). Nous allons les ajouter, ainsi que quelques balises supplémentaires pour les afficher, comme montré ci-dessous :

	  	
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" 
        type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"
        type="text/javascript"></script>
</head>
<body>
    <div id="header">
        <h1><a href="/">ASP.NET MVC MUSIC
STORE</a></h1>
        <ul id="navlist">
            <li class="first">
                <a href="@Url.Content("~")" id="current">
                    Home</a></li>
            <li><a href="@Url.Content("~/Store/")">Store</a></li>
            <li>@{Html.RenderAction("CartSummary", "ShoppingCart");}</li>
            <li><a href="@Url.Content("~/StoreManager/")">
                    Admin</a></li>
        </ul>        
    </div>
    @{Html.RenderAction("GenreMenu", "Store");}
    <div id="main">
        @RenderBody()
    </div>
    <div id="footer">
        built with <a href="http://asp.net/mvc">ASP.NET MVC 3</a>
    </div>
</body>
</html>
		
			
Dès lors, lorsque nous exécutons l'application, nous verrons le genre dans la zone de navigation de gauche et le résumé du panier en haut.


5. Mise à jour de la page de navigation du magasin

La page de navigation du magasin est fonctionnelle, mais n'est pas très jolie. Nous pouvons mettre à jour la page afin d'afficher les albums de plus belle façon en mettant à jour le code de la vue (qui se trouve dans /Views/Store/Browse.cshtml) comme suit :

	  	
@model MvcMusicStore.Models.Genre
 
@{
    ViewBag.Title = "Browse Albums";
}
 
<div class="genre">
    <h3><em>@Model.Name</em> Albums</h3>
 
    <ul id="album-list">
        @foreach (var album in Model.Albums)
        {
            <li>
                <a href="@Url.Action("Details", 
                    new { id = album.AlbumId })">
                    <img alt="@album.Title" 
                        src="@album.AlbumArtUrl" />
                    <span>@album.Title</span>
                </a>
            </li>
        }
    </ul>
</div>
		
			
Ici, nous faisons usage de Url.Action plutôt que Html.ActionLink de sorte que nous puissions appliquer un formatage spécial sur le lien pour y inclure l'illustration de l'album.

Remarque : nous affichons une couverture générique pour ces albums. Cette information est stockée dans la base de données et modifiable via le Store Manager. Vous êtes donc invités à ajouter vos propres créations.

Maintenant, lorsque nous parcourrons les genres, nous pourrons voir les albums affichés dans une grille avec l'illustration.


6. Mettre à jour la page d'accueil afin d'afficher les albums les plus vendus

Nous voulons présenter nos albums les plus vendus sur la page d'accueil afin d'augmenter les ventes. Nous allons donc faire quelques mises à jour du HomeController pour gérer cela et ajouter quelques éléments graphiques supplémentaires également.

Dans un premier temps, nous allons ajouter une propriété de navigation à la classe Album de sorte qu'EntityFramework sache qu'ils sont associés. Les dernières lignes de notre classe Album devraient maintenant ressembler à ceci :

	  	
public virtual Genre  Genre                  { get; set; }
public virtual Artist Artist                 { get; set; }
public virtual List<OrderDetail>OrderDetails { get; set; }
    }
}
		
			
Note : ceci nécessitera l'ajout d'une instruction using nous permettant d'avoir accès au namespace System.Collections.Generic.

Premièrement, nous allons ajouter un champ storeDB et l'instruction MvcMusicStore.Models, comme dans nos autres contrôleurs. Ensuite, nous allons ajouter la méthode suivante au HomeController qui va interroger notre base de données et trouver les albums les plus vendus en fonction d'OrderDetails.

	  	
private List<Album> GetTopSellingAlbums(int count)
 {
    // Group the order details by album and return
    // the albums with the highest count
    return storeDB.Albums
        .OrderByDescending(a => a.OrderDetails.Count())
        .Take(count)
        .ToList();
}
		
			
C'est une méthode privée, car nous ne voulons pas la rendre disponible en tant qu'action. Nous l'inclurons dans le HomeController pour plus de simplicité, mais vous êtes encouragés à déplacer votre logique métier dans des classes services plus appropriées.

Avec cela en place, nous pouvons mettre à jour l'action Index du contrôleur afin d'obtenir le top 5 des albums les plus vendus et les retourner à la vue.

	  	
public ActionResult Index()
{
    // Get most popular albums
    var albums = GetTopSellingAlbums(5);
 
    return View(albums);
 }
		
			
Le code complet du HomeController mis à jour est indiqué ci-dessous.

	  	
using System.Collections.Generic;
 using System.Linq;
 using System.Web.Mvc;
 using MvcMusicStore.Models;
 
namespace MvcMusicStore.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        MusicStoreEntities storeDB = new MusicStoreEntities();
        public ActionResult Index()
        {
            // Get most popular albums
            var albums = GetTopSellingAlbums(5);
 
            return View(albums);
        }
        private List<Album> GetTopSellingAlbums(int count)
        {
            // Group the order details by album and return
            // the albums with the highest count
            return storeDB.Albums
                .OrderByDescending(a => a.OrderDetails.Count())
                .Take(count)
                .ToList();
        }
    }
}
		
			
Enfin, nous aurons besoin de mettre à jour la vue Index du Home afin qu'elle puisse afficher une liste d'albums en mettant à jour le Model et d'ajouter la liste d'albums en bas. Nous allons en profiter pour ajouter également un titre et une section promotion à la page.

	  	
@model List<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "ASP.NET MVC Music Store";
}
<div id="promotion">
</div>
<h3><em>Fresh</em> off the grill</h3>
<ul id="album-list">
    @foreach (var album in Model)
    {
        <li><a href="@Url.Action("Details", "Store",
                new { id = album.AlbumId })">
            <img alt="@album.Title" src="@album.AlbumArtUrl" />
            <span>@album.Title</span>
</a>
        </li>
    }
</ul>
		
			
Maintenant, lorsque nous lançons l'application, nous allons voir notre page d'accueil mise à jour avec le top des albums les plus vendus et notre message de promotion.


7. Conclusion

Nous avons vu comment avec ASP.NET MVC il est facile de créer un site web sophisitiqué avec accès à la base de données, le membership, AJAX, etc. assez rapidement. Espérons que ce tutoriel vous a donné les bases dont vous avez besoin pour commencer à bâtir votre propre application ASP.NET MVC !


Remerciements

Je tiens à remercier en Jon Galloway pour son aimable autorisation de traduire l'article, ainsi que Philippe Vialatte, jacques_jean et jpcheck pour la relecture orthographique.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.0 TransitionalValid CSS!