Хлебные Крошки В Asp.net Mvc3

В этом посте будет описан процесс создания меню навигации и навигационной навигации в проекте asp.net MVC3. Сначала мы создадим пустой проект, затем добавим поставщика карты сайта, несколько контроллеров и представлений и, наконец, заставим провайдер выводить хлебные крошки.

МОНТАЖ

Создайте новое веб-приложение Asp.Net MVC3. Я назову его SitemapDemo:



Для демонстрации я выбрал пустой шаблон с движком рендеринга Razor. Теперь, прежде чем мы что-нибудь сделаем, давайте вернемся и поместим NuGet полиэтиленовый пакет. Выбирать Вид > Другие окна а затем выберите « Консоль диспетчера пакетов ”:



Чтобы добавить поставщика карты сайта Asp.net MVC в текущий проект, вам необходимо ввести следующую команду в консоли диспетчера пакетов и нажать Enter:

   

 PM> Install-Package MvcSiteMapProvider

   

В случае успеха консоль диспетчера пакетов выведет что-то вроде этого:

PM> Install-Package MvcSiteMapProvider Successfully installed 'MvcSiteMapProvider 3.1.0.0'.

Successfully added 'MvcSiteMapProvider 3.1.0.0' to SitemapDemo. PM>

Теперь давайте посмотрим, что на самом деле добавил в наш проект менеджер пакетов NuGet:

• SitemapDemo > Ссылки > MvcSiteMapProvider — ссылка на MvcSiteMapProvider.dll
• SitemapDemo > Mvc.sitemap — этот файл будет использоваться для описания нашего веб-сайта MVC3 в узлах XML.
• SitemapDemo > Представления > Общие > DisplayTemplates > MenuHelperModel.cshtml
• SitemapDemo > Представления > Общие > DisplayTemplates > SiteMapHelperModel.cshtml
• SitemapDemo > Представления > Общие > DisplayTemplates > SiteMapNodeModel.cshtml
• SitemapDemo > Представления > Общие > DisplayTemplates > SiteMapNodeModelList.cshtml
• SitemapDemo > Представления > Общие > DisplayTemplates > SiteMapPathHelperModel.cshtml
• SitemapDemo > Представления > Общие > DisplayTemplates > SiteMapTitleHelperModel.cshtml

SitemapDemo > Представления > Общие > DisplayTemplates .

Вот как сейчас выглядит наш проект:



Теперь все готово.

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

ВАЖНЫЙ

Итак, сначала мы создаем контроллеры и представления.

У всех веб-сайтов есть домашняя страница, поэтому сначала давайте ее создадим.

Щелкните правой кнопкой мыши папку «Контроллеры» и создайте контроллер «HomeController»:



Теперь ваш контроллер создан и открыт, щелкните правой кнопкой мыши действие «Индекс» и выберите « Добавить просмотр… ”



В диалоге добавления представления просто нажмите « Добавлять «.

Ничего менять не нужно.

Теперь изменим текст на созданной странице.

Добавим заголовок типа «Индекс – это домашняя страница».

Теперь, используя тот же принцип, добавим еще один контроллер.

Назовем его NewsController. Добавим к нему еще один метод «Спорт»:

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. Давайте сделаем это так же, как мы добавляли представления для домашней страницы — щелкнув правой кнопкой мыши каждый метод в контроллере.

Опять же, мы просто оставляем настройки диалогового окна «Добавить вид» по умолчанию и просто нажимаем «Добавить» для обоих представлений.

Добавим еще один контроллер — AboutController. После создания оставьте его без изменений и добавьте новое представление индекса.

Также редактируем заголовок на странице Теперь в нашем проекте 4 страницы.

Их стоит протестировать, прежде чем мы начнем внедрять поставщика карты сайта.

Ниже приведены скриншоты полученных страниц: Скриншоты локальный хост: хххх



localhost:xxxx/Новости



localhost:xxxx/Новости/Спорт



localhost:xxxx/О программе



Отлично, теперь у нас есть небольшой сайт с простой структурой.

Представим структуру сайта в виде схемы:



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

это домашняя страница и первая страница при входе на сайт. Теперь перейдем к настройке карты сайта.

Начнем с редактирования файла 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="Дом" controller="Home" action="Index"> <mvcSiteMapNode title="Новости" controller="News" action="Index"> <mvcSiteMapNode title="Спортивные новости" controller="News" action="Sports"/> </mvcSiteMapNode> <mvcSiteMapNode title="О" controller="About" action="Index"/> </mvcSiteMapNode> </mvcSiteMap>

И вот мы сформировали структуру нашего сайта в файле MVC.Sitemap. Распространенная ошибка здесь — забыть обернуть весь сайт узлом xml, представляющим домашнюю страницу, которую посетитель видит в самом начале.

ДОБАВЛЕНИЕ НАВИГАЦИИ

Откройте _Layout.cshtml, расположенный в папке Views/Shared. Измените код тела страницы, чтобы он выглядел следующим образом:

<body> @Html.MvcSiteMap().

Menu(false, true, true) @RenderBody() </body>

Поэтому мы вызываем библиотеку MvcSiteMap и приказываем ей отображать меню навигации на всех страницах.

Параметры вызова метода говорят следующее:

• Мы не хотим начинать с текущего узла
• Мы хотим показывать узлы на дочерних уровнях.

• Мы хотим показать корневой узел.

  Если установлено значение false, узел «Home» не будет отображаться.

РЕДАКТИРОВАНИЕ НАВИГАЦИОННОГО ВИДА

Если вы хотите изменить стили макета, просто измените код в Просмотры/Общие/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>

Вы можете обновить страницу без необходимости перестраивать проект. Домашняя страница новостей должна выглядеть так:

ПАНИРОВОЧНЫЕ СУХАРИ

Давайте откроем наш _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-адрес в файл Sitemap MVC довольно просто, если вы знаете, как это сделать.

Начнем с добавления нового метода в NewsController:

//GET: News/Article/x public ActionResult Article(int id) { ViewBag.id = id; return View(); }

Теперь давайте добавим представление.

Давайте отредактируем Article.cshtml следующим образом:

@{ ViewBag.Title = "Статья"; } <h2>Viewing Article @ViewBag.id</h2>

Откроем в браузере страницу localhost:xxxx/News/Article/1234:



Обратите внимание, что новая страница не отмечена в карте сайта, поэтому хлебные крошки пусты.

Для того, чтобы вставить на страницу меню навигации, сначала нужно определиться, где оно будет располагаться.

Я хочу, чтобы это было в разделе новостей.

Давайте редактировать Mvc.Карта сайта и добавьте атрибут «Ключ» в узел «Новости».

<mvcSiteMapNode title="Новости" controller="News" action="Index" key="News">

Теперь добавим атрибуты в метод Article контроллера News:

//GET: News/Article/x [MvcSiteMapNode(Title = "Статья", ParentKey = "News")] public ActionResult Article(int id) { ViewBag.id = id; return View(); }

Соберем проект и откроем в браузере localhost:xxxx/News/Article/1234:



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

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

Перевод статьи: edspencer.me.uk/2011/09/20/mvc-sitemap-provider-tutorial-2-breadcrumbs Теги: #asp.net mvc 3 #хлебные крошки #C++ #перевод #razor #.

NET

• Ветер U100

  19 Oct, 24

• Фото: Прототип Устройства Дополненной Реальности Magic Leap

  19 Oct, 24

• Пара Новостей О Рабочей Группе По Подготовке Предложений По Условиям Конкурса На Оказание Услуг Связи Стандарта Lte

  19 Oct, 24

• Чудо-Гаджет. Iphone 3Gs + Видеозвонок По Skype

  19 Oct, 24

• Как «Активный Гражданин» Учит Людей Фишингу

  19 Oct, 24

• Испытание Tpb

  19 Oct, 24

• Как Мы Выдаем Наши Адреса Электронной Почты И Пароли

  19 Oct, 24

• Продолжение. Выбор Ноутбука.

  19 Oct, 24

• Обзор 5 Платформ Для Создания Сайтов

  19 Oct, 24

• Анонс Flash Gamm Киев 2010

  19 Oct, 24