ASP.Net. Лекція 11. Навігація по сайту (исходники), HTML, XML, DHTML, Інтернет-технології, статті

Лекція 10


До сих пір ми створювали окремі сторінки. Веб-додатки, які зазвичай створюються для роботи в Інтернет, складаються з великої кількості взаємопов’язаних сторінок. Перехід з однієї сторінки на іншу відбувається за гіперпосиланнями. На багатьох сайтах створюються різні засоби для подорожей по сторінках. Панелі навігації розташовуються у верхній частині сторінки у вигляді смуги, праворуч або ліворуч у вигляді деревовидної структури.












Курси


Навчальні програми


Підручники


Новини


Форум


Допомога


Для того, щоб спростити розробку такої функціональності, в ASP.NET 2.0 надано можливість у вигляді готових елементів управління навігації.


Site Map


Структура навігації повинна бути описана в карті сайту. Вона знаходиться в файлі. Sitemap формату XML, який можна створити в діалозі New File, вибравши пункт Site Map. Ім’я цього файлу замовчуванням – web.sitemap. Карта сайту служить джерелом інформації для всіх елементів управління групи Navigation. З нею можна працювати програмно за допомогою класу SiteMap або через елемент управління-джерело даних SiteMapDataSource.


Вузли siteMapNode можуть вкладатися один в одного, створюючи ієрархію. Логіка вкладеності вузлів ніяк не пов’язана з фізичним розташуванням файлів. Кожен атрибут url у файлі. Sitemap повинен бути унікальним.


Схема формату. Sitemap






  <?xml version=”1.0″ encoding=”utf-8″ ?>
<xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema”
   elementFormDefault=”qualified”>
  <xs:element name=”siteMap”>
    <xs:complexType>
      <xs:sequence>
        <xs:element ref=”siteMapNode” maxOccurs=”unbounded” />
      </xs:sequence>
    </xs:complexType>
  </xs:element>
  <xs:element name=”siteMapNode”>
    <xs:complexType>
      <xs:sequence>
        <xs:element ref=”siteMapNode” minOccurs=”0″ maxOccurs=”unbounded”/>
      </xs:sequence>
      <xs:attribute name=”url” type=”xs:string” />
      <xs:attribute name=”title” type=”xs:string” />
      <xs:attribute name=”description” type=”xs:string” />
      <xs:attribute name=”keywords” type=”xs:string” />
      <xs:attribute name=”roles” type=”xs:string” />
      <xs:attribute name=”siteMapFile” type=”xs:string” />
      <xs:attribute name=”Provider” type=”xs:string” />
    </xs:complexType>
  </xs:element>
</xs:schema>

Щоб зробити карту сайту доступною для елементів управління, використовується провайдер типу XmlSiteMapProvider. Можна розробити власний провайдер.


Редагування карти сайту в Visual Studio 2005 полегшується за допомогою технології IntelliSense.


Атрибут title вузла карти сайту створює текстовий опис сторінки. Він використовується як текст гіперпосилання, створюваної в TreeView або Menu. Атрибут description задає текст підказки (Tooltip), пов’язаної з цією гіперпосиланням. Атрибут url описує шлях до сторінки всередині веб-сайту. При цьому для сторінок в кореневій директорії досить вказати їх назву. Якщо сторінка знаходиться в піддиректорії, шлях вказується за допомогою прямого слеша.






  <?xml version=”1.0″ encoding=”utf-8″ ?>
<siteMap>
      <siteMapNode title=”Home” url=”Default.aspx”>
            <siteMapNode title=”Resume” url=”Resume.aspx” />
            <siteMapNode title=”Links” url=”Links.aspx” />
            <siteMapNode title=”Albums” url=”Albums.aspx” >
                  <siteMapNode title=”Photos” url=”Photos.aspx” >
                        <siteMapNode title=”Details” url=”Details.aspx” />
                  </siteMapNode>
            </siteMapNode>
            <siteMapNode title=”Register” url=”Register.aspx” />
            <siteMapNode title=”Manage” url=”Admin/Albums.aspx” >
                  <siteMapNode title=”Photos” url=”Admin/Photos.aspx” >
                        <siteMapNode title=”Details” url=”Admin/Details.aspx” />
                  </siteMapNode>
            </siteMapNode>
      </siteMapNode>
</siteMap>

Елементи управління для навігації по сайту – Treeview, Menu, SiteMenuPath.


Деякі елементи навігації можуть працювати з картою безпосередньо, наприклад, SiteMenuPath, але Menu і Treeview можуть показувати карту сайту, тільки отримуючи дані з SiteMapDataSource.


Елемент управління SiteMapPath


Подібну панель, яка показує шлях від головної сторінки до поточної, часто називають breadcrumb (хлібні крихти).


MSDN Home > ASP.NET Developer Center > Reference > Using ASP.NET Controls


Ймовірно, це пов’язано з казкою про хлопчика-с-Пальчик, який кидав хлібні крихти по дорозі в ліс, щоб знайти шлях додому. Користувач великого і складного веб-сайту теж повинен знати, де він знаходиться, і не загубитися в лабіринті. Тому можна назвати цей елемент ще й ниткою Аріадни. Він складається з послідовності гіперпосилань на всі вищі вузли сайту. Поточна сторінка відображена простим текстом. Цю настройку можна змінити, встановивши властивість RenderCurrentNodeAsLink в True.


Для того, щоб на сторінці працював цей елемент, навіть не потрібно джерела даних. Він автоматично читає карту сайту з файлу Web.sitemap. Досить просто перетягнути його на сторінку. Є 4 властивості стилю, кожен з яких задається окремо: для кореневого елемента, для роздільник, звичайного вузла та поточного вузла. У SiteMapPath є така ж можливість автоформатування, як і в багатьох інших елементів управління.


Властивість PathDirection дозволяє змінити напрямок від кореня до поточної сторінки на протилежне. Наприклад, якщо у вас був таким:


Головна: Гра: Таблиця


, То після зміни значення PathDirection на CurrentToRoot стане таким:


Таблиця: Гра: Головна


Текстовий атрибут PathSeparator задає роздільник між вузлами. Наприклад, у першому прикладі це “>”, який ставиться за замовчуванням, а в другому “:”. Прогалини тут істотні. Схожі атрибути був і в календарі – наприклад NextMonthText. Для того, щоб задати зображення, як роздільник, можна використовувати шаблон PathSeparatorTemplate.






      <asp:SiteMapPath ID=”SiteMapPath1″ runat=”server”>
      <PathSeparatorTemplate>
        <asp:Image ID=”Image1″ runat=”server” ImageUrl=”img/folder.gif” />
      </PathSeparatorTemplate>
    </asp:SiteMapPath>

Властивість ParentLevelsDisplayed дозволяє обмежити кількість відображуваних батьківських вузлів. Якщо воно дорівнює -1 (за замовчуванням), то показуються всі вузли.


Якщо потримати курсор миші над елементом, з’явиться підказка, текст якої береться з атрибута description відповідного вузла карти сайту. Відключити відображення підказки можна за допомогою властивості ShowToolTips = “false”.


Всього є 4 шаблону: PathSeparatorTemplate, NodeTemplate, RootTemplate і CurrentNodeTemplate, за допомогою яких можна вставляти будь-які елементи управління в різні частини SiteMapPath. Для кожної з частин можна визначити і власний стиль.


SiteMapDataSource


Джерело даних SiteMapDataSource працює за допомогою провайдера SiteMapProvider. Це джерело даних не підтримує кешування, як інші. Він може бути пов’язаний тільки з файлом карти сайту.


У найпростішому вигляді оголошується так:






  <asp:SiteMapDataSource ID=”SiteMapDataSource1″ Runat=”server” />

Властивість ShowStartingNode визначає, чи буде елемент читати кореневий вузол карти сайту. Якщо не встановлено, то в колекцію вузлів потраплять тільки дочірні елементи кореневого вузла.


StartFromCurrentNode = False задає можливість читати тільки вузли, починаючи з поточної сторінки.


Властивість FlatDepth задає кількість рівнів вкладеності, яке читається з карти сайту. За умовчанням це -1, тобто читаються всі доступні рівні.


SiteMapProvider може бути корисним при написанні власних провайдерів карти сайту.


SiteMapViewType визначає форму подання вузлів. За умовчанням це Tree. Якщо значення дорівнює Path, то буде читатися шлях між кореневим вузлом і поточним, як в елементі управління SiteMapPath.


TreeView


Елемент TreeView створений спеціально для показу ієрархічної інформації. Він може черпати інформацію як з будь-якого XML-файла через XmlDataSource, так і з карти сайту за допомогою SiteMapDataSource. Як випливає з його назви, TreeView показує дані у вигляді дерева, причому його вузли можна розкривати і закривати, вибирати окремі «листя». При цьому будуть запускатися події, які можна обробити.


TreeView складається з вузлів, які з’єднані між собою відносинами «батько-нащадок”. У одного з батьків може бути один або кілька нащадків. Вузли, у яких немає батька, називаються кореневими. Їх в елементі управління може бути декілька. Вузли, у яких немає нащадків, називаються листям.


При декларації TreeView на сторінці вузли описуються тегами TreeNode. Допускається будь-який рівень вкладеності вузлів один в одного. Вузли елемента керування можна редагувати візуально






  <asp:TreeView ID=”TreeLibrary” runat=”server” ImageSet=”WindowsHelp” >
   <Nodes>
               </asp:TreeNode>
            </asp:TreeNode>
         </asp:TreeNode>
            <asp:TreeNode Text=”Web Development” Value=” Web Development” NavigateUrl=”~/example1.aspx?id=1″>
               <asp:TreeNode Text=”JavaScript” Value=” JavaScript ” NavigateUrl=”~/example1.aspx?id=2″>
               </asp:TreeNode>
               <asp:TreeNode Text=”ASP.NET” Value=”ASP.NET” NavigateUrl=”~/example1.aspx?id=3″></asp:TreeNode>
            </asp:TreeNode>
         </asp:TreeNode>
      </asp:TreeNode>
   </Nodes>
</asp:TreeView>

Якщо потрібно програмно додавати дочірні вузли, властивість PopulateOnDemand потрібно встановити в true.


Зовнішній вигляд TreeView можна міняти найрізноманітнішим способом. Можна включити показ ліній, що з’єднують вузли.






  ShowLines=”True”

Зовнішній вигляд ліній можна відредагувати, при цьому за допомогою засобу TreeView Line Generator будуть створені зображення для всіх її фрагментів.


Замість тексту у вузлах можна показувати зображення, задані властивістю ImageUrl.


Властивість ImageSet має набір зумовлених значків для різних типів вузлів. Наприклад, MSDN додасть вашому дереву схожість з TreeView на сайті msdn.com, а XPFileExplorer з програмою Explorer в Windows XP.


      </siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

Одне з меню має показувати розділи сайту, друге – можливості користувача.






      <asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” ShowStartingNode=”False” StartingNodeUrl=”~/Default.aspx” />
    <asp:Menu ID=”Menu1″ runat=”server” BackColor=”#FFFBD6″ DataSourceID=”SiteMapDataSource1″ DynamicHorizontalOffset=”2″
    Font-Names=”Verdana” Font-Size=”0.8em” ForeColor=”#990000″ StaticSubMenuIndent=”10px” Orientation=”Horizontal”>
        <StaticMenuItemStyle HorizontalPadding=”5px” VerticalPadding=”2px” />
        <DynamicHoverStyle BackColor=”#990000″ ForeColor=”White” />
        <DynamicMenuStyle BackColor=”#FFFBD6″ />
        <StaticSelectedStyle BackColor=”#FFCC66″ />
        <DynamicSelectedStyle BackColor=”#FFCC66″ />
        <DynamicMenuItemStyle HorizontalPadding=”5px” VerticalPadding=”2px” />
        <StaticHoverStyle BackColor=”#990000″ ForeColor=”White” />
    </asp:Menu>
    <asp:SiteMapDataSource ID=”SiteMapDataSource2″ runat=”server” ShowStartingNode=”False”
        StartingNodeUrl=”~/Default2.aspx” />
     </div>
    <asp:Menu ID=”Menu2″ runat=”server” DataSourceID=”SiteMapDataSource2″
        Orientation=”Horizontal” BackColor=”#F7F6F3″ DynamicHorizontalOffset=”2″
        Font-Names=”Verdana” Font-Size=”0.8em” ForeColor=”#7C6F57″ StaticSubMenuIndent=”10px” StaticDisplayLevels=”2″>
        <StaticMenuItemStyle HorizontalPadding=”5px” VerticalPadding=”2px” />
        <DynamicHoverStyle BackColor=”#7C6F57″ ForeColor=”White” />
        <DynamicMenuStyle BackColor=”#F7F6F3″ />
        <StaticSelectedStyle BackColor=”#5D7B9D” />
        <DynamicSelectedStyle BackColor=”#5D7B9D” />
        <DynamicMenuItemStyle HorizontalPadding=”5px” VerticalPadding=”2px” />
        <StaticHoverStyle BackColor=”#7C6F57″ ForeColor=”White” />
    </asp:Menu>

Пункти меню можуть бути описані на сторінці, а також додані програмно.






      <asp:Menu ID=”Menu3″ runat=”server”
    BackColor=”#B5C7DE” DynamicHorizontalOffset=”2″ Font-Names=”Verdana”
    Font-Size=”0.8em” ForeColor=”#284E98″ StaticDisplayLevels=”3″
    StaticSubMenuIndent=”30px”>
        <Items>
            </asp:MenuItem>
        </Items>
    </asp:Menu>

Коли елемент управління прив’язаний до карти сайту, то пункти меню являють собою гіперпосилання на сторінки. Подія MenuItemClick дозволяє визначити поведінку сторінки при виборі пунктів меню, коли він заповнюється іншими способами, наприклад, через XmlDataSource. У параметрі MenuEventArgs знаходиться інформація і про обраний пункті, і про батьківський вузлі.






  <script runat=”server”>
   protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
   {
      Listbox1.Items.Add(e.Item.Parent.Value + ” : ” + e.Item.Value);
   }
</script>

Висновок


Багаті можливості системи навігації ASP.NET 2.0 дозволяють відокремити логічне уявлення карти сайту від його візуального представлення, заощадити час на розробку.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*