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 アップデートの 1 つで追加された関数を使用して、実際にこれを解決しました。

 @(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 に答える