来自telerik mvc treeviewitem的Ajax

Question

我正在尝试使用telerik MVC TreeView。我在树视图中有三个级别。单击第三级树视图项时，我需要加载一个不刷新页面的视图。我试着使用item.Url。但是整个页面都会刷新，treeview也会消失。我在“菜单”局部视图中有一个树形视图，它被_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 });

                }));


    })
  ) 

提前感谢！

Answer 1

为此，我建议使用jQuery。您将执行以下操作：

1)有你想要加载的任何位置，放在带有一些id的标签内(例如，'myDiv')

2)编写一个jQuery函数，该函数在单击第三级项(例如apiMethodID)时运行一个函数，该函数将调用您正在寻找的控制器操作，并将其发布到myDiv。您可能想要尝试如下所示：

$(document).ready(function()){
  $('#apiMethodID').click(function(){
      var value = $('#apiMethodID').val();
      var url = "/ApiMethod/ApiMethodById";
      $.get(url, { apiMethodId: value }, function(data){
         $('#myDiv').html(data);
      });
   })
}

这里的$.get实际上会调用你的控制器方法。您应该能够调试这一事实，以确保其正常工作。

3)确保您要执行的控制器操作返回一个PartialView，否则将在该div中重新呈现整个页面。

如果有效的话，请告诉我。