Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5897 / 532 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 11:

Навигация по сайту

< Лекция 10 || Лекция 11: 12345 || Лекция 12 >

TreeView

Элемент TreeView создан специально для показа иерархической информации. Он может черпать информацию как из любого XML-файла через XmlDataSource, так и из карты сайта посредством SiteMapDataSource. Как следует из его названия, TreeView показывает данные в виде дерева, причем его узлы можно раскрывать и закрывать, выбирать отдельные "листья". При этом будут запускаться события, которые можно обработать.

TreeView состоит из узлов, которые соединены между собой отношениями "родитель—потомок". У одного родителя может быть один или несколько потомков. Узлы, у которых нет родителя, называются корневыми. Их в элементе управления может быть несколько. Узлы, у которых нет потомков, называются листьями.

При декларации TreeView на странице узлы описываются тегами TreeNode. Допускается любой уровень вложенности узлов друг в друга. Узлы элемента управления можно редактировать визуально:

<asp:TreeView ID="TreeLibrary" runat="server" 
ImageSet="WindowsHelp" >
   <Nodes>
      <asp:TreeNode Text="Категории книг" Value="Book 
Categories">
         <asp:TreeNode Text="Художественная литература" 
Value="literature">
            <asp:TreeNode Text="Русская классика" Value="Russian 
Classics" NavigateUrl="~/libru.aspx?id=1">
               <asp:TreeNode Text="Пушкин" Value="Pushkin" 
NavigateUrl="~/libru.aspx?id=1&auth=10">
               </asp:TreeNode>
            </asp:TreeNode>
         </asp:TreeNode>
         <asp:TreeNode Text="Компьютерная литература" 
Value="Computers">
            <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.


Рис. 11.1.

В качестве изображения для узлов можно задать любые картинки:

CollapseImageUrl="Images/CollapseImage.gif"
ExpandImageUrl="Images/ExpandImage.gif"
LeafImageUrl=Images/LeafImage.gif">

Если источником данных служит XmlDataSource, то его узлы можно привязать к элементу TreeView. Создайте на странице TreeView. У него есть "умный ярлык", который позволит настроить источник данных. Настройка происходит так же, как и у элемента управления Xml.


Рис. 11.2.

После этого нужно настроить способы показа данных. По умолчанию он будет показывать названия узлов, а не их внутреннее содержание. В SmartTag выберите пункт Edit TreeNode Databindings. В результате в редакторе должен появиться примерно такой текст:

<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
        DataFile="~/FilmChoices.xml"
            XPath="FilmChoices/Film"></asp:XmlDataSource>
<asp:TreeView ID="TreeView1" runat="server" 
   DataSourceID="XmlDataSource1" Width="405px">
   <DataBindings>
      <asp:TreeNodeBinding DataMember="Film" TextField="Title" />
      <asp:TreeNodeBinding DataMember="Year" FormatString="Год 
{0}" TextField="#InnerText" />
      <asp:TreeNodeBinding DataMember="Director" 
FormatString="Режиссер {0}" TextField="#InnerText" />
   </DataBindings>
</asp:TreeView>

Значение TextField используется, если нужно показать значения атрибутов узла в исходном XML-файле, а #InnerText указывает текст между открывающими и закрывающими тегами узла.

Если выбираем источником данных SiteMap, то на странице создается еще один элемент управления — SiteMapDataSource:

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:TreeView ID="TreeView1" runat="server" 
DataSourceID="SiteMapDataSource1"
    ShowLines="True" BackColor="WhiteSmoke" BorderStyle="Outset"
    ImageSet="BulletedList" Font-Names="Verdana" Font-
Overline="False"
    ForeColor="#804040" Width="199px" >
</asp:TreeView>

На странице элемент TreeView будет выглядеть так:


Рис. 11.3.

Содержательная часть этого меню находится в файле карты сайта, а форматирование производится в свойствах TreeView. Свойство AutoGenerateDataBindings позволяет автоматически заполнять узлы информацией из карты сайта.

< Лекция 10 || Лекция 11: 12345 || Лекция 12 >
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource.

Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает.

В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково.

Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Карта: <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319