0

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

我怎样才能做到这一点？

4

2 回答 2

0

我已经找到了解决方案。在 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-27T09:45:27.760 回答
0

实际上，我使用最近 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-27T16:18:39.710 回答