Teil 10: Abschließende Updates für die Navigation und das Websitedesign – Zusammenfassung

von Jon Galloway

Der MVC Music Store ist eine Tutorialanwendung, die schrittweise erläutert, wie ASP.NET MVC und Visual Studio für die Webentwicklung verwendet werden.

Der MVC Music Store ist eine einfache Beispielspeicherimplementierung, die Musikalben online verkauft und grundlegende Websiteverwaltung, Benutzeranmeldung und Warenkorbfunktionen implementiert.

In dieser Tutorialreihe werden alle Schritte zum Erstellen der ASP.NET MVC Music Store-Beispielanwendung beschrieben. Teil 10 behandelt die abschließende Updates zur Navigation und Websitegestaltung, Schlussfolgerung.

Wir haben alle wichtigen Funktionen für unsere Website abgeschlossen, aber wir haben noch einige Features, die der Websitenavigation, der Startseite und der Seite Store durchsuchen hinzugefügt werden können.

Erstellen der Teilansicht "Warenkorbzusammenfassung"

Wir möchten die Anzahl der Elemente im Warenkorb des Benutzers auf der gesamten Website verfügbar machen.

Wir können dies problemlos implementieren, indem wir eine Teilansicht erstellen, die unserer Website hinzugefügt wird. master.

Wie bereits gezeigt, enthält der ShoppingCart-Controller eine CartSummary-Aktionsmethode, die eine Teilansicht zurückgibt:

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

Um die Teilansicht CartSummary zu erstellen, klicken Sie mit der rechten Maustaste auf den Ordner Ansichten/ShoppingCart, und wählen Sie Ansicht hinzufügen aus. Nennen Sie die Ansicht CartSummary, und aktivieren Sie das Kontrollkästchen "Teilansicht erstellen", wie unten gezeigt.

Die CartSummary-Teilansicht ist sehr einfach - sie ist nur ein Link zur ShoppingCart-Indexansicht, die die Anzahl der Elemente im Warenkorb anzeigt. Der vollständige Code für CartSummary.cshtml lautet wie folgt:

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

Mithilfe der Html.RenderAction-Methode können wir eine teilseitige Ansicht in jede Seite der Website einschließen, einschließlich der website-master. RenderAction erfordert, dass wir den Aktionsnamen ("CartSummary") und den Controllernamen ("ShoppingCart") wie unten angeben.

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

Bevor wir dies zum Layout der Website hinzufügen, erstellen wir auch das Genremenü, damit wir unsere gesamte Website erstellen können. master Updates gleichzeitig.

Erstellen der Teilansicht des Genremenüs

Wir können es unseren Benutzern viel einfacher machen, durch den Store zu navigieren, indem wir ein Genremenü hinzufügen, das alle in unserem Store verfügbaren Genres auflistet.

Wir führen die gleichen Schritte aus, um auch eine GenreMenu-Teilansicht zu erstellen, und dann können wir beide der Website master hinzufügen. Fügen Sie zunächst die folgende GenreMenu-Controlleraktion zum StoreController hinzu:

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

Diese Aktion gibt eine Liste von Genres zurück, die von der Teilansicht angezeigt wird, die als Nächstes erstellt wird.

Hinweis: Wir haben dieser Controlleraktion das Attribut [ChildActionOnly] hinzugefügt, das angibt, dass diese Aktion nur in einer Partiellen Ansicht verwendet werden soll. Dieses Attribut verhindert, dass die Controlleraktion ausgeführt wird, indem Sie zu /Store/GenreMenu navigieren. Dies ist für partielle Ansichten nicht erforderlich, aber es ist eine bewährte Methode, da wir sicherstellen möchten, dass unsere Controlleraktionen wie gewünscht verwendet werden. Wir geben auch PartialView anstelle von Ansicht zurück, wodurch die Ansichts-Engine wissen lässt, dass sie das Layout für diese Ansicht nicht verwenden sollte, da es in anderen Ansichten enthalten ist.

Klicken Sie mit der rechten Maustaste auf die Controlleraktion GenreMenu, und erstellen Sie eine Teilansicht mit dem Namen GenreMenu, die stark mit der Datenklasse der Genreansicht eingegeben wird, wie unten gezeigt.

Aktualisieren Sie den Ansichtscode für die Teilansicht GenreMenu, um die Elemente mithilfe einer nicht sortierten Liste wie folgt anzuzeigen.

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

Aktualisieren des Websitelayouts, um unsere Teilansichten anzuzeigen

Wir können unsere teilseitigen Ansichten dem Websitelayout (/Views/Shared/_Layout.cshtml) hinzufügen, indem Sie Html.RenderAction() aufrufen. Wir fügen sie sowohl in als auch zusätzliches Markup hinzu, um sie anzuzeigen, wie unten gezeigt:

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

Wenn wir nun die Anwendung ausführen, sehen wir das Genre im linken Navigationsbereich und die Warenkorbzusammenfassung oben.

Aktualisieren auf der Seite "Store durchsuchen"

Die Seite Store Durchsuchen ist funktionsfähig, sieht aber nicht sehr gut aus. Wir können die Seite so aktualisieren, dass die Alben in einem besseren Layout angezeigt werden, indem wir den Ansichtscode (in /Views/Store/Browse.cshtml) wie folgt aktualisieren:

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

Hier verwenden wir Url.Action anstelle von Html.ActionLink, sodass wir eine spezielle Formatierung auf den Link anwenden können, um das Albumcover einzuschließen.

Hinweis: Für diese Alben wird ein generisches Albumcover angezeigt. Diese Informationen werden in der Datenbank gespeichert und können über den Store-Manager bearbeitet werden. Sie können ihre eigenen Grafiken hinzufügen.

Wenn wir nun zu einem Genre navigieren, werden die Alben in einem Raster mit dem Albumcover angezeigt.

Aktualisieren der Startseite, um die meistverkauften Alben anzuzeigen

Wir möchten unsere meistverkauften Alben auf der Startseite anzeigen, um den Umsatz zu steigern. Wir werden einige Updates an unserem HomeController vornehmen, um dies zu behandeln, und fügen auch einige zusätzliche Grafiken hinzu.

Zunächst fügen wir unserer Album-Klasse eine Navigationseigenschaft hinzu, damit EntityFramework weiß, dass sie zugeordnet sind. Die letzten Zeilen unserer Album-Klasse sollten nun wie folgt aussehen:

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

Hinweis: Dies erfordert das Hinzufügen einer using-Anweisung, um den System.Collections.Generic-Namespace einzufügen.

Zunächst fügen wir ein storeDB-Feld und die MvcMusicStore.Models-Anweisungen hinzu, wie in unseren anderen Controllern. Als Nächstes fügen wir die folgende Methode zum HomeController hinzu, die unsere Datenbank abfragt, um die meistverkauften Alben gemäß OrderDetails zu finden.

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

Dies ist eine private Methode, da wir sie nicht als Controlleraktion verfügbar machen möchten. Der Einfachheit halber integrieren wir es in den HomeController, aber Sie werden ermutigt, Ihre Geschäftslogik nach Bedarf in separate Dienstklassen zu verschieben.

Damit können wir die Indexcontrolleraktion aktualisieren, um die top 5 verkauften Alben abzufragen und sie in die Ansicht zurückzugeben.

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

Der vollständige Code für den aktualisierten HomeController ist wie unten dargestellt.

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

Schließlich müssen wir die Ansicht "Startindex" aktualisieren, damit eine Liste von Alben angezeigt werden kann, indem der Modelltyp aktualisiert und die Albumliste unten hinzugefügt wird. Wir nutzen diese Gelegenheit, um der Seite auch eine Überschrift und einen Promotion-Abschnitt hinzuzufügen.

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

Wenn wir nun die Anwendung ausführen, sehen wir unsere aktualisierte Startseite mit den meistverkauften Alben und unserer Werbebotschaft.

Zusammenfassung

Wir haben gesehen, dass ASP.NET MVC es einfach macht, eine anspruchsvolle Website mit Datenbankzugriff, Mitgliedschaft, AJAX usw. zu erstellen. ziemlich schnell. Hoffentlich haben Sie in diesem Tutorial die Tools erhalten, die Sie benötigen, um mit der Erstellung Ihrer eigenen ASP.NET MVC-Anwendungen zu beginnen!