带有Ajax操作的PanelBar项

我有一个带有一些项目的panelbar，我想将与它们关联的操作设置为由Ajax执行

示例代码：

到目前为止，我有这个（没有ajax）：

@（Html.Kendo（）.PanelBar（）
.Name（“左菜单模块”）
.项目（项目=>
{
items.Add（）
.Text（“+”项1“+”）.Encoded（false）
.ImageUrl（“链接到图标”）
.ImageHtmlatAttributes（新的{width=30}）
.行动（“行动1”、“控制人”）；
items.Add（）
.Text（“+”项2“+”）.Encoded（false）
.ImageUrl（“链接到图标”）
.ImageHtmlatAttributes（新的{width=30}）
.行动（“行动1”、“控制人”）；
}))

这会产生如下结果：

//...
<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>
//...

/。。。


//...

但我想要的是：

//...
<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（）助手

---

我怎样才能做到这一点呢？

我已经找到了解决办法。。 使用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>);
}); )

@（Html.Kendo（）.PanelBar（）
.名称（“panelbar”）
.ExpandMode（PanelBarExpandMode.Single）
.项目（面板栏=>
{
panelbar.Add（）.Text（“客户端信息”）
.扩展（真）
.内容(
@
@ActionLink（“组织详细信息”、“组织详细信息”、“设置系统”，null，新的AjaxOptions{UpdateTargetId=“divBody”，LoadingElementId=“divLoading”}，新的{id=“btnOrgDetails”，@class=“列表组项”}）
@ActionLink（“福利中心”、“GetBenefitsOverview”、“SetupSystem”，null，新的AjaxOptions{UpdateTargetId=“divBody”，LoadingElementId=“divLoading”}，新的{id=“btnBenefitCenter”，@class=“列表组项”}）
@ActionLink（“服务”、“ServiceFilter”、“SetupSystem”、null、新AjaxOptions{UpdateTargetId=“divBody”、LoadingElementId=“divLoading”}、新{id=“btnServices”、@class=“列表组项”}）
@ActionLink（“关键日期”、“GetKeyDatesOverview”、“SetupSystem”、null、新AjaxOptions{UpdateTargetId=“divBody”、LoadingElementId=“divLoading”}、新{id=“btnKeyDates”、@class=“列表组项”}）
);
}); )

我实际解决了这个问题，使用了最近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 */);
  }))

@（Html.Kendo（）.PanelBar（）
.Name（“左菜单模块”）
.项目（项目=>
{
items.Add（）
.Text（“+”项1“+”）.Encoded（false）
.ImageUrl（“链接到图标”）
.ImageHtmlatAttributes（新的{width=30}）
.行动（“行动1”，“控制者”）
.LinkHtmlAttributes（/*匿名对象或带有数据属性的字典*/）；
}))

---

我正在使用剑道版本2014.3.1316.440。

操作（“操作1”、“控制器”）是否将htmlAttributes参数作为方法重载？如果将数据ajax=“true”等作为参数传递！我认为应该为这个剑道ui创建一个扩展方法htmlHelper。然后你可以添加任何你想要的东西。假设您知道这个动作方法生成的HTML，那么事情就不会那么痛苦了。或者，如果您可以为锚链接添加ID，您应该使用jquery或纯js来更改元素。@Fals我可以尝试使用一些htmlHelper方法。你有一些例子或链接开始吗？