IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

MVC Music Store


précédentsommaire

XLI. 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.

XLII. 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.

Image non disponible

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 :

 
Sélectionnez
//
// 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.

Image non disponible

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 :

 
Sélectionnez
@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.

 
Sélectionnez
@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.

XLIII. 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.

Image non disponible

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 :

 
Sélectionnez
//
// 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.

Image non disponible

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

 
Sélectionnez
@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>

XLIV. 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 :

 
Sélectionnez
<!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.

XLV. 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 :

 
Sélectionnez
@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.

Image non disponible

XLVI. 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 :

 
Sélectionnez
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.

 
Sélectionnez
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.

 
Sélectionnez
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.

 
Sélectionnez
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.

 
Sélectionnez
@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.

Image non disponible

XLVII. 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 Jon Galloway pour son aimable autorisation de traduire l'article, ainsi que ClaudeLELOUP, Philippe Vialatte, Thomas Levesque, jacques_jean et jpcheck pour la relecture orthographique.


précédentsommaire

Copyright © 2012 Jon Galloway. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.