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愁楚

回答

相關問題