Всемогущий, Google, найди мне чего-нибудь!

среда, 10 февраля 2010 г.

Карта сайта в ASP.NET MVC приложении

При создании своих ASP.NET приложений, необходимо учитывать потребности пользователя в отображении его текущего положения на сайте. По-другому, это называется breadcrumb (хлебные крошки). Наша старая добрая знакомая Википедия дает следующее описание данному понятию:
Хлебные крошки» (англ. Breadcrumbs) — элемент навигации по сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь.
Обычно представляет собой полосу в верхней части страницы примерно такого вида:
Главная страница → Раздел → Подраздел → Текущая страница
Все элементы, кроме последнего, обычно являются внутренними гиперссылками.
Теперь перейдем непосредственно к теме статьи. В арсенале могучей ASP.NET есть такой элемент "SiteMapPath". Также есть сторонняя разработка класса ASP.NET SiteMapProvider, который не является встроенным (можно скачать с codeplex).  Но сперва расскажу, как пользоваться стандартным элементом:
1. добавьте в ваше Web-приложение элемент "Site Map" и назовите его например "Web.sitemap" (рис. 1);
Рис. 1. Добавление файла карты сайта

2. в только что созданном Web.sitemap файле необходимо описать всю карту сайта (пока что статическую). Вот пример (начальный) карты сайта для разрабатываемого мной в данный момент приложения:

 <sitemap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <sitemapnode description="Главная страница" title="Главная" url="/">
   <sitemapnode description="Страница контактов" title="Контакты" url="/Home/Contacts"/>
   <sitemapnode description="Страница о компании" title="О нас" url="/Home/About"/>
   <sitemapnode description="Страница сервисов" title="Сервисы" url="/Home/Services"/>
   <sitemapnode description="Список ПО на сервере" title="Софт" url="/Soft"/>
   <sitemapnode description="Страница администратор" title="Администратор" url="/Account/Administrator"/>
   <sitemapnode description="Профиль пользователя" title="Профиль" url="/Account/Profile"/>
   <sitemapnode description="Форма входа на сайт" title="Вход" url="/Account/LogOn"/>
   <sitemapnode description="Форма регистрации на сайте" title="Регистрация" url="/Account/Register"/>
  </sitemapnode>
</sitemap>

3. затем в вашем файле кофигурации (Web.config) необходимо описать откуда же нашему элементу брать структуру нашего сайта (или карту сайта):
<sitemap defaultprovider="AspNetXmlSiteMapProvider">
 <providers>
  <clear/>
  <add name="AspNetXmlSiteMapProvider" securitytrimmingenabled="true"  sitemapfile="Web.sitemap" type="System.Web.XmlSiteMapProvider">
  </add>
 </providers>
</sitemap>
4. Теперь хлебные крошки лучше всего выводить в Master.Page, который будет использоваться для работы сайта. Для вывода карты сайта в мастер-странице напишите в том месте, где необходимо:
<asp:sitemappath id="SiteMapPath" runat="server">
</asp:sitemappath>
Хотя карту сайта можно поместить и в отдельное частичное отображение. Я использую ASP.NET MVC 2.0 Framework, поэтому для вывода можно в Site.Master (у вас может называться по-другому) написать:
А в папке Shared создать частичное отображение Breadcrumb.ascx (рис. 2) и поместить туда код, написанный выше.


 Рис. 2. Добавление заготовки для хлебные крошек

Теперь, вуаля, хлебные крошки работают у вас на сайте! :)
Для более сложной карты сайта с динамическими хлебными крошками советую использовать ASP.NET MVC SiteMap provider - MvcSiteMap.

10 комментариев:

Анонимный комментирует...

Пикольная статья

Unknown комментирует...

Спасибо, очень стараюсь :)

Анонимный комментирует...

Пожалуйста подскажите почему после выполнения всех действий возникает ошибка на строку
Спасибо!

Анонимный комментирует...

На строку из 3 пункта сайтмап провайдер...

Unknown комментирует...

1. возможно не подключен референс на System.Web;
2. возможно вы поместили тэг не внутри тега в файле Web.config.

Анонимный комментирует...

А что на счет компонента sitemappath, он же отобразит только текущее наше место нахождение из этой карты, а чтобы отобразить дерево необходимо использовать TreeView?!
к тому же, выше сказанные действия выполнены, если устраняется ошибка из конфига то возникает в Site.master
на Html.RenderPartial("Breadcrumb");

Unknown комментирует...

На счет полного отображения, то можно самому из файла Web.sitemap с помощью Linq To Xml загрузить содержимое, распарсить и нарисовать.
Другой вариант: воспользоваться расширением <%= Html.SiteMap() %>

По поводу Breadcrumb.ascx. Вот как выглядит мой файл:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<asp:SiteMapPath ID="SiteMapPath" runat="server">
</asp:SiteMapPath>

И, не сочтите за грубость, вы используете ASP.NET или ASP.NET MVC?

Unknown комментирует...

По поводу метода Html.SiteMap, то он не родной для ASP.NET MVC. Взят отсюда: ASP.NET MVC SiteMap provider - MvcSiteMap

Unknown комментирует...

По поводу метода Html.Sitemap, то он не родной для ASP.NET MVC. Взят отсюда: ASP.NET MVC SiteMap provider - MvcSiteMap

И ещё, в тэге <sitemap /> в web.config, добавьте свойство enabled="true":
<siteMap defaultProvider="AspNetXmlSiteMapProvider" enabled="true" >

Анонимный комментирует...

В том то все и дело что ASP.NET MVC
На обычном ASP.NET нет подобных проблем, а по поводу ошибок в конфиге, я слышал подобные ошибки могут возникать в зависимости с разными версиями, как совет был изменить версию, Если не ошибаюсь то с ASP.NET MVC 2 на ASP.NET MVC 1.1