Хлебные крошки (breadcrumbs) в asp.net MVC3

в 11:53, , рубрики: .net, asp.net mvc 3, razor, перевод, переводы, Песочница, хлебные крошки, метки: , , , ,

В данном посте будет рассмотрен процесс создания меню навигации и хлебных крошек в проекте 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:

image

Для демонстрации я выбрал пустой шаблон с движком визуализации Razor.
Теперь, прежде чем что-либо делать, давайте вернемся и поставим NuGet пакет. Выберите View > Other Windows и затем выберите “Package Manager Console”:

image

Чтобы добавить Asp.net MVC sitemap provider в текущий проект, нужно ввести следующую команду в Package Manager Console и нажать enter:

PM> Install-Package MvcSiteMapProvider

Эта команда скачает необходимые файлы (dlls, cshtml files) и добавит их в ваш MVC проект. Операция может занять несколько минут, в зависимости от вашего соединения. В случае успеха Package Manager Console выведет что-то вроде этого:

PM> Install-Package MvcSiteMapProvider
Successfully installed 'MvcSiteMapProvider 3.1.0.0'.
Successfully added 'MvcSiteMapProvider 3.1.0.0' to SitemapDemo.

PM>

Теперь давайте посмотрим что в действительности 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. Вот как теперь выглядит наш проект:

image

Теперь все готово. Теперь давайте добавим несколько контроллеров и представлений перед тем, как начнем играться с SiteMapProvider.

ВАЖНО

MVC Sitemap provider в некоторых случаях тихо умрет если мы попытаемся заставить его работать с методами контроллеров, которых не существует, или несуществующими представлениями. Поэтому мы сначала создаем контроллеры и представления.
У всех сайтов есть домашняя страница, так что для начала давайте создадим ее. Кликаем правой кнопкой по папке Controllers и создаем контроллер “HomeController”:

image

Теперь ваш контроллер создан и отрыт, правый клик по действию Index и выбираем “Add View…

image

В диалоге добавления представления просто жмем "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
image

localhost:xxxx/News
image

localhost:xxxx/News/Sports
image

localhost:xxxx/About
image

Отлично, теперь у нас маленький сайт с простой структурой. Представим структуру сайт в диаграмме:

image

Визуализация макета сайта поможет нам корректно описать структуру файла Mvc.sitemap. Наша страница Index является оберткой всего сайта, т.к. является домашней страницей и первой страницей при входе на сайт.

Теперь перейдем в конфигурации карты сайта. Начнем с редактирования файла Mvc.sitemap, которые находится в корне нашего проекта. Файл содержит в себе xml ноды, необходимые для представления комбинаций ваших контроллеров и методов.

image

Отредактируйте 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” не будет показан

Если запустим наше приложение, мы должны увидеть меню навигации на каждой странице:

image
image

РЕДАКТИРОВАНИЕ ПРЕДСТАВЛЕНИЯ НАВИГАЦИИ

Нам удалось вывести простое меню навигации на страницы нашего сайта. Если вы захотите изменить стили верстку, просто измените код в 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 должна выглядеть так:

image

ХЛЕБНЫЕ КРОШКИ

Так же легко мы можем добавить хлебные крошки. Откроем наш _Layout.cshtml и напишем следующий код:

<body>
    @Html.MvcSiteMap().Menu(false, true, true)
    <p>Start of Breadcrumbs:</p>
    @Html.MvcSiteMap().SiteMapPath()
    @RenderBody()
</body>

Теперь на всех страницах есть удобные хлебные крошки:

image
image

Аналогично, если захотим настроить внешний вид хлебных крошек, нужно отредактировать файл 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:

image

Отметим, что новая страница не отмечена в 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:

image

Теперь у нас есть хлебные крошки и меню навигации на новой странице, несмотря на динамичный URL!

СКАЧАТЬ РЕШЕНИЕ

Скачать решение можете здесь.

Автор: dimkahare

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js