Partie Mises à jour finales de la navigation et de la conception du site, conclusion

par Jon Galloway

Le Magasin de musique MVC est une application de tutoriel qui présente et explique pas à pas comment utiliser ASP.NET MVC et Visual Studio pour le développement web.

Le Magasin de musique MVC est un exemple d’implémentation de magasin léger qui vend des albums de musique en ligne et implémente l’administration de site de base, la connexion utilisateur et les fonctionnalités de panier d’achat.

Cette série de tutoriels détaille toutes les étapes effectuées pour générer l’exemple d’application ASP.NET magasin de musique MVC. La partie 10 traite de la Mises à jour finale à la navigation et à la conception de site, conclusion.

Nous avons terminé toutes les principales fonctionnalités de notre site, mais nous avons encore quelques fonctionnalités à ajouter à la navigation du site, à la page d’accueil et à la page Store Browse.

Création de l’affichage partiel Résumé du panier d’achat

Nous voulons exposer le nombre d’éléments dans le panier d’achat de l’utilisateur sur l’ensemble du site.

Nous pouvons facilement l’implémenter en créant une vue partielle qui est ajoutée à notre site. master.

Comme indiqué précédemment, le contrôleur ShoppingCart inclut une méthode d’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 l’affichage partiel CartSummary, cliquez avec le bouton droit sur le dossier Views/ShoppingCart et sélectionnez Ajouter une vue. Nommez la vue CartSummary et case activée la case à cocher « Créer une vue partielle », comme indiqué ci-dessous.

La vue partielle CartSummary est vraiment simple : il s’agit simplement d’un lien vers la vue Index ShoppingCart qui indique le nombre d’éléments dans le panier. Le code complet de CartSummary.cshtml est le suivant :

@Html.ActionLink("Cart
(" + ViewData["CartCount"] + ")",
    "Index",
    "ShoppingCart",
    new { id = "cart-status" })

Nous pouvons inclure une vue partielle dans n’importe quelle page du site, y compris le site master, à l’aide de la méthode Html.RenderAction. RenderAction nous oblige à spécifier le nom de l’action (« CartSummary ») et le nom du contrôleur (« ShoppingCart ») comme indiqué ci-dessous.

@Html.RenderAction("CartSummary",
"ShoppingCart")

Avant de l’ajouter à la disposition du site, nous allons également créer le menu Genre afin de pouvoir créer l’ensemble de notre site. master mises à jour en même temps.

Création de l’affichage partiel du menu Genre

Nous pouvons faciliter la navigation de nos utilisateurs dans le magasin en ajoutant un menu Genre qui répertorie tous les genres disponibles dans notre magasin.

Nous allons également suivre les mêmes étapes pour créer une vue partielle GenreMenu, puis nous pouvons les ajouter à la master site. Tout d’abord, ajoutez l’action de contrôleur 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 seront affichés par la vue partielle, que nous créerons ensuite.

Remarque : Nous avons ajouté l’attribut [ChildActionOnly] à cette action de contrôleur, ce qui indique que nous voulons que cette action soit utilisée uniquement à partir d’une vue partielle. Cet attribut empêche l’exécution de l’action du contrôleur en accédant à /Store/GenreMenu. Cela n’est pas obligatoire pour les vues partielles, mais il s’agit d’une bonne pratique, car nous voulons nous assurer que nos actions de contrôleur sont utilisées comme prévu. Nous renvoyons également PartialView plutôt que View, ce qui permet au moteur d’affichage de savoir qu’il ne doit pas utiliser la disposition pour cette vue, car elle est incluse dans d’autres affichages.

Cliquez avec le bouton droit sur l’action de contrôleur GenreMenu et créez une vue partielle nommée GenreMenu fortement typée à l’aide de la classe de données d’affichage Genre, comme indiqué ci-dessous.

Mettez à jour le code d’affichage de la vue partielle GenreMenu pour afficher les éléments à l’aide d’une liste non trié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>

Mise à jour de la disposition du site pour afficher nos vues partielles

Nous pouvons ajouter nos vues partielles à la disposition du site (/Views/Shared/_Layout.cshtml) en appelant Html.RenderAction(). Nous allons les ajouter à la fois dans, ainsi qu’un balisage supplémentaire pour les afficher, comme indiqué 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>

À présent, lorsque nous exécutons l’application, nous voyons le genre dans la zone de navigation de gauche et le résumé du panier en haut.

Mettre à jour vers la page Store Browse

La page Store Browse est fonctionnelle, mais ne semble pas très bonne. Nous pouvons mettre à jour la page pour afficher les albums dans une meilleure disposition en mettant à jour le code d’affichage (trouvé 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 utilisons Url.Action plutôt que Html.ActionLink afin de pouvoir appliquer une mise en forme spéciale au lien pour inclure l’illustration de l’album.

Remarque : Nous affichons une couverture d’album générique pour ces albums. Ces informations sont stockées dans la base de données et peuvent être modifiées via le Gestionnaire de magasin. Vous pouvez ajouter vos propres illustrations.

Maintenant, lorsque nous accédons à un genre, nous voyons les albums affichés dans une grille avec les illustrations de l’album.

Mise à jour de la page d’accueil pour afficher les albums les plus vendus

Nous voulons présenter nos albums les plus vendus sur la page d’accueil pour augmenter les ventes. Nous allons apporter des mises à jour à notre HomeController pour gérer cela, et ajouter des graphiques supplémentaires.

Tout d’abord, nous allons ajouter une propriété de navigation à notre classe Album afin qu’EntityFramework sache qu’elle est associée. Les dernières lignes de notre classe Album doivent maintenant ressembler à ceci :

public virtual Genre  Genre                  { get; set; }
public virtual Artist Artist                 { get; set; }
public virtual List<OrderDetail>OrderDetails { get; set; }
    }
}

Remarque : Cela nécessite l’ajout d’une instruction using pour introduire l’espace de noms System.Collections.Generic.

Tout d’abord, nous allons ajouter un champ storeDB et les instructions MvcMusicStore.Models using, comme dans nos autres contrôleurs. Ensuite, nous allons ajouter la méthode suivante au HomeController qui interroge notre base de données pour trouver les albums les plus vendus en fonction de 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();
}

Il s’agit d’une méthode privée, car nous ne voulons pas la rendre disponible en tant qu’action de contrôleur. Nous l’incluons dans HomeController pour plus de simplicité, mais nous vous encourageons à déplacer votre logique métier dans des classes de service distinctes le cas échéant.

Une fois cela en place, nous pouvons mettre à jour l’action Indexer le contrôleur pour interroger les 5 albums les plus vendus et les renvoyer à la vue.

public ActionResult Index()
{
    // Get most popular albums
    var albums = GetTopSellingAlbums(5);
 
    return View(albums);
 }

Le code complet du HomeController mis à jour est comme 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 devrons mettre à jour notre vue Index d’accueil afin qu’elle puisse afficher une liste d’albums en mettant à jour le type Modèle et en ajoutant la liste d’albums en bas. Nous allons profiter de cette occasion pour ajouter également un titre et une section de 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 exécutons l’application, nous voyons notre page d’accueil mise à jour avec les albums les plus vendus et notre message promotionnel.

Conclusion

Nous avons vu que ASP.NET MVC facilite la création d’un site web sophistiqué avec accès à la base de données, appartenance, AJAX, etc. assez rapidement. Espérons que ce tutoriel vous a donné les outils dont vous avez besoin pour commencer à créer vos propres ASP.NET applications MVC !

Précédent