在 Telerik MVC 扩展中将“目标”属性添加到标签条项目的 URL答案

【问题标题】：Adding a 'target' attribute to the URL of a tabstrip item in Telerik MVC extensions在 Telerik MVC 扩展中将“目标”属性添加到标签条项目的 URL
【发布时间】：2011-10-16 08:32:00
【问题描述】：

我正在用下面的 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));
    })

【问题讨论】：

标签： asp.net asp.net-mvc telerik telerik-mvc

【解决方案1】：

您可以使用LinkHtmlAttributes 属性来设置额外的 html 属性：

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

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

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

【讨论】：

LinkHtmlAttributes 是只读属性。有一个 Template 属性，但没有为 TabStripItem 记录它。
@ProfK，确实，它有一个私有设置器，那么第二个代码 sn-p 应该可以工作。
哎呀，对不起，我忽略了这一点。我最后用 jQuery 作弊了，呵呵。

【解决方案2】：

我认为我在 Telerik TreeView 上遇到了类似的问题，并通过 jQuery 绕道解决了它。

我的问题是，将任何 (Link)HtmlAttributes 传递给视图中的 TreeViewItems 都不起作用。我尝试将几个 HtmlAttributes 添加到 Controller 中的 TreeViewItem ：（例如，我想将一个属性添加到元素）：

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

，但是在return作为Ajax-Request的JsonResult之后，除了.Text、.Value、.Enabled、.LoadOnDemand、.Url i> 然后在视图中为空。

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

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

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

元素到 TreeViewItem 的 .Text。然后通过 jQuery 在视图中定位这些元素，并将所需的 html 属性添加到元素。

Telerik TreeView 通过 Ajax 绑定第二阶段和第三阶段元素的方法：

.DataBinding(databinding => databinding.Ajax().Select("_AjaxLoading", "Menu"))

Controller sn-p in Action "_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
    });        
}

结果树视图元素：

<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”操作调用的PartialView，页面的其余部分不会刷新！

【讨论】：