Parte 10: Aggiornamenti finali all'esplorazione e alla struttura del sito, conclusioni

di Jon Galloway

MVC Music Store è un'applicazione di esercitazione che introduce e spiega dettagliatamente come usare ASP.NET MVC e Visual Studio per lo sviluppo Web.

MVC Music Store è un'implementazione leggera del negozio di esempio che vende album musicali online e implementa l'amministrazione del sito di base, l'accesso degli utenti e la funzionalità del carrello acquisti.

Questa serie di esercitazioni illustra in dettaglio tutti i passaggi eseguiti per compilare l'applicazione di esempio MVC Music Store ASP.NET. La parte 10 illustra l'Aggiornamenti finale per la struttura di spostamento e la progettazione del sito, conclusione.

Abbiamo completato tutte le principali funzionalità per il nostro sito, ma abbiamo ancora alcune funzionalità da aggiungere alla struttura di spostamento del sito, alla home page e alla pagina Sfoglia dello Store.

Creazione della visualizzazione parziale riepilogo carrello acquisti

Si vuole esporre il numero di articoli nel carrello acquisti dell'utente nell'intero sito.

È possibile implementare facilmente questa operazione creando una visualizzazione parziale che viene aggiunta al file Site.master.

Come illustrato in precedenza, il controller ShoppingCart include un metodo di azione CartSummary che restituisce una visualizzazione parziale:

//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]
 public ActionResult CartSummary()
{
    var cart = ShoppingCart.GetCart(this.HttpContext);
 
    ViewData["CartCount"] = cart.GetCount();
    return PartialView("CartSummary");
}

Per creare la visualizzazione parziale CartSummary, fare clic con il pulsante destro del mouse sulla cartella Views/ShoppingCart e scegliere Aggiungi visualizzazione. Denominare la visualizzazione CartSummary e selezionare la casella di controllo "Crea una visualizzazione parziale", come illustrato di seguito.

La visualizzazione parziale CartSummary è molto semplice: è solo un collegamento alla visualizzazione Indice ShoppingCart che mostra il numero di articoli nel carrello. Il codice completo per CartSummary.cshtml è il seguente:

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

È possibile includere una visualizzazione parziale in qualsiasi pagina del sito, incluso il master del sito, usando il metodo Html.RenderAction. RenderAction richiede di specificare il nome dell'azione ("CartSummary") e il nome del controller ("ShoppingCart") come indicato di seguito.

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

Prima di aggiungerlo al layout del sito, creeremo anche il menu Genere in modo da poter eseguire tutti gli aggiornamenti di Site.master contemporaneamente.

Creazione della visualizzazione parziale del menu Genere

Possiamo rendere molto più semplice per i nostri utenti navigare attraverso il negozio aggiungendo un menu Genere che elenca tutti i generi disponibili nel nostro negozio.

Verranno seguiti gli stessi passaggi anche per creare una visualizzazione parziale GenreMenu e quindi è possibile aggiungerli entrambi al master del sito. Aggiungere prima di tutto l'azione controller GenreMenu seguente a StoreController:

//
// GET: /Store/GenreMenu
[ChildActionOnly]
 public ActionResult GenreMenu()
{
    var genres = storeDB.Genres.ToList();
    return PartialView(genres);
 }

Questa azione restituisce un elenco di generi che verranno visualizzati dalla visualizzazione parziale, che verrà creata successivamente.

Nota: è stato aggiunto l'attributo [ChildActionOnly] a questa azione del controller, che indica che questa azione deve essere usata solo da una visualizzazione parziale. Questo attributo impedirà l'esecuzione dell'azione del controller passando a /Store/GenreMenu. Questa operazione non è necessaria per le visualizzazioni parziali, ma è una procedura consigliata, poiché si vuole assicurarsi che le azioni del controller vengano usate come previsto. Viene restituito anche PartialView anziché View, che consente al motore di visualizzazione di sapere che non deve usare il layout per questa visualizzazione, perché viene incluso in altre visualizzazioni.

Fare clic con il pulsante destro del mouse sull'azione controller GenreMenu e creare una visualizzazione parziale denominata GenreMenu fortemente tipizzata usando la classe di dati di visualizzazione Genre, come illustrato di seguito.

Aggiornare il codice di visualizzazione per la visualizzazione parziale GenreMenu per visualizzare gli elementi usando un elenco non ordinato come indicato di seguito.

@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>

Aggiornamento del layout del sito per visualizzare le visualizzazioni parziali

È possibile aggiungere le visualizzazioni parziali al layout del sito (/Views/Shared/_Layout.cshtml) chiamando Html.RenderAction(). Verranno aggiunti sia in che altri markup per visualizzarli, come illustrato di seguito:

<!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>

Ora, quando si esegue l'applicazione, il genere verrà visualizzato nell'area di spostamento a sinistra e nel riepilogo del carrello nella parte superiore.

Eseguire l'aggiornamento alla pagina Sfoglia dello Store

La pagina Sfoglia dello Store è funzionale, ma non ha un aspetto molto buono. È possibile aggiornare la pagina per visualizzare gli album in un layout migliore aggiornando il codice di visualizzazione (disponibile in /Views/Store/Browse.cshtml) come indicato di seguito:

@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>

In questo caso viene usato Url.Action anziché Html.ActionLink in modo da poter applicare una formattazione speciale al collegamento per includere l'immagine dell'album.

Nota: stiamo visualizzando una copertina di album generica per questi album. Queste informazioni vengono archiviate nel database ed è modificabile tramite Store Manager. Siete invitati ad aggiungere opere d'arte personalizzate.

Ora, quando passiamo a un Genere, vedremo gli album visualizzati in una griglia con l'opera dell'album.

Aggiornamento della home page per visualizzare gli album più venduti

Vogliamo presentare i nostri album più venduti nella home page per aumentare le vendite. Verranno apportati alcuni aggiornamenti a HomeController per gestirlo e verranno aggiunti anche alcuni elementi grafici aggiuntivi.

Prima di tutto, aggiungeremo una proprietà di navigazione alla classe Album in modo che EntityFramework sappia che sono associati. Le ultime righe della classe Album dovrebbero ora essere simili alle seguenti:

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

Nota: è necessario aggiungere un'istruzione using per inserire lo spazio dei nomi System.Collections.Generic.

Prima di tutto, aggiungeremo un campo storeDB e MvcMusicStore.Models usando le istruzioni, come negli altri controller. Successivamente, aggiungeremo il metodo seguente a HomeController che esegue una query sul database per trovare album più venduti in base a 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();
}

Si tratta di un metodo privato, poiché non si vuole renderlo disponibile come azione del controller. È inclusa in HomeController per semplicità, ma è consigliabile spostare la logica di business in classi di servizio separate in base alle esigenze.

Con questo risultato, è possibile aggiornare l'azione index controller per eseguire una query sui primi 5 album venduti e restituirli alla visualizzazione.

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

Il codice completo per HomeController aggiornato è come illustrato di seguito.

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();
        }
    }
}

Infine, è necessario aggiornare la visualizzazione Home Index in modo che possa visualizzare un elenco di album aggiornando il tipo di modello e aggiungendo l'elenco degli album in basso. Questa opportunità sarà utile anche per aggiungere un titolo e una sezione promozionale alla pagina.

@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>

Ora, quando si esegue l'applicazione, verrà visualizzata la home page aggiornata con album più venduti e il messaggio promozionale.

Conclusione

Abbiamo visto che ASP.NET MVC semplifica la creazione di un sito Web sofisticato con accesso al database, appartenenza, AJAX e così via. abbastanza velocemente. Si spera che questa esercitazione abbia fornito gli strumenti necessari per iniziare a creare applicazioni ASP.NET MVC personalizzate.

Indietro