[英]Adding a 'target' attribute to the URL of a tabstrip item in Telerik MVC extensions
我用下面的Telerik Extensions Tabstrip替換了這個“手動滾動”的Tabstrip,但是我無法理解如何讓Tabstrip在每個項目的URL中包括target
屬性。 我該如何實現?
之前:
<ol>
@foreach (var sheet in Model.Sheets)
{
<li>
<a href="@(Url.Content(Server.MapUrl(sheet.FilePath)) + "?guid=" + Guid.NewGuid())" target="selected-worksheet">@sheet.Name</a></li>
}
</ol>
后:
@Html.Telerik().TabStrip().Name("Card").BindTo(Model.Sheets, (item, tabInfo) =>
{
item.Text = tabInfo.Name;
item.Url = Url.Content(Server.MapUrl(tabInfo.FilePath));
})
您可以使用LinkHtmlAttributes
屬性設置其他html屬性:
item.LinkHtmlAttributes = new Dictionary<string, object>
{
{ "target", "selected-worksheet" }
};
實際上,我從未使用過Telerik,所以我不確定是否需要實例化新字典或僅添加鍵(以防屬性被自動實例化):
item.LinkHtmlAttributes["target"] = "selected-worksheet";
我認為Telerik TreeView也有類似的問題,並通過繞行jQuery來解決。
我的問題是,將任何(Link)HtmlAttributes傳遞給View中的TreeViewItems無效。 element): 我試圖幾個HtmlAttributes在控制器添加到樹型視圖:(例如,一個屬性我想添加到元素):
newNodes[i].HtmlAttributes.Add("data-ajax-update","#main");
as of the Ajax-Request, all except were then empty in the View. ,但作為Ajax-Request的 后,除之外的所有都為空。
我找到了一個明智的答案,即這些元素未在Telerik論壇中序列化: http : //www.telerik.com/community/forums/aspnet-mvc/treeview/target-blank-on-treeviewitem-url.aspx#1548458
然后,我通過添加特殊
<span class="treeViewItemAddAjaxLocation"></span>
of the TreeViewItem. TreeViewItem的的元素。 element. 在視圖定位這些元件然后通過jQuery並加入所需的HTML的屬性到元素。
通過Ajax對第二和第三階段元素的Telerik TreeView綁定方法:
.DataBinding(databinding => databinding.Ajax().Select("_AjaxLoading", "Menu"))
動作“ _AjaxLoading”中的控制器代碼段:
IList<TreeViewItem> newNodes = new List<TreeViewItem>();
foreach (RevisionEntity revision in revisions)
{
newNodes.Add(new TreeViewItem()
{
Text = "Node Name" + "<span class='treeViewItemAddAjaxLocation'></span>", // name + locator element
Value = revision.ID.ToString() + ";RevisionEntity",
Encoded = false,
Enabled = true,
LoadOnDemand = false,
Url("/Menu/NavigateToRevisionDetails"), // creates an < a > element
});
}
return new JsonResult { Data = newNodes };
視圖:
<div class="t-bot">
<a class="t-link t-in" href="/Menu/NavigateToRevisionDetails" data-ajax-update="#main" data-ajax-mode="replace" data-ajax-method="GET" data-ajax="true">Node Name
<span class="treeViewItemAddAjaxLocation"></span>
</a>
<input class="t-input" type="hidden" value="774336a5-c6eb-42cc-905a-4d215c957fa2;RevisionEntity" name="itemValue">
</div>
function TreeView_onLoad(e) {
var treeView = $(this).data("tTreeView");
$(".treeViewItemAddAjaxLocation", treeView.element)
.each(function () {
var $this = $(this); // put it in jQuery constr
item = $this.closest(".t-link"); // take the a
item.attr('data-ajax-update', '#main');
item.attr('data-ajax-mode', 'replace');
item.attr('data-ajax-method', 'GET');
item.attr('data-ajax', 'true');
$this.remove(); // removes the span element
});
}
結果TreeView元素:
<div class="t-bot">
<a class="t-link t-in" href="/Menu/NavigateToRevisionDetails" data-ajax-update="#main" data-ajax-mode="replace" data-ajax-method="GET" data-ajax="true">Node Name</a>
<input class="t-input" type="hidden" value="774336a5-c6eb-42cc-905a-4d215c957fa2;RevisionEntity" name="itemValue">
</div>
在#main html元素中加載通過Ajax通過“ NavigateToRevisionDetails”操作調用的PartialView,而頁面的其余部分不會刷新!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.