如何制作ajax更新面板？ （MVC2）

Question

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

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

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

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

我怎么能建立这个“小组”？并且为ASP.NET MVC2设计的任何控件都更好，因为我正在实现它。我看到了一些名为UFRAME但它让我想起了IFRAME并认为我应该避免它。

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

感谢。

Answer 1

Telerik TreeView：

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

这是要开发的过程。

我从来没有在生活中使用过Telerik的控件，但基于他们页面上的文档，它似乎就是这样运作的。一切都基本上是通常的Asp.net MVC + jQuery，除了你必须使用的OnSelect客户端事件。因此，只要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
               }
           });
       });
   });
   

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