Część 10. Końcowe aktualizacje nawigacji i projektu witryny, podsumowanie

Autor: Jon Galloway

MvC Music Store to aplikacja samouczka, która wprowadza i wyjaśnia krok po kroku, jak używać ASP.NET MVC i Visual Studio do tworzenia aplikacji internetowych.

MVC Music Store to uproszczona przykładowa implementacja sklepu, która sprzedaje albumy muzyczne online i implementuje podstawową administrację witryny, logowanie użytkowników i funkcjonalność koszyka.

W tej serii samouczków szczegółowo opisano wszystkie kroki podjęte w celu utworzenia przykładowej aplikacji ASP.NET MVC Music Store. Część 10 obejmuje końcowe Aktualizacje nawigacji i projektowania witryny, wniosek.

Ukończyliśmy wszystkie główne funkcje naszej witryny, ale nadal mamy pewne funkcje, które należy dodać do nawigacji witryny, strony głównej i strony Przeglądaj sklepu.

Tworzenie widoku częściowego podsumowania koszyka zakupów

Chcemy uwidocznić liczbę elementów w koszyku użytkownika w całej witrynie.

Możemy to łatwo zaimplementować, tworząc widok częściowy, który jest dodawany do pliku Site.master.

Jak pokazano wcześniej, kontroler ShoppingCart zawiera metodę akcji CartSummary, która zwraca widok częściowy:

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

Aby utworzyć widok częściowy CartSummary, kliknij prawym przyciskiem myszy folder Views/ShoppingCart i wybierz pozycję Dodaj widok. Nadaj widokowi nazwę CartSummary i zaznacz pole wyboru "Utwórz widok częściowy", jak pokazano poniżej.

Widok częściowy CartSummary jest naprawdę prosty — jest to tylko link do widoku ShoppingCart Index, który pokazuje liczbę elementów w koszyku. Kompletny kod cartSummary.cshtml jest następujący:

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

Możemy uwzględnić widok częściowy na dowolnej stronie w witrynie, w tym wzorzec witryny, przy użyciu metody Html.RenderAction. Funkcja RenderAction wymaga określenia nazwy akcji ("CartSummary") i nazwy kontrolera ("ShoppingCart"), jak pokazano poniżej.

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

Przed dodaniem tego do układu witryny utworzymy również menu gatunku, abyśmy mogli jednocześnie wprowadzać wszystkie aktualizacje Site.master.

Tworzenie menu gatunku — widok częściowy

Możemy ułatwić użytkownikom poruszanie się po sklepie, dodając menu gatunku, które zawiera listę wszystkich gatunków dostępnych w naszym sklepie.

Wykonamy te same kroki, tworząc również widok częściowy GatunekMenu, a następnie możemy dodać je zarówno do wzorca witryny. Najpierw dodaj następującą akcję kontrolera GatunekMenu do kontrolki StoreController:

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

Ta akcja zwraca listę gatunków, które będą wyświetlane w widoku częściowym, który utworzymy w następnej kolejności.

Uwaga: dodaliśmy atrybut [ChildActionOnly] do tej akcji kontrolera, co wskazuje, że chcemy, aby ta akcja była używana tylko z widoku częściowego. Ten atrybut uniemożliwi wykonanie akcji kontrolera przez przejście do /Store/GenreMenu. Nie jest to wymagane w przypadku widoków częściowych, ale jest to dobra praktyka, ponieważ chcemy upewnić się, że nasze akcje kontrolera są używane zgodnie z oczekiwaniami. Zwracamy również element PartialView, a nie Widok, co pozwala aparatowi widoku wiedzieć, że nie powinien używać układu dla tego widoku, ponieważ jest on uwzględniany w innych widokach.

Kliknij prawym przyciskiem myszy akcję kontrolera GatunekMenu i utwórz widok częściowy o nazwie GatunekMenu, który jest silnie wpisany przy użyciu klasy danych widoku gatunku, jak pokazano poniżej.

Zaktualizuj kod widoku widoku dla widoku GatunekMenu, aby wyświetlić elementy przy użyciu listy nieurządkowanej w następujący sposób.

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

Aktualizowanie układu witryny w celu wyświetlenia widoków częściowych

Możemy dodać nasze częściowe widoki do układu witryny (/Views/Shared/_Layout.cshtml), wywołując funkcję Html.RenderAction(). Dodamy je zarówno w pliku , jak i kilka dodatkowych znaczników, aby je wyświetlić, jak pokazano poniżej:

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

Teraz po uruchomieniu aplikacji zobaczymy gatunek w obszarze nawigacji po lewej stronie i Podsumowanie koszyka u góry.

Aktualizacja do strony Przeglądanie sklepu

Strona Przeglądanie sklepu jest funkcjonalna, ale nie wygląda bardzo dobrze. Możemy zaktualizować stronę, aby wyświetlić albumy w lepszym układzie, aktualizując kod widoku (znajdujący się w pliku /Views/Store/Browse.cshtml) w następujący sposób:

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

W tym miejscu używamy elementu Url.Action, a nie Html.ActionLink, aby umożliwić zastosowanie specjalnego formatowania do linku w celu uwzględnienia kompozycji albumu.

Uwaga: Wyświetlamy ogólną okładkę albumu dla tych albumów. Te informacje są przechowywane w bazie danych i można je edytować za pośrednictwem Menedżera sklepu. Możesz dodać własną grafikę.

Teraz, gdy przejdziemy do gatunku, zobaczymy albumy wyświetlane w siatce z grafiką albumu.

Aktualizowanie strony głównej w celu wyświetlenia najlepszych albumów sprzedaży

Chcemy polecać nasze najlepsze albumy sprzedażowe na stronie głównej, aby zwiększyć sprzedaż. Wprowadzimy kilka aktualizacji do naszego homeController, aby to obsłużyć, i dodać kilka dodatkowych grafik, jak również.

Najpierw dodamy właściwość nawigacji do klasy Album, aby jednostka EntityFramework wiedziała, że są skojarzone. Kilka ostatnich wierszy naszej klasy Album powinno teraz wyglądać następująco:

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

Uwaga: będzie to wymagało dodania instrukcji using w celu wprowadzenia przestrzeni nazw System.Collections.Generic.

Najpierw dodamy pole storeDB i mvcMusicStore.Models przy użyciu instrukcji, tak jak w innych kontrolerach. Następnie dodamy następującą metodę do HomeController, która wysyła zapytanie do naszej bazy danych, aby znaleźć najlepsze albumy sprzedażowe zgodnie z 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();
}

Jest to metoda prywatna, ponieważ nie chcemy udostępniać jej jako akcji kontrolera. Jesteśmy w tym w HomeController dla uproszczenia, ale zachęcamy do przeniesienia logiki biznesowej do oddzielnych klas usług zgodnie z potrzebami.

Dzięki temu możemy zaktualizować akcję kontrolera indeksu, aby wysłać zapytanie do 5 najlepszych sprzedających się albumów i zwrócić je do widoku.

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

Kompletny kod zaktualizowanego narzędzia HomeController jest pokazany poniżej.

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

Na koniec musimy zaktualizować widok indeksu głównego, aby można było wyświetlić listę albumów, aktualizując typ modelu i dodając listę albumów do dołu. Użyjemy tej okazji, aby dodać do strony nagłówek i sekcję podwyższania poziomu.

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

Teraz, gdy uruchomimy aplikację, zobaczymy naszą zaktualizowaną stronę główną z najlepiej sprzedającymi się albumami i naszymi wiadomościami promocyjnymi.

Podsumowanie

Widzieliśmy, że ASP.NET MVC ułatwia tworzenie wyrafinowanej witryny internetowej z dostępem do bazy danych, członkostwem, AJAX itp. dość szybko. Miejmy nadzieję, że ten samouczek dał Ci narzędzia potrzebne do rozpoczęcia tworzenia własnych aplikacji ASP.NET MVC!

Poprzednie