Часть 10. Окончательные обновления структуры навигации и проекта сайта, заключение
Музыкальное хранилище MVC — это учебное приложение, которое представляет и объясняет пошаговые инструкции по использованию ASP.NET MVC и Visual Studio для веб-разработки.
Музыкальный магазин MVC — это упрощенный пример реализации магазина, который продает музыкальные альбомы в Интернете и реализует базовые функции администрирования сайтов, входа пользователей и корзины для покупок.
В этой серии учебников подробно описаны все шаги, предпринятые для создания примера приложения ASP.NET MVC Music Store. Часть 10 охватывает окончательные Обновления к навигации и дизайну сайта, заключение.
Мы выполнили все основные функции для нашего сайта, но у нас по-прежнему есть некоторые функции, которые можно добавить в навигацию по сайту, домашнюю страницу и страницу Обзора Магазина.
Создание частичного представления сводки корзины покупок
Мы хотим предоставить количество элементов в корзине пользователя по всему сайту.
Мы можем легко реализовать это, создав частичное представление, которое добавляется на наш сайт. master.
Как показано ранее, контроллер ShoppingCart включает метод действия CartSummary, который возвращает частичное представление:
//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]
public ActionResult CartSummary()
{
var cart = ShoppingCart.GetCart(this.HttpContext);
ViewData["CartCount"] = cart.GetCount();
return PartialView("CartSummary");
}
Чтобы создать частичное представление CartSummary, щелкните правой кнопкой мыши папку Views/ShoppingCart и выберите Добавить представление. Назовите представление CartSummary и проверка флажок "Создать частичное представление", как показано ниже.
Частичное представление CartSummary очень простое - это просто ссылка на представление Индекса ShoppingCart, которое показывает количество элементов в корзине. Полный код для CartSummary.cshtml выглядит следующим образом:
@Html.ActionLink("Cart
(" + ViewData["CartCount"] + ")",
"Index",
"ShoppingCart",
new { id = "cart-status" })
Мы можем включить частичное представление на любую страницу сайта, включая master сайта, с помощью метода Html.RenderAction. RenderAction требует указать имя действия ("CartSummary") и имя контроллера ("ShoppingCart"), как показано ниже.
@Html.RenderAction("CartSummary",
"ShoppingCart")
Перед добавлением этого элемента в макет сайта мы также создадим меню жанра, чтобы создать весь наш сайт. master обновления одновременно.
Создание частичного представления меню "Жанр"
Мы можем значительно упростить для пользователей навигацию по магазину, добавив меню жанров, в котором перечислены все жанры, доступные в нашем магазине.
Мы также создадим частичное представление GenreMenu, а затем добавим их в master сайта. Сначала добавьте следующее действие контроллера GenreMenu в StoreController:
//
// GET: /Store/GenreMenu
[ChildActionOnly]
public ActionResult GenreMenu()
{
var genres = storeDB.Genres.ToList();
return PartialView(genres);
}
Это действие возвращает список жанров, который будет отображаться частичным представлением, которое мы создадим далее.
Примечание. Мы добавили атрибут [ChildActionOnly] к этому действию контроллера, который указывает, что мы хотим использовать это действие только из частичного представления. Этот атрибут предотвращает выполнение действия контроллера путем перехода в /Store/GenreMenu. Это не требуется для частичных представлений, но это рекомендуется, так как мы хотим убедиться, что действия контроллера используются должным образом. Мы также возвращаем PartialView, а не Представление, что позволяет обработчику представлений понять, что он не должен использовать макет для этого представления, так как он включается в другие представления.
Щелкните правой кнопкой мыши действие контроллера GenreMenu и создайте частичное представление с именем GenreMenu, которое строго типизировано с помощью класса данных Представление жанра, как показано ниже.
Обновите код представления для частичного представления GenreMenu, чтобы отобразить элементы с помощью неупорядоченного списка, как показано ниже.
@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>
Обновление макета сайта для отображения частичных представлений
Мы можем добавить наши частичные представления в макет сайта (/Views/Shared/_Layout.cshtml), вызвав Html.RenderAction(). Мы добавим их в , а также дополнительную разметку для их отображения, как показано ниже:
<!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>
Теперь при запуске приложения мы увидим жанр в области навигации слева и сводку корзины вверху.
Обновление страницы обзора Магазина
Страница Обзора в Магазине работает, но выглядит не очень хорошо. Мы можем обновить страницу, чтобы альбомы отображались в лучшем макете, обновив код представления (находится в файле /Views/Store/Browse.cshtml) следующим образом:
@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>
Здесь мы используем Url.Action вместо Html.ActionLink, чтобы можно было применить специальное форматирование к ссылке, чтобы включить обложку альбома.
Примечание. Для этих альбомов отображается общая обложка альбома. Эти сведения хранятся в базе данных и могут изменяться с помощью диспетчера магазинов. Вы можете добавить свое собственное произведение искусства.
Теперь, когда мы перейдем к жанру, мы увидим альбомы, показанные в сетке с обложкой альбома.
Обновление домашней страницы для отображения самых продаваемых альбомов
Мы хотим, чтобы наши самые продаваемые альбомы на домашней странице, чтобы увеличить продажи. Мы внесите некоторые обновления в наш HomeController, чтобы справиться с этим, а также добавим некоторые дополнительные графические элементы.
Сначала мы добавим свойство навигации в класс Album, чтобы EntityFramework знал, что они связаны. Последние несколько строк нашего класса Album теперь должны выглядеть следующим образом:
public virtual Genre Genre { get; set; }
public virtual Artist Artist { get; set; }
public virtual List<OrderDetail>OrderDetails { get; set; }
}
}
Примечание. Для этого потребуется добавить оператор using для добавления в пространство имен System.Collections.Generic.
Сначала мы добавим поле storeDB и инструкции MvcMusicStore.Models using, как и в других контроллерах. Далее мы добавим следующий метод в HomeController, который запрашивает нашу базу данных для поиска наиболее продаваемых альбомов в соответствии с 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();
}
Это закрытый метод, так как мы не хотим делать его доступным в качестве действия контроллера. Мы включаем его в HomeController для простоты, но вам рекомендуется переместить бизнес-логику в отдельные классы служб по мере необходимости.
После этого можно обновить действие контроллера индексирования, чтобы запросить 5 самых продаваемых альбомов и вернуть их в представление.
public ActionResult Index()
{
// Get most popular albums
var albums = GetTopSellingAlbums(5);
return View(albums);
}
Полный код для обновленного HomeController приведен ниже.
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();
}
}
}
Наконец, необходимо обновить представление "Индекс домашнего" для отображения списка альбомов, обновив тип модели и добавив список альбомов внизу. Мы будем использовать эту возможность, чтобы также добавить заголовок и раздел повышения на страницу.
@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>
Теперь при запуске приложения мы увидим обновленную домашнюю страницу с наиболее продаваемыми альбомами и рекламным сообщением.
Заключение
Мы видели, что ASP.NET MVC упрощает создание сложного веб-сайта с доступом к базе данных, членством, AJAX и т. д. довольно быстро. Мы надеемся, что в этом руководстве есть средства, необходимые для начала создания собственных приложений ASP.NET MVC.