如何制作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 } }); }); }); 

此代碼未經過測試，但可以幫助您入門。