当一个asp:TreeView在UpdatePanel中时，如何清除前面的选择?

I have an ASP.Net 2.0 page that contains two UpdatePanels. The first panel contains a TreeView. The second panel contains a label and is triggered by a selection in the tree. When I select a node the label gets updated as expected and the TreeNode that I clicked on becomes highlighted and the previously selected node is no longer highlighted. However if a node is original highlighted(selected) in the code-behind the highlight is not removed when selecting another node.

我有一个ASP。包含两个UpdatePanels的Net 2.0页面。第一个面板包含一个TreeView。第二个面板包含一个标签，由树中的一个选项触发。当我选择一个节点时，标签将按预期更新，我单击的TreeNode将突出显示，先前选中的节点将不再突出显示。但是，如果一个节点是在代码后突出显示(选中)的，则在选择另一个节点时突出显示不会被删除。

The markup

标记

<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
   <ContentTemplate>
      <asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
         <SelectedNodeStyle BackColor="Pink" />
      </asp:TreeView>
   </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="True">
   <ContentTemplate>
      <asp:Label ID="Label1" runat="server" Text=" - "></asp:Label>
   </ContentTemplate>
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="SelectedNodeChanged" />
   </Triggers>
</asp:UpdatePanel>

The code behind

后面的代码

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
      TreeView1.Nodes.Add(new TreeNode("Test 1", "Test One"));
      TreeView1.Nodes.Add(new TreeNode("Test 2", "Test Two"));
      TreeView1.Nodes.Add(new TreeNode("Test 3", "Test Three"));
      TreeView1.Nodes.Add(new TreeNode("Test 4", "Test Four"));
      TreeView1.Nodes[0].Selected = true;
   }
}

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
   Label1.Text = TreeView1.SelectedValue;
}

The at the start the first node is selected. Why is its highlight not removed when selecting another node?

在开始时选择第一个节点。为什么在选择另一个节点时不删除它的突出显示?

Also, I asked a different question about the same setup that I haven't got an answer for. Any help would appreciated.

此外，我还问了一个不同的问题，关于我还没有得到答案的相同设置。任何帮助将感激。

Edit I know that setting ChildrenAsTriggers="false" will work but I want to avoid rendering the tree again as it can be very large.

编辑我知道设置ChildrenAsTriggers="false"会有用，但我想避免再次渲染树，因为它可能非常大。

3 个解决方案

#1

    /// <summary>
    /// Remove selection from TreeView
    /// </summary>
    /// <param name="tree"></param>
    public static void ClearTreeView(TreeView tree)
    {

        if (tree.SelectedNode != null)
        {
            tree.SelectedNode.Selected = false;
        }
    }

#2

You need to set the selection to false for all nodes.

您需要将所有节点的选择设置为false。

I use something like this for one of my applications (with my treeview tvCategories):

我在我的一个应用程序(我的treeview tvCategories)中使用类似的东西:

public void RefreshSelection(string guid)
{
    if (guid == string.Empty)
        ClearNodes(tvCategories.Nodes);
    else
        SelectNode(guid, tvCategories.Nodes);

}

private void ClearNodes(TreeNodeCollection tnc)
{
    foreach (TreeNode n in tnc)
    {
        n.Selected = false;
        ClearNodes(n.ChildNodes);
    }
}
private bool SelectNode(string guid, TreeNodeCollection tnc)
{
    foreach (TreeNode n in tnc)
    {
        if (n.Value == guid)
        {
            n.Selected = true;
            return true;
        }
        else
        {
            SelectNode(guid, n.ChildNodes);
        }
    }

    return false;
}

#3

This may be a bit of a hack but this will clear the selection on the client and avoid updating the panel.

这可能有点麻烦，但这将清除客户端上的选择，并避免更新面板。

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function BeginRequestHandler(sender, args)
   {
      var elem = args.get_postBackElement();
      var selectedClassName = elem.id + '_1';

      var arrAllElements = GetElementsByClassName(selectedClassName, elem);
      var selectedNode = $get(elem.id + '_SelectedNode').value;

      for(var i = 0; i < arrAllElements.length; i++)
      {
         if(arrAllElements[i].childNodes[0].id != selectedNode)
            RemoveClassName(arrAllElements[i], selectedClassName );
      }
   }
);

It removes the selected style/class from all tree nodes unless its value is contained in the '_SelectedNode' hidden field. GetElementsByClassName and RemoveClassName are in my own js library but are obvious enough.

它从所有树节点中删除选定的样式/类，除非它的值包含在'_SelectedNode'隐藏字段中。GetElementsByClassName和RemoveClassName在我自己的js库中，但是它们非常明显。