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

Question

I am using Telerik tree view control:

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

What I want to do is set up this control on the left, then a "panel" on the right, that is a view that updates when the treeview is clicked.

So I want to do AJAX call to retrieve info from DB when a click is made in the tree view. Then I can update the "panel" with information on the current item.

How could I go about building this "panel" ? And any controls that are designed for ASP.NET MVC2 are better as that is what I am implementing this in. I saw something called UFRAME but it reminded me of IFRAME and thought I should probably avoid it.

Can I do this with a partial view, and then just the partial view area of the page updates ?

Thanks.

Answer 1

Telerik TreeView has:

1. OnSelect client side event that
2. you want to subscribe to and
3. issue an Ajax call when select happens
4. to your Asp.net MVC application controller action that
5. would return a PartialView which
6. you can then append to right panel

That's the process to be developed.

I've never used Telerik's controls in my life but based on the documentation on their page it seems that it works this way. Everything is basically the usual Asp.net MVC + jQuery except for the OnSelect client side event that you have to use. So nothing particularly complicated as long as Telerik's controls work as expected (which can be a story of its own).

Some code

Since I've never used Telerik, I still think this can be done something along the line:

1. You have your TreeView defined in one of your views like:

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

2. Then use jQuery to do the rest:

    $(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 } }); }); }); 

This code isn't tested but will get you started.