Question

我正在用它下面的Telerik Extensions Tabstrip替换这个'hand-rolled'标签条，但我无法理解如何让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));
    })

Answer 1

您可以使用LinkHtmlAttributes属性设置其他html属性：

item.LinkHtmlAttributes = new Dictionary<string, object>
{
    { "target", "selected-worksheet" }
};

实际上我从来没有使用过Telerik，所以我不太确定你是否必须实例化一个新词典或者只是添加一个键（如果属性被自动实例化）：

item.LinkHtmlAttributes["target"] = "selected-worksheet";

Answer 2

我认为我遇到了与Telerik TreeView类似的问题，并通过绕道而行解决了问题。

我的问题是，它无法将任何（链接）HtmlAttributes传递给View中的TreeViewItems。我尝试将几个HtmlAttributes添加到Controller中的TreeViewItem :(例如，我想要添加到＆lt; a＆gt; 元素的一个属性）：

 newNodes[i].HtmlAttributes.Add("data-ajax-update","#main");

，但在返回作为Ajax-Request的 JsonResult 后，除了 .Text，.Value，.Enabled，.LoadOnDemand，.Url

我找到了一个合理的答案，这些元素没有在Telerik论坛中被序列化： http://www.telerik.com/community/forums/aspnet-mvc/treeview/target-blank-on-treeviewitem-url.aspx#1548458

然后我解决了它，添加了一个特殊的

<span class="treeViewItemAddAjaxLocation"></span>

元素到TreeViewItem的 .Text 。然后通过View中的jQuery定位这些元素，并将所需的html属性添加到＆lt; a＆gt; 元素。

通过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-element中的Ajax加载通过“NavigateToRevisionDetails”Action调用的PartialView，页面的其余部分不会刷新！

将“target”属性添加到Telerik MVC扩展中的tabstrip项的URL

2 个答案: