將'target'屬性添加到Telerik MVC擴展中的tabstrip項目的URL

我正在使用Telerik Extensions Tabstrip替換這個'hand-rolled'tabstrip，但我無法理解如何讓Tabstrip在每個項目的URL中包含target屬性。我怎樣才能做到這一點？將'target'屬性添加到Telerik MVC擴展中的tabstrip項目的URL

前：

<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)); 
    })

來源

2011-10-16 ProfK

您可以使用LinkHtmlAttributes屬性設置附加的HTML屬性：

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

其實我從來沒有使用Telerik的，所以我不太確定你是否必須實例化一個新的字典或者簡單地添加一個密鑰（如果是Ë屬性自動實例化）：

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

來源

2011-10-16 08:44:54

'LinkHtmlAttributes'是一個只讀屬性。有一個'Template'屬性，但它沒有爲TabStripItem記錄。 – ProfK

@ProfK，的確，它有一個私有的setter，那麼第二個代碼片斷應該可以工作。 –

Eish，對不起，我忽略了這一點。我結束了與jQuery的作弊，呵呵。 – ProfK

我想我曾與Telerik的樹視圖類似的問題，並通過與jQuery繞道解決它。

我的問題是，它無法將任何（Link）HtmlAttributes傳遞給View中的TreeViewItems。我試過幾個HtmlAttributes在控制器添加到樹型視圖（如一個屬性我想添加到 <一>元素）：

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

，但經過返回爲 JsonResult Ajax-Request，除之外的所有文本，.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。然後通過View中的jQuery定位這些元素，並將所需的html屬性添加到 < a>元素中。

Telerik的樹視圖綁定通過Ajax的第二和第三階段的元件的方法，包括：

.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」操作調用的部分視圖，並且頁面的其餘部分不會刷新！

來源

2012-10-22 21:18:25

將'target'屬性添加到Telerik MVC擴展中的tabstrip項目的URL

回答

相關問題