Část 10: Závěrečné aktualizace návrhu navigace a webu, závěr

Jon Galloway

MVC Music Store je kurzová aplikace, která představuje a vysvětluje, jak používat ASP.NET MVC a Visual Studio pro vývoj pro web.

MVC Music Store je jednoduchá ukázková implementace obchodu, která prodává hudební alba online a implementuje základní správu webu, přihlašování uživatelů a funkce nákupního košíku.

Tato série kurzů podrobně popisuje všechny kroky potřebné k vytvoření ukázkové aplikace ASP.NET MVC Music Store. Část 10 obsahuje závěrečné Aktualizace k navigaci a návrhu webu, závěr.

Dokončili jsme všechny hlavní funkce pro náš web, ale stále máme některé funkce, které můžeme přidat do navigace na webu, na domovskou stránku a stránku Procházení storu.

Vytvoření částečného zobrazení souhrnu nákupního košíku

Chceme zveřejnit počet položek v nákupním košíku uživatele na celém webu.

To můžeme snadno implementovat vytvořením částečného zobrazení, které se přidá do našeho Webu.master.

Jak je znázorněno výše, kontroler ShoppingCart zahrnuje metodu akce CartSummary, která vrací částečné zobrazení:

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

Pokud chcete vytvořit částečné zobrazení CartSummary, klikněte pravým tlačítkem na složku Views/ShoppingCart a vyberte Přidat zobrazení. Pojmenujte zobrazení CartSummary a zaškrtněte políčko Vytvořit částečné zobrazení, jak je znázorněno níže.

Částečné zobrazení CartSummary je opravdu jednoduché – je to pouze odkaz na zobrazení Nákupního indexu, které zobrazuje počet položek v košíku. Úplný kód pro CartSummary.cshtml je následující:

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

Pomocí metody Html.RenderAction můžeme zahrnout částečné zobrazení na libovolnou stránku webu, včetně hlavního webu. RenderAction vyžaduje, abychom zadali název akce ("CartSummary") a název kontroleru ("ShoppingCart"), jak je uvedeno níže.

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

Před přidáním do rozložení webu vytvoříme také nabídku Žánr, abychom mohli najednou provádět všechny aktualizace Site.master.

Vytvoření částečného zobrazení nabídky Žánr

Uživatelům můžeme výrazně usnadnit procházení obchodu přidáním nabídky Žánr, která obsahuje seznam všech žánrů dostupných v našem obchodě.

Stejným postupem vytvoříme také částečné zobrazení GenreMenu a pak je můžeme přidat do předlohy webu. Nejprve přidejte do StoreController následující akci kontroleru ŽánrMenu:

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

Tato akce vrátí seznam žánrů, které se zobrazí v částečném zobrazení, které vytvoříme dále.

Poznámka: Do této akce kontroleru jsme přidali atribut [ChildActionOnly], který označuje, že chceme, aby se tato akce používala jenom z částečného zobrazení. Tento atribut zabrání spuštění akce kontroleru tak, že přejdete na /Store/GenreMenu. U částečných zobrazení to není potřeba, ale je to dobrý postup, protože chceme zajistit, aby se akce kontroleru používaly podle našich představ. Vracíme také Funkci PartialView místo Zobrazení, což dává modulu zobrazení vědět, že by pro toto zobrazení neměl používat rozložení, protože je součástí jiných zobrazení.

Klikněte pravým tlačítkem na akci Řadič ŽánrNabídku a vytvořte částečné zobrazení s názvem GenreMenu, které je silně natypované pomocí datové třídy Zobrazení žánru, jak je znázorněno níže.

Aktualizujte kód zobrazení pro částečné zobrazení ŽánrNabídku, aby se položky zobrazily pomocí neuspořádaného seznamu následujícím způsobem.

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

Aktualizace rozložení webu pro zobrazení částečných zobrazení

Částečná zobrazení můžeme přidat do rozložení webu (/Views/Shared/_Layout.cshtml) voláním Html.RenderAction(). Přidáme je do souboru a také některé další značky, které je zobrazí, jak je znázorněno níže:

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

Když teď aplikaci spustíme, uvidíme v levé navigační oblasti položku Žánr a nahoře souhrn košíku.

Aktualizovat na stránku Store Browse

Stránka Store Browse je funkční, ale nevypadá moc dobře. Stránku můžeme aktualizovat tak, aby zobrazovala alba v lepším rozložení, a to aktualizací kódu zobrazení (který najdete v /Views/Store/Browse.cshtml) následujícím způsobem:

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

Tady používáme url.Action místo Html.ActionLink, abychom mohli použít speciální formátování odkazu, abychom mohli zahrnout kresbu alba.

Poznámka: Pro tato alba zobrazujeme obecný obal alba. Tyto informace jsou uloženy v databázi a lze je upravovat prostřednictvím Správce obchodu. Můžete přidat vlastní kresbu.

Když teď přejdeme na Žánr, uvidíme alba zobrazená v mřížce s kresbou alba.

Aktualizace domovské stránky tak, aby zobrazovala nejprodávanější alba

Chceme na domovské stránce uvést naše nejprodávanější alba, abychom zvýšili prodeje. Provedeme několik aktualizací pro homecontroller, abychom to zvládli, a přidáme také další grafiku.

Nejprve přidáme vlastnost navigace do třídy Album, aby EntityFramework věděla, že jsou přidružené. Posledních pár řádků naší třídy Album by teď mělo vypadat takto:

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

Poznámka: To bude vyžadovat přidání příkazu using k přenesení oboru názvů System.Collections.Generic.

Nejprve přidáme pole storeDB a příkazy MvcMusicStore.Models using, stejně jako v ostatních řadičích. Dále přidáme následující metodu do HomeControlleru, která se dotazuje naší databáze, aby našla nejprodávanější alba podle 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();
}

Jedná se o privátní metodu, protože ji nechceme zpřístupnit jako akci kontroleru. Pro zjednodušení ho do HomeControlleru zahrneme, ale doporučujeme, abyste podle potřeby přesunuli obchodní logiku do samostatných tříd služeb.

Díky tomu můžeme akci kontroleru indexu aktualizovat tak, aby se dotazovala na 5 nejprodávanějších alb a vrátila je do zobrazení.

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

Úplný kód aktualizovaného homecontrolleru je uvedený níže.

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

Nakonec budeme muset aktualizovat zobrazení Domovského indexu, aby bylo možné zobrazit seznam alb aktualizací typu model a přidáním seznamu alb do dolní části. Tuto příležitost použijeme k přidání nadpisu a oddílu povýšení na stránku.

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

Když teď aplikaci spustíme, uvidíme naši aktualizovanou domovskou stránku s nejprodávanějšími alby a naše propagační sdělení.

Závěr

Viděli jsme, že ASP.NET MVC usnadňuje vytvoření sofistikovaného webu s přístupem k databázi, členstvím, AJAX atd. Docela rychle. Doufejme, že tento kurz vám poskytl nástroje, které potřebujete, abyste mohli začít vytvářet vlastní aplikace ASP.NET MVC!

Předchozí