В данном посте будет рассмотрен процесс создания меню навигации и хлебных крошек в проекте asp.net MVC3. Сначала мы создадим пустой проект, потом добавим sitemap провайдер, несколько контроллеров и представлений и в итоге заставим провайдер вывести хлебные крошки.
Перевод статьи: edspencer.me.uk/2011/09/20/mvc-sitemap-provider-tutorial-2-breadcrumbs/
УСТАНОВКА
Давайте начнем с пустого проекта MVC3. Запустите Visual Studio. Создайте новый Asp.Net MVC3 Web application. Я назову его SitemapDemo:
Для демонстрации я выбрал пустой шаблон с движком визуализации Razor.
Теперь, прежде чем что-либо делать, давайте вернемся и поставим NuGet пакет. Выберите View > Other Windows и затем выберите “Package Manager Console”:
Чтобы добавить Asp.net MVC sitemap provider в текущий проект, нужно ввести следующую команду в Package Manager Console и нажать enter:
PM> Install-Package MvcSiteMapProvider
Эта команда скачает необходимые файлы (dlls, cshtml files) и добавит их в ваш MVC проект. Операция может занять несколько минут, в зависимости от вашего соединения. В случае успеха Package Manager Console выведет что-то вроде этого:
PM>PM> Install-Package MvcSiteMapProvider
Successfully installed 'MvcSiteMapProvider 3.1.0.0'.
Successfully added 'MvcSiteMapProvider 3.1.0.0' to SitemapDemo.
Теперь давайте посмотрим что в действительности NuGet package manager добавил в наш проект:
- SitemapDemo > References > MvcSiteMapProvider – Ссылка на MvcSiteMapProvider.dll
- SitemapDemo > Mvc.sitemap – This file will be used to describe our MVC3 website in XML nodes
- SitemapDemo > Views > Shared > DisplayTemplates > MenuHelperModel.cshtml
- SitemapDemo > Views > Shared > DisplayTemplates > SiteMapHelperModel.cshtml
- SitemapDemo > Views > Shared > DisplayTemplates > SiteMapNodeModel.cshtml
- SitemapDemo > Views > Shared > DisplayTemplates > SiteMapNodeModelList.cshtml
- SitemapDemo > Views > Shared > DisplayTemplates > SiteMapPathHelperModel.cshtml
- SitemapDemo > Views > Shared > DisplayTemplates > SiteMapTitleHelperModel.cshtml
Т.к. в качестве движка визуализации мы используем Razor, мы можем удалить asax файлы, которые были добавлены в папка SitemapDemo > Views > Shared > DisplayTemplates. Вот как теперь выглядит наш проект:
Теперь все готово. Теперь давайте добавим несколько контроллеров и представлений перед тем, как начнем играться с SiteMapProvider.
ВАЖНО
MVC Sitemap provider в некоторых случаях тихо умрет если мы попытаемся заставить его работать с методами контроллеров, которых не существует, или несуществующими представлениями. Поэтому мы сначала создаем контроллеры и представления.
У всех сайтов есть домашняя страница, так что для начала давайте создадим ее. Кликаем правой кнопкой по папке Controllers и создаем контроллер “HomeController”:
Теперь ваш контроллер создан и отрыт, правый клик по действию Index и выбираем “Add View…”
В диалоге добавления представления просто жмем "Add". Ничего не надо менять. Теперь давайте поменяем текст в созданной странице. Добавим заголовок по типу “Index – this is the home page”.
Теперь по тому же принципу давайте добавим еще один контроллер. Назовем его NewsController. Добавим в него еще один метод “Sports”:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SitemapDemo.Controllers
{
public class NewsController : Controller
{
//
// GET: /News/
public ActionResult Index()
{
return View();
}
//
// GET: /News/Sports/
public ActionResult Sports()
{
return View();
}
}
}
Теперь давайте добавим представления для каждого метода контроллера NewsController. Сделаем это тем же способом, каком мы добавляли представления для домашней страницы – правым кликом по каждому методу в контроллере. Опять-таки, мы просто оставляем настройки диалогового окна “Add View” по-умолчанию и просто жмем “Add” для обоих представлений.
Давайте добавим еще один контроллер – AboutController. Как только создали, оставляем его без изменений и добавляем новое представление Index. Также редактируем заголовок на странице
Теперь в нашем проекте есть 4 страницы. Стоит их протестировать перед тем как начнем внедрять Site Map Provider. Снизу скриншоты получившихся страниц:
localhost:xxxx/News
localhost:xxxx/News/Sports
localhost:xxxx/About
Отлично, теперь у нас маленький сайт с простой структурой. Представим структуру сайт в диаграмме:
Визуализация макета сайта поможет нам корректно описать структуру файла Mvc.sitemap. Наша страница Index является оберткой всего сайта, т.к. является домашней страницей и первой страницей при входе на сайт.
Теперь перейдем в конфигурации карты сайта. Начнем с редактирования файла Mvc.sitemap, которые находится в корне нашего проекта. Файл содержит в себе xml ноды, необходимые для представления комбинаций ваших контроллеров и методов.
Отредактируйте Mvc.Sitemap следующим образом:
<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0" enableLocalization="true">
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="News" controller="News" action="Index">
<mvcSiteMapNode title="Sports News" controller="News" action="Sports"/>
</mvcSiteMapNode>
<mvcSiteMapNode title="About" controller="About" action="Index"/>
</mvcSiteMapNode>
</mvcSiteMap>
И так мы сформировали структуру нашего сайта в файле MVC.Sitemap. Обычная ошибка здесь — забыть обернуть весь сайт xml-нодом, представляющим домашнюю страницу, которую посетитель видит в самом начале.
ДОБАВЛЕНИЕ НАВИГАЦИИ
Теперь, когда у нас есть несколько контроллеров и методов и структура сайта должным образом описана в Mvc.Sitemap, давайте добавим навигацию на страницы.
Откройте _Layout.cshtml, находящийся в папке Views/Shared. Измените код тела страницы следующим образом:
<body>
@Html.MvcSiteMap().Menu(false, true, true)
@RenderBody()
</body>
Так мы вызываем библиотеку MvcSiteMap и говорим вывести меню навигации на всех страницах. Параметры вызова метода говорят о следующем:
- Мы не хотим стартовать с текущего нода
- Мы хоти показывать ноды в дочерних уровнях
- Мы хотим показать корневой нод. Если установить false, то нод “Home” не будет показан
Если запустим наше приложение, мы должны увидеть меню навигации на каждой странице:
РЕДАКТИРОВАНИЕ ПРЕДСТАВЛЕНИЯ НАВИГАЦИИ
Нам удалось вывести простое меню навигации на страницы нашего сайта. Если вы захотите изменить стили верстку, просто измените код в Views/Shared/DisplayTemplates/MenuHelperModel.cshtml. Давайте сделаем небольшое изменение — поменяем маркеры элементов списка с кружков на квадраты:
<ul>
@foreach (var node in Model.Nodes) {
<li style="list-style-type:square;">@Html.DisplayFor(m => node)
@if (node.Children.Any()) {
@Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
Можете обновить страницу без необходимости пересборки проекта. Начальная страница News должна выглядеть так:
ХЛЕБНЫЕ КРОШКИ
Так же легко мы можем добавить хлебные крошки. Откроем наш _Layout.cshtml и напишем следующий код:
<body>
@Html.MvcSiteMap().Menu(false, true, true)
<p>Start of Breadcrumbs:</p>
@Html.MvcSiteMap().SiteMapPath()
@RenderBody()
</body>
Теперь на всех страницах есть удобные хлебные крошки:
Аналогично, если захотим настроить внешний вид хлебных крошек, нужно отредактировать файл Views/Shared/DisplayTemplates/SiteMapPathHelperModel.cshtml.
ДИНАМИЧНЫЙ URL / ПАРАМЕТРИЗОВАННЫЙ URL
Любой реальный сайт в какой-то момент будет использовать динамичный или параметризованный URL. Добавить динамичный URL в MVC Sitemap довольно просто, если знаешь как. Давайте начнем с добавления нового метода в NewsController:
//GET: News/Article/x
public ActionResult Article(int id)
{
ViewBag.id = id;
return View();
}
Теперь добавим представление. Отредактируем Article.cshtml следующим образом:
@{
ViewBag.Title = "Article";
}
<h2>Viewing Article @ViewBag.id</h2>
Откроем страницу в браузере localhost:xxxx/News/Article/1234:
Отметим, что новая страница не отмечена в sitemap и поэтому хлебные крошки пусты.
Для того, чтобы вставить в страницу в меню навигации, сначала нужно решить, где она будет находиться. Я хочу, чтобы она находилась внутри секции News. Отредактируем Mvc.Sitemap и добавим атрибут Key к ноду “News”.
<mvcSiteMapNode title="News" controller="News" action="Index" key="News">
Теперь добавим атрибуты к методу Article контроллера News:
//GET: News/Article/x
[MvcSiteMapNode(Title = "Article", ParentKey = "News")]
public ActionResult Article(int id)
{
ViewBag.id = id;
return View();
}
Соберем проект и откроем в браузере localhost:xxxx/News/Article/1234:
Теперь у нас есть хлебные крошки и меню навигации на новой странице, несмотря на динамичный URL!
СКАЧАТЬ РЕШЕНИЕ
Скачать решение можете здесь.
Автор: dimkahare
