如何制作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的控件，但是根据其页面上的文档，似乎它可以这种方式工作。 一切都基本上是通常的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 } }); }); }); 

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