Teleriks TreeView-Steuerelement, obwohl schick und mit einer Menge Funktionalität, erweist sich jetzt als ein Albtraum für mich. Ich konnte jedoch kein besseres TreeView-Steuerelement finden, das das Zusammenfalten/Erweitern usw. unterstützt und ein wenig Dokumentation besitzt. Hier ist mein Problem.Telerik TreeView für ASP.NET MVC ajax woes
Dies ist der Standort Master: _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>
Dies ist die Ansicht Basis Seite lautet: 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>
, wenn der Benutzer auf der Seite der #AdminNavTree holt einen Knoten wählt die Inhalt wird angezeigt und füllt #adminContent. Ich versuche, eine Bearbeitungsseite zu erstellen, wo ein Kategoriebaum in einem Div aufgelistet ist und wenn der Benutzer auf eine Kategorie in diesem Div klickt, werden die Details in einen anderen Div auf derselben Seite geladen. Hier ist die Teilansicht mit dem Kategoriebaum, der in #adminContent geladen wird: _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>
die Detail-Seite, die Ajax geladen wird enthält keine Telerik steuert, um Code-Auflistung für das kein Thema ist.
Das PROBLEM: Dies wird nicht gerendert. Sobald es versucht, #ctree treeview zu rendern, fängt es an, alle Arten von Skriptfehlern zu werfen, insbesondere ignoriert es loadCategories (sagt nicht gefunden). Bisher denke ich, was passiert, ist die Ajax geladene Teilseite, die die Baumansicht enthält, lädt die jquery lib neu und zerstört alle alten Bindungen und Funktionen im Skript. Gibt es eine Möglichkeit, dies zu erreichen, zwei Baumansichten auf einer Seite, eine zuvor geladene, eine in einer Ajax-geladenen Teilansicht, beide an separate Daten gebunden?
Die Dokumentation ist recht gut, und die Google-Gruppe eine Menge Antworten hat. –
Ich habe damit auf der Seite gearbeitet. Verwenden von json_data zum Ziehen von Daten über eine Ajax-Anfrage. Habe die Probleme mit meinem serverseitigen JSON-Code noch nicht ausgebügelt. – codetantra