MVC 的 Kendo UI：在 PanelBar 中渲染网格答案

【问题标题】：Kendo UI for MVC: Rendering a Grid in a PanelBarMVC 的 Kendo UI：在 PanelBar 中渲染网格
【发布时间】：2013-04-18 20:39:23
【问题描述】：

MVC 4. 当我在 Kendo UI PanelBar 中放置 Grid 时，它无法按预期工作。视图最终没有将Grid 放入Content() 中，而是将其自身一遍又一遍地放入面板中recursively 永远。

@(Html.Kendo().PanelBar()
  .Name("IntroPanelBar")
  .Items(items =>
      {
          items.Add()
               .Text("papering Reports")
               .Selected(true)
               .Expanded(true)
               .Content(() => Html.RenderAction("Grid"));

要查看它是否是我的代码，我将 Grid 放在 PanelBar 之外，并且在 PanelBar 之外的网格上一切都很好：

@{
   Html.RenderAction("Grid");
}

@(Html.Kendo().PanelBar()
  .Name("IntroPanelBar")
  .Items(items =>
      {
          items.Add()
               .Text("papering Reports")
               .Selected(true)
               .Expanded(true)
               .Content("PLAIN TEXT");

【问题讨论】：

您的“网格”动作是否需要在控制器上成为它自己的动作？您是在其他地方使用它还是仅在此面板中使用它？如果仅在此面板中使用，您可以考虑将网格视图代码直接放入此视图。我现在的猜测是，当您在 Panel 的内容中包含网格时，您需要在网格上调用 .ToClientTemplate() ，而您的视图没有这样做。
网格在其他地方使用，所以在这种情况下是局部视图。我找到了解决方案。我应该使用'.Content(Html.Action("Grid").ToHtmlString());'而不是 '.Content(() => Html.RenderAction("Grid")); '

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

【解决方案1】：

我知道这是一个较老的问题，但是当我搜索类似的问题时它弹出了。它可以通过使用Razor helper function 来解决。我的示例显示了一个具有包含网格的选项卡条的面板。

    <div id="panel">
    @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Single)
        .Items(panelbar =>
            {
                foreach (var a in Model)  {

                    panelbar.Add().Text(a.dom.fileName)
                        .Content(@<div id="tabs">
                            @RenderTabStrip(a)

                        </div>
                );

                }
            })
    )

    @helper RenderTabStrip(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().TabStrip()
        .Name("tabs" +a.dom.recordID)
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Status")
                .Content(@<div>@RenderStatusGrid(a)</div>);

            tabstrip.Add()
                .Text("Errors")
                .Content(@<div>@RenderErrorGrid(a)</div>);
        })
    );
}

     @helper RenderStatusGrid(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().Grid(a.drs)
    .Name("Status")
    .Columns(columns=>
                    {
                        columns.Bound(c => c.currentStatus);
                        columns.Bound(c => c.updateTime);
                    })
                    .Scrollable()
      )
}
    @helper RenderErrorGrid(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().Grid(a.dre)
    .Name("Errors")
    .Columns(columns =>
    {
        columns.Bound(c => c.errorType);
        columns.Bound(c => c.errorDetail);
        columns.Bound(c => c.updateTime);
    })
    .Scrollable()
)
}

【讨论】：

【解决方案2】：

我尝试了下面的代码，它成功了。将您的网格代码包含在 PanelBar 的 Content 部分中的 <div> 标记中。

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar => 
    { 
             panelbar.Add().Text("Devices")
            .Expanded(true)
            .Content(@<div>@(Html.Kendo().Grid(Model)
            ...grid code here
             </div>
            );
            })
            )

【讨论】：

【解决方案3】：

解决方案是改用 Action 的 MVCHtmlString 输出：

@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
      {
          tabstrip.Add().Text("papering")
                  .Selected(true)
                  .Content(Html.Action("Grid").ToHtmlString());   <---

【讨论】：