PanelBar項目與Ajax動作

我有一個項目的面板欄，我想設置與他們關聯的動作，由Ajax執行。PanelBar項目與Ajax動作

示例代碼：

到目前爲止，我有這個（沒有AJAX）：

@(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

嗯，我認爲你應該爲這個Kendo-ui創建一個擴展方法，htmlHelper。然後你可以添加任何你想要的。假設你知道這個Action方法生成的HTML，那麼事情可能不那麼痛苦。或者，如果你可以把錨鏈接的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動作

回答

相關問題