Добавление атрибута 'target' к URL-адресу элемента вкладки в расширениях Telerik MVC - PullRequest
Новая
       6

Добавление атрибута 'target' к URL-адресу элемента вкладки в расширениях Telerik MVC

1 голос
/ 16 октября 2011

Я заменяю эту «свернутую вручную» вкладку под вкладкой Telerik Extensions под ней, но я не могу понять, как заставить вкладку включать атрибут target в 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));
    })

Ответы [ 2 ]

1 голос
/ 16 октября 2011

Вы можете использовать свойство LinkHtmlAttributes для установки дополнительных атрибутов html: 

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

На самом деле я никогда не использовал Telerik, поэтому я не совсем уверен, нужно ли создавать новый словарь или просто добавлять ключ (в случае, если свойство создается автоматически): 

item.LinkHtmlAttributes["target"] = "selected-worksheet";
0 голосов
/ 23 октября 2012

Я думаю, что у меня была похожая проблема с Telerik TreeView, и я решил ее через обходной путь с jQuery.

Моя проблема заключалась в том, что он не работал для передачи каких-либо (Link) HtmlAttributes в TreeViewItems.в представлении.Я попытался добавить несколько атрибутов HtmlAttributes к TreeViewItem в контроллере: (например, один атрибут, который я хотел добавить к элементу ): 

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

, но после вернуть как JsonResult Ajax-запроса, все, кроме .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>

к .Text TreeViewItem.Затем найдите эти элементы с помощью jQuery в представлении и добавьте нужные html-атрибуты к элементу .

Telerik TreeView Метод привязки элементов 2-го и 3-го этапа с помощью 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>

НагрузкиPartialView вызывается через действие «NavigateToRevisionDetails» через Ajax в элементе #main html, и остальная часть страницы не обновляется!

...