单击节点时如何防止 MasterPage 中的树视图折叠答案

【问题标题】：How to prevent treeview in the MasterPage from collapsing when clicking a node单击节点时如何防止 MasterPage 中的树视图折叠
【发布时间】：2014-08-15 06:53:17
【问题描述】：

我有两个视图嵌套在另一个中。父视图有一个树视图，它的每个节点都是一个链接。当我单击一个节点时，子视图会相应更改（子视图的内容或子视图本身被另一个替换。）但这会导致树视图折叠到其初始状态。我怎么能阻止它这样做？我知道 AJAX 并且有足够的经验。但是我还没有将 AJAX 与 MVC 一起使用。非常感谢您的帮助。

【问题讨论】：

你在使用树视图的插件吗
不，实际上它是一个无 JavaScript 树视图。它是纯 CSS。
所以你实际上是在渲染完整的层次结构？当您单击一个节点时，这实际上是重定向到另一个页面还是返回带有其他子节点呈现的视图？
完整的层次结构是在主视图中静态定义的。当我单击一个节点时，使用不同的参数调用同一控制器上的相同操作方法。所以实际上所有节点都调用了相同的操作方法来呈现子视图。问题的原因是因为每次渲染子视图时也会渲染主视图，从而重新加载树视图。
我前段时间玩过类似的东西。在我的情况下，我包含了额外的视图模型属性来指示应该扩展的级别，然后在循环中呈现视图时，如果项目 ID 与级别 ID 匹配，则在其子 div 元素上设置一个使其可见的类。它在有限的情况下工作，但最后我放弃了它并编写了自己的插件，使用 ajax 按需填充子节点（更简单、更灵活且性能更好）

标签： ajax asp.net-mvc treeview

【解决方案1】：

我终于找到了一种非常优雅且不止于此的内置方法。是的，它确实需要 AJAX （否则怎么做？）感谢 Darin Dimitrov 的 his excellent answer 我现在能够做我需要的事情。

正如我所说，我有一个父视图，其中我有带有链接节点的树视图。每次单击节点时，都必须重新加载子视图。但这也会导致父视图重新加载，从而导致树视图崩溃。我做的第一件事是创建一个强类型为子视图的局部视图，并将所有 html 内容从子视图移动到新创建的局部视图。然后我用 Razor 替换了纯 html 来创建锚元素。以前的树节点是这样的：

<input type="checkbox" id="item-0" /><label for="item-0"><a href="/cabinet/inbox">Documents</a></label>

现在是这样的：

<input type="checkbox" id="item-0" /><label for="item-0">@Ajax.ActionLink("Documents(AJAX)","Inbox","Cabinet",new AjaxOptions{UpdateTargetId="partialViewContainer"})</label>

如您所见，AJAX 辅助方法创建了相同的链接，但这次还将请求设置为异步。它的美妙之处在于我不必为了让 AJAX 工作而搞乱其他任何事情，一切都在幕后完成。我只需要确保包含jquery.unobtrusive-ajax.js 并在web.config 中启用unobstrusivejavascript，这是默认行为。当然，我需要在视图中的某处有一个名为partialViewContainer 的容器来保存局部视图。（注意AjaxOptions{UpdateTargetId="partialViewContainer"})）

最后，我需要更改操作方法以返回部分视图而不是正常视图。以下是我需要更改的唯一行：

  public ActionResult Inbox(string docType){       
     ...........
     return PartialView("MyPartialView",myModel);
  }

【讨论】：