带有 Ajax 操作的 PanelBar 项答案

【问题标题】：PanelBar item with Ajax Action带有 Ajax 操作的 PanelBar 项
【发布时间】：2013-07-11 19:04:51
【问题描述】：

我有一个包含一些项目的面板栏，我想将与它们关联的操作设置为由 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() 助手。

我怎样才能做到这一点？

【问题讨论】：

Action("Action1", "Controller") 是否有 htmlAttributes 参数作为方法重载？如果确实传递 data-ajax="true" 等作为参数！
好吧，我认为您应该为这个 Kendo-ui 特定创建一个扩展方法 htmlHelper。然后你可以添加任何你想要的东西。鉴于您知道从此操作方法生成的 HTML，事情就不会那么痛苦了。或者，如果您可以为锚链接添加 ID，则应该使用 jquery 或纯 js 来更改元素。
@Fals 我可以尝试一些 htmlHelper 方法。您有一些示例或链接吗？

标签： ajax asp.net-mvc-4 kendo-ui

【解决方案1】：

我已经找到了解决方案.. 使用 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>);
}); )

【讨论】：

【解决方案2】：

我实际上使用最近 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。

【讨论】：