7.3.2. Использование элементов управления Menu и SiteMapPath
После того, как карта сайта определена, становится возможным использование элементов управления, связанных с ней, для отображения данных о структуре приложения. Для этого возможно использование таких элементов управления как Menu, SiteMapPath. Элемент Menu предназначен для вывода элементов структуры приложения на экран. Элемент SiteMapPath предназначен для отображения текущего положения пользователя в иерархии Веб-приложения и позволяет ему переходить вверх по иерархии на более высокий уровень. Рассмотрим примеры использования элементов управления SiteMapPath и Menu.
7.3.2.1. Использование Menu
Обратимся к предыдущему примеру, использующему мастер страницы [6]. В соответствии с описанием карты сайта, создадим шесть файлов aspx и добавим их в проект. В результате добавления файлов, Веб-приложение должно содержать файлы Default.aspx, Default2.aspx, Default3.aspx, … , Default6.aspx.
Проект в окне Solution Explorer выглядит так, как показано на рис. 7.8.
Рис. 7.8. Веб-приложение в Solution Explorer
В режиме редактирования дизайна, откроем мастер страниц MainMasterPage.master и добавим элементы TreeView и Menu в область меню, расположенную слева, как показано на рис. 7.9.
Рис. 7.9. Добавление элементов и Menu
Теперь необходимо задать источник данных для элементов управления Menu (рис. 7.10).
Рис. 7.10. Определение источника данных компонента Menu
Для этого необходимо в свойстве Choose Data Source выбрать пункт <New data source…> и в открывшемся окне выбрать Site Map (рис. 7.11). При этом будет создан и добавлен на страницу источник данных с заданным именем.
Рис. 7.11. Создание источника данных SiteMap
Исходный код источника данных выглядит следующим образом:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Аналогичным образом можно настроить и внешний вид меню, указав одну из имеющихся тем. В результате будет сгенерирован следующий код:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
Width="103px" BackColor="#B5C7DE" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98"
StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#507CD1" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
После запуска приложения, его окно будет выглядеть следующим образом (рис. 7.12). Для перехода к соответствующей странице можно воспользоваться любым элементом меню, либо дерева.
Рис. 7.12. Окно Веб-приложения после добавления элементов TreeView и Menu
Элемент управления Menu обладают дополнительными свойствами, с помощью которых возможно изменить их внешний вид, в соответствии с дизайном Веб-приложения.