Навігація по додатку.
Для додавання навігації по сторінках Веб-додатку додамо карту сайту. Для цього виберемо Add New Item та у вікні оберемо пункт Site Map та натиснемо кнопку ОК (рис. 2.29).
Рис. 2.29. Додавання нового елемента до веб-додатку
В результаті буде створено файл, що містить заголовок для введення структури Веб-додатка.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>
Приклад 7. В якості прикладу найпростішої карти сайта створимо ієрархію сторінок, що складає із шести позицій. Самим верхнім елементом ієрархії буде домашня сторінка, що посилається на файл Default.aspx. Всі інші елементи будуть вкладені в нього. Крім того, в елемент "Сторінка 4" повинні бути вкладені ще два елементи. Приклад карти сайта, що описує дану структуру, приведений нижче:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Fiesta" description="">
<siteMapNode url="Default2.aspx" title="Focus" description="" />
<siteMapNode url="Default3.aspx" title="Fusion" description="" />
<siteMapNode url="Default4.aspx" title="Kuga" description="" />
<siteMapNode url="Defaul5.aspx" title="Mondeo" description="" />
<siteMapNode url="Default6.aspx" title="C-max" description="" />
</siteMapNode>
</siteMap>
Після того, як карта сайта визначена, стає можливим використання елементів керування, зв'язаних з нею для відображення даних про структуру додатка. Для цього можливо використання таких елементів керування як TreeVіew, Menu, SіteMapPath. Елементи TreeVіew і Menu мають однакову функціональність і призначені для представлення елементів структури додатка на екран. Розходження полягає у формі представлення даних. Елемент SіteMapPath призначений для відображення поточного положення користувача в ієрархії Web додатка і дозволяє йому переходити нагору по ієрархії на більш високий рівень. Розглянемо приклади використання усі трьох елементів керування.
Використання TreeVіew і Menu. У режимі редагування дизайну, відкриємо мастер сторінку MasterPage.master і додамо елементи TreeVіew і Menu в область меню, розташовану ліворуч, як показано на рис. 2.30.
Рис. 2.30. Додавання елемента TreeVіew
Та додавання Menu (рис. 2.31):
Рис. 2.31. Додавання елемента Menu
Тепер необхідно задати джерело даних для елементів керування TreeVіew та Menu (рис. 2.32):
Рис. 2.32. Визначення джерела даних для елементів
Для цього необхідно у властивості Choose Data Source вибрати пункт <New data source...> і у вікні, що відкрилося, вибрати Sіte Map (рис. 2.33). При цьому буде створено і додано на сторінку джерело даних із заданим ім'ям. Вихідний код джерела даних виглядає наступним чином:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Рис. 2.33. Додавання карти сайту в якості джерела даних елементів
Після додавання джерела даних, необхідно задати настройки зовнішнього вигляду елементу TreeVіew, для цього необхідно обрати AutoFormat (рис. 2.34).
Рис. 2.34. Обрання пункту контекстного меню для встановлення стилю
У формі можна задати вигляд TreeVіew, наприклад Arrows2 (рис. 2.35):
Рис. 2.35. Встановлення зовнішнього вигляду елемента TreeVіew
Після запуску додатка, його вікно буде виглядати в такий спосіб (рис. 2.36).
Рис. 2.36. Вигляд елементів управління у браузері
Для переходу до відповідної сторінки можна скористатися будь-як елементом меню, або дерева.
Приклад 8. Використання SіteMapPath. На відміну від TreeVіew і Menu, SіteMapPath відображає тільки поточне положення користувача в ієрархії сторінок Web додатка з можливістю переходу до верхнього рівня ієрархії. Додамо в приклад елемент SіteMapPath. Для цього необхідно додати ще один рядок між заголовком і вмістом майстер- сторінки і просто помістити в неї елемент SіteMapPath. Результат представлений на рис. 2.37.
Рис. 2.37. Вигляд SіteMapPath у браузері
У деяких випадках необхідно виводити на екран структуру деякої частини Web додатка, а не всю її, як це було дотепер. Наприклад, може знадобитися, щоб кореневий вузол не містив у собі всі інші елементи додатка. Точніше, у структурі ця ієрархія повинна зберігатися, а на екран виводитися інакше. Для реалізації цього ефекту можливо установити властивість ShowStartіngNode елемента SіteMapDataSource рівним true. У цьому випадку, кореневий елемент на екран виводитися не буде (рис. 2.38).
Рис. 2.38. Вигляд SіteMapPath у браузері без кореневого вузла
Перехід до нього буде можливий за допомогою SіteMapPath. У випадку ж, якщо необхідно виводити кореневий елемент, але так, щоб інші елементи додатка не входили в нього, необхідно змінити карту сайта додавши фіктивний вузол, не прив'язаний до якого-небудь елемента додатка.