Подсветка выбранного TreeNode

Question

Как выделить выделенный TreeNode (UI.WebControls) в ASP.NET? Цель состоит в том, чтобы позволить пользователю увидеть, какую категорию он или она просматривает в данный момент.

Я думал, что на каждом TreeNode, проверьте, было ли его свойство Selected истинным, а затем измените его шрифт или что-то на другой цвет. Я читал о настройке ForeColor, но он не существует для этого типа TreeNode.

Еще одна мысль состояла в том, чтобы добавить какой-то JavaScript для каждого узла.

Например, код выглядит сегодня так:

private void BuildTree()
    {
        TreeNode nodeNew = new TreeNode("Unread", MessageFolder.New.ToString());

        TreeNode nodeProcessed = new TreeNode("Read", MessageFolder.Processed.ToString());

        TreeViewFolders.Nodes.Add(nodeNew);
        TreeViewFolders.Nodes.Add(nodeProcessed);
    }

Answer 1

Вы должны работать с серверным элементом управления на странице ASPX, вы можете указать

<asp:TreeView id="LinksTreeView"
            Font-Names= "Arial"
            ForeColor="Blue"
            SelectedNodeStyle-ForeColor="Green"
            SelectedNodeStyle-VerticalPadding="0"
            OnSelectedNodeChanged="Select_Change"   
            runat="server">

Попробуйте это и для получения дополнительной информации проверьте эту страницу

Answer 2

Ниже приведен один из способов решения проблемы в ASP.NET 4.0 с веб-формами на главной странице.

На странице презентации можно создать TreeView, например:

<asp:TreeView
    ID="tv"
    runat="server"
    SelectedNodeStyle-BorderStyle="Solid"
    SelectedNodeStyle-HorizontalPadding="5"
    SelectedNodeStyle-VerticalPadding="5" 
    onselectednodechanged="tv_SelectedNodeChanged">
    <Nodes>
        <asp:TreeNode Text="Contact" Value="~/General/Contact.aspx"></asp:TreeNode>
        <asp:TreeNode Text="Change login name" Value="~/General/ChangeLoginName.aspx"></asp:TreeNode>
        <asp:TreeNode Text="Change password" Value="~/General/ChangePassword.aspx"></asp:TreeNode>
        <asp:TreeNode Text="Terms and Policies" Value="~/General/TermsOfUse.aspx"></asp:TreeNode>
    </Nodes>
</asp:TreeView></td>

Здесь необходимо отметить следующие важные вещи:

(1) URL-адреса для навигации назначаются свойству «Значение», а не свойству «NavigateUrl» класса TreeNode.

(2) Мы определили стили для выбранного узла.

(3) Мы определили событие «onselectednodechanged».Простой способ сделать это - дважды щелкнуть TreeView в режиме конструктора.Это также создает заглушку обработчика событий в файле с выделенным кодом, который мы будем использовать через мгновение.

В файле с выделенным кодом следующие три функции - это все, что нужно:

protected void HighlightSelectedLink(TreeNodeCollection nodes, string treeViewSelectedValue)
{
    if (!string.IsNullOrEmpty(treeViewSelectedValue))
    {
        foreach (TreeNode tn in nodes)
        {
            if (tn.Value == treeViewSelectedValue)
            {
                tn.Selected = true;
            }
            else
            {
                tn.Selected = false;
            }

            HighlightSelectedLink(tn.ChildNodes, treeViewSelectedValue);
        }
    }
}

protected void tv_SelectedNodeChanged(object sender, EventArgs e)
{
    string treeViewSelectedValue = tv.SelectedValue;

    if (treeViewSelectedValue.EndsWith(".aspx"))
    {
        Response.BufferOutput = true;
        Response.Redirect(tv.SelectedValue);
    }
}

protected void Page_PreRender(object sender, EventArgs e)
{
    string treeViewSelectedValue = Request.AppRelativeCurrentExecutionFilePath;

    if (!string.IsNullOrEmpty(treeViewSelectedValue))
    {
        TreeNodeCollection nodes = tv.Nodes;
        HighlightSelectedLink(nodes, treeViewSelectedValue);
    }
}

Второй функцией является упомянутый выше обработчик.

Answer 3

В коде за c #:

protected void tv_SelectedNodeChanged(object sender, EventArgs e)
{
    TreeView tv = (TreeView)sender;
    tv.SelectedNodeStyle.ForeColor = System.Drawing.Color.MidnightBlue;
    tv.SelectedNodeStyle.BackColor = System.Drawing.Color.PowderBlue;
    tv.SelectedNodeStyle.Font.Bold = true;
}