如何制作ajax更新面板？ (MVC2)

Question

我正在使用 Telerik 树视图控件：

• http://demos.telerik.com/aspnet-mvc/treeview
• http://demos.telerik.com/aspnet-mvc/treeview/clientsideevents

我想做的是在左侧设置这个控件，然后在右侧设置一个“面板”，这是一个在单击树视图时更新的视图。

所以我想在树视图中单击时进行 AJAX 调用以从数据库中检索信息。然后我可以用当前项目的信息更新“面板”。

我该如何构建这个“面板”？并且为 ASP.NET MVC2 设计的任何控件都更好，因为这就是我正在实现的。我看到了一个叫做 UFRAME 的东西，但它让我想起了 IFRAME，我认为我应该避免它。

我可以使用局部视图来执行此操作，然后只更新页面的局部视图区域吗？

谢谢。

Answer 1

Telerik TreeView 有：

1. OnSelect 客户端事件
2. 您想订阅和
3. 选择发生时发出 Ajax 调用
4. 到您的 Asp.net MVC 应用程序控制器操作，
5. 会返回一个PartialView
6. 然后您可以附加到右侧面板

这就是要开发的过程。

我从来没有使用过 Telerik 的控件，但根据他们页面上的文档，它似乎是这样工作的。除了您必须使用的 OnSelect 客户端事件之外，一切基本上都是通常的 Asp.net MVC + jQuery。因此，只要 Telerik 的控件按预期工作，就没有什么特别复杂的了（这可以是它自己的故事）。

一些代码

由于我从未使用过 Telerik，我仍然认为这可以做一些事情：

1. 您已在以下视图之一中定义了 TreeView：

   <%= Html.Telerik().TreeView().Name("ClientSideID") %>
   

2. 然后使用 jQuery 完成剩下的工作：

   $(function(){
       $("#ClientSideID").bind("select", function(e){
           e.preventDefault();
           $.ajax({
               url: "SomeURL",
               data: e.item,
               type: "POST",
               success: function(partialView) {
                   partialView = $(partialView);
                   $("RightPanelSelector").append(partialView);
               },
               error: function(xhr, status, err){
                   // handle error
               }
           });
       });
   });
   

此代码未经测试，但可以帮助您入门。