Question

我有一个包含一些项目的面板栏，我想设置与它们相关联的操作由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（）帮助器。

我怎样才能做到这一点？

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

Answer 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。

带有Ajax Action的PanelBar项

2 个答案: