Ajax from telerik mvc treeviewitem - asp.net-mvc-3

Question

I am trying to work with telerik MVC TreeView. i have three levels in the treeview. On clicking on the 3rd level tree view item, i need to load a view without page refresh.
I tried to use item.Url. But the entire page refreshes and treeview disappears.
I have a treeview in "Menu" partial view and it is called by _layout.cshtml
#(Html.Telerik().TreeView()
.Name("TreeView")
.ShowLines(false)
.BindTo(Model, mappings =>
{
mappings.For<AdminTool.Web.Models.ProjectModel>(binding => binding
.ItemDataBound((item, project) =>
{
item.Text = project.Name;
})
.Children(project => project.ApiModels));
mappings.For<AdminTool.Web.Models.ApiModel>(binding => binding
.ItemDataBound((item, api) =>
{
item.Text = api.Name;
item.Value = api.Id;
})
.Children(api => api.ApiMethods));
mappings.For<AdminTool.Web.Models.ApiMethodModel>(binding => binding
.ItemDataBound((item, apimethod) =>
{
item.Text = apimethod.Name;
item.Url = Url.Action("ApiMethodById", "ApiMethod", new { id= apimethod.Id });
}));
})
)
Thanks in advance!

Answer 1

I would recommend using jQuery for this. What you would do it the following:
1) Have whatever location you want this to load to be placed inside a tag with some id on it (e.g. 'myDiv')
2) Write a jQuery function that on the click of you third level item (e.g. apiMethodID) to run a function that will call the controller action that you're looking for, and to post that to myDiv. You might want to try something like the following:
$(document).ready(function()){
$('#apiMethodID').click(function(){
var value = $('#apiMethodID').val();
var url = "/ApiMethod/ApiMethodById";
$.get(url, { apiMethodId: value }, function(data){
$('#myDiv').html(data);
});
})
}
$.get here will actually call your controller method. You should be able to debug that fact to make sure that it works.
3) Make sure that the controller action that you going to returns a PartialView, otherwise you're going to re-render the whole page inside of that div.
Let me know if that works.