Элемент PanelBar с Ajax Action

У меня есть панель панели с некоторыми элементами, и я хочу установить связанное с ними действие, которое будет выполняться Ajax.Элемент PanelBar с Ajax Action

Пример кода:

До сих пор я не это (не Аякса):

@(Html.Kendo().PanelBar() 
     .Name("left-menu-module") 
     .Items(items => 
     { 
       items.Add() 
       .Text("<div class=\"text-item-container\"><span class=\"left-menu-module-level1-text\">" + "item1" + "</span></div>").Encoded(false) 
       .ImageUrl("link to an icon") 
       .ImageHtmlAttributes(new { width = 30 }) 
       .Action("Action1", "Controller"); 
       items.Add() 
        .Text("<div class=\"text-item-container\"><span class=\"left-menu-module-level1-text\">" + "item2" + "</span></div>").Encoded(false) 
        .ImageUrl("link to an icon") 
        .ImageHtmlAttributes(new { width = 30 }) 
        .Action("Action1", "Controller"); 
     }))

Это генерировать что-то вроде:

//... 
<li class="k-item k-state-default" role="menuitem"> 
    <a class="k-link k-header" href="/MyController/Action1"> 
    <img alt="image" class="k-image" src="link to an icon" width="30"><div class="text-item-container"><span class="left-menu-module-level1-text">item1</span></div> 
    </a> 
</li> 
//...

Но я хотел бы иметь что-то вроде:

//... 
<li class="k-item k-state-default" role="menuitem"> 
    <a class="k-link k-header" href="/MyController/Action1" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#target"> 
    <img alt="image" class="k-image" src="link to an icon" width="30"><div class="text-item-container"><span class="left-menu-module-level1-text">item1</span></div> 
    </a> 
</li> 
//...

Таким образом, это похоже на помощник Ajax.ActionLink().

Как я могу это достичь?

источник

2013-07-11 amp

Имеет ли Action («Action1», «Controller») параметр htmlAttributes как метод перегрузки? Если передается data-ajax = "true" и т. Д. В качестве параметра! – Fals

Нет, у него нет ... – amp

Ну, я думаю, что вы должны создать метод расширения htmlHelper для этого специфического для Kendo-ui. Затем вы можете добавить все, что захотите. Учитывая, что вы знаете генерируемый HTML из этого Action Method, вещи могут быть менее болезненными. Или, если вы можете поместить ID для ссылки привязки, вы должны использовать jQuery пользователя или что-то чистое js для изменения элемента. – Fals

Я на самом деле решить это с помощью функции, которая была добавлена в одном из последних обновлений Telerik:

@(Html.Kendo().PanelBar() 
    .Name("left-menu-module") 
    .Items(items => 
    { 
      items.Add() 
      .Text("<div class=\"text-item-container\"><span class=\"left-menu-module-level1-text\">" + "item1" + "</span></div>").Encoded(false) 
      .ImageUrl("link to an icon") 
      .ImageHtmlAttributes(new { width = 30 }) 
      .Action("Action1", "Controller") 
      .LinkHtmlAttributes(/* Anonymous object OR Dictionary with the data- attributes */); 
    }))

Я использую кендо версию 2014.3.1316.440.

источник

2015-04-27 16:18:39 amp

Я нашел решение для этого .. Использование раздела содержимого внутри div.

@(Html.Kendo().PanelBar() 
.Name("panelbar") 
.ExpandMode(PanelBarExpandMode.Single) 
.Items(panelbar => 
{ 
    panelbar.Add().Text("Client Info") 
     .Expanded(true) 
     .Content(
     @<div> 
      @Ajax.ActionLink("Organization Detail", "OrganizationDetail", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnOrgDetails", @class = "list-group-item" }) 
      @Ajax.ActionLink("Benefit Center", "GetBenefitsOverview", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnBenefitCenter", @class = "list-group-item"}) 
      @Ajax.ActionLink("Services", "ServiceFilter", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnServices", @class = "list-group-item" }) 
      @Ajax.ActionLink("Key Dates", "GetKeyDatesOverview", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnKeyDates", @class = "list-group-item" }) 
     </div>); 
});)

источник

2015-04-27 09:45:27

Проверьте мой ответ, чтобы узнать, как я его решил;) – amp

Спасибо за ответ .. –

Элемент PanelBar с Ajax Action

ответ

Смежные вопросы