Telerik的TreeView控件的ASP.NET MVC AJAX愁楚

Telerik的TreeView控件，虽然看中，并与很多功能被证明是一场噩梦，我现在。然而，我找不到一个更好的TreeView控件，它支持折叠/展开等，并且有一点文档。这是我的问题。Telerik的TreeView控件的ASP.NET MVC AJAX愁楚

这是网站主：_Layout.cshtml

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <!-- 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/custom.css")" rel="stylesheet" type="text/css" />--> 
    @(Html.Telerik().StyleSheetRegistrar() 
        .DefaultGroup(group => 
         group.Add("telerik.common.css") 
          .Add("~/Content/Site.css") 
          .Add("~/Content/custom.css") 
          .Add("~/Content/themes/humanity/jquery-ui-1.8.18.custom.css") 
        .Combined(true) 
        .Compress(true))) 
</head> 
<body> 
    <div class="page"> 
     <header> 
      <div id="header-logo"> 
        <img alt="X" src="../../Content/Images/logo100.png"/> 
      </div> 
      <div id="title"> 
       <h1>title</h1> 
      </div> 

      @(Html.Telerik().Menu() 
        .Name("menu") 
        .Items(menu => 
        { 
         menu.Add().Text("Home").Action("Index", "Home"); 
         menu.Add().Text("Products") 
          .Items(item => 
             { 
              item.Add().Text("xxx").Action("xxx", "Products"); 
              item.Add().Text("xxx").Action("xxx", "Products"); 
              item.Add().Text("xxx").Action("xxx", "Products"); 
              item.Add().Text("xxx").Action("xxx", "Products"); 
             }); 
         menu.Add().Text("Events").Action("Index", "Events"); 
         menu.Add().Text("About Us").Action("About", "Home"); 
         menu.Add().Text("Admin").Action("Index", "Admin"); 
        }) 
        .HtmlAttributes(new { style = "text-align:left;" })) 
     </header> 
     <section id="main"> 
      @RenderBody() 
     </section> 
     <footer> 
     </footer> 
    </div> 
    @(Html.Telerik().ScriptRegistrar() 
         .Scripts(script=>script.Add("~/Scripts/custom.js")) 
         .Globalization(true) 
         .DefaultGroup(group => group.Combined(true) 
                .Compress(true))) 
</body> 
</html>

这是基本页视图：Index.cshtml

@{ 
    ViewBag.Title = "Admin"; 
} 
<h2> 
    Admin Index</h2> 
<div id="navAdminLeft"> 
    @(Html.Telerik().TreeView() 
    .Name("AdminNavTree") 
    .Items(item => 
       { 
        item.Add().Text("Products"); 
        item.Add().Text("Categories"); 
        item.Add().Text("Materials"); 
        item.Add().Text("Finishes"); 
        item.Add().Text("Packaging"); 
        item.Add().Text("File Manager"); 
        item.Add().Text("CategoryTree"); 
       }) 
     .ClientEvents(events => events.OnSelect("loadAdminContent")) 
      ) 
</div> 
<div id="adminContent"> 
</div> 
<script type="text/javascript"> 
    function loadAdminContent(e) { 
     $.ajax({ 
      type: "GET", 
      cache: false, 
      url: "Admin/" + e.item.innerText, 
      data: {}, 
      success: function (data) { 
       $("#adminContent").html(data); 
      } 
     }); 
    } 
</script>

只要用户选择的上一个#AdminNavTree节点的页面取入要显示的内容并填充#adminContent。我正在尝试构建一个编辑页面，其中有一个div列出了类别树，当用户单击该div上的任何类别时，详细信息都会在同一页面上加载到另一个div中。下面是与被加载到#adminContent类别树的部分观点：_CategoryTree.cshtml

@using xxx.Models.Navigation 
@model IEnumerable<NavigationItem> 

<div id="categoryTree">  
@{Html.Telerik().TreeView() 
    .Name("ctree") 
     .BindTo(Model, mappings => 
      mappings.For<NavigationItem>(binding => binding 
        .ItemDataBound((currentItem, navigationItem) => 
         { 
          currentItem.Text = navigationItem.Text; 
          currentItem.Expanded = true; 
                 }) 
        .Children(child => child.Items) 

       )) 
    .ClientEvents(events=>events.OnSelect("loadContent"))         
    .Render(); 
} 
</div> 
<div id="detail"></div> 
<script type="text/javascript"> 
    function loadCategoryDetail(e) { 
     $.ajax({ 
      type: "POST", 
      url: "Admin/CategoryDetails", 
      data: { id: $("#ctree").data("tTreeView").getItemText(e.item) }, 
      success: function (data) { 
       $("#detail").html(data); 
      } 
     }); 
    } 
</script>

是AJAX加载不含任何Telerik控制使上市代码这是一个非问题的详细信息页面。

问题：这会不会渲染。只要它尝试渲染#ctree treeview它开始抛出所有类型的脚本错误，特别是它忽略loadCategories（说找不到）。到目前为止，我认为发生的事情是包含treeview的ajax加载的部分页面正在重新加载jquery库，销毁脚本中的所有旧绑定和函数。有没有办法使这项工作，一页上的两个treeviews，一个先前加载，一个在ajax加载的部分视图，都绑定到单独的数据？

来源

2012-04-09 codetantra

我已经与jsTree良好的成功......没有你Telerik的问题有所帮助，但可能是值得一试。

http://www.jstree.com/

来源

2012-04-09 20:13:20

的文档是相当不错的，而谷歌集团有很多答案。 – 2012-04-09 20:14:35

我一直在那边工作。使用json_data通过ajax请求提取数据。还没有完全解决我的服务器端json代码的问题。 – codetantra 2012-04-10 00:57:52

Telerik的TreeView控件的ASP.NET MVC AJAX愁楚

回答

相关问题