如何在 Telerik MVC 中创建支持 Ajax 的分页嵌套网格？答案

【问题标题】：How to create Ajax-support Paging Nested Grid in Telerik MVC?如何在 Telerik MVC 中创建支持 Ajax 的分页嵌套网格？
【发布时间】：2012-11-25 10:31:15
【问题描述】：

我尝试在 Telerik MVC 扩展中创建一个支持 Ajax 的分页嵌套网格。我已经在浏览中渲染了嵌套网格，可以展开行流派以显示由 GenreId 过滤的相关专辑，但是当我为这个嵌套网格使用 Ajax 时，它在网格分页中不起作用。我已经上传了我的项目并发布了一些关于我的视图和控制器的代码。

当我不使用ajax时，网格可以正常工作但重新加载浏览时无法正确扩展，如何保持已扩展行的状态？

我很感激任何帮助。

我的项目： http://share.vnn.vn/dl.php/11718146

我的观点：

@{
    ViewBag.Title = "Home Page";
    Layout = @"~\Views\Shared\_Layout.cshtml";
}

@( Html.Telerik().Grid<MvcMusicCodeFirsr.Models.Genre>(@Model)
    .Name("personGrid")
    .DataKeys(keys => keys.Add(k => k.GenreId))
    .DataBinding(d => d.Ajax().Update( "_Update", "Home" )
    )
   // .Editable(editing => editing.Mode(GridEditMode.PopUp))
    .Columns(c =>
    {
        c.Bound(m => m.Name).Width(150);
        c.Bound(m => m.Description).Width(150);
        //c.Bound(m => m.Birthdate);
        c.Command(commands =>
        {
            commands.Edit();
        }).Width(80);
    })
    .DetailView(detailView => 
        detailView.Template(
        @<text>
            @(Html.Telerik().Grid<MvcMusicCodeFirsr.Models.Album>(item.Albums)
                    .Name("Albums_" + item.GenreId)
                    .DataBinding(d => d.Ajax())
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.Title).Width(101);
                        columns.Bound(o => o.Price).Width(140);
                    })
                    .Pageable()
                    .Sortable()
                    .Filterable()
            )

        </text>
        )
        .ClientTemplate(
                    Html.Telerik().Grid<MvcMusicCodeFirsr.Models.Album>()

                                  .Name("Albums_<#=GenreId#>")
                                  .DataBinding(d => d.Ajax())
                                  .Footer(false)
                                  .ClientEvents(events => events.OnDataBinding("detailGrid_dataBinding"))
                                  .ToHtmlString()
        ))

                    .Sortable()
                    .Pageable()


    )


)

<script type="text/javascript">
    function detailGrid_dataBinding(e) {
        var grid = $(this).data("tGrid"),
            masterRow = $(this).closest("tr.t-detail-row").prev(),
            dataItem = $("#Grid").data("tGrid").dataItem(masterRow);

        grid.dataBind(dataItem.Albums);

        e.preventDefault();

    }
</script>

我的控制器：

    MusicStoreEntities db = new MusicStoreEntities();
    public ActionResult Index()
    {
        return View(db.Genres.ToList());
    }

    [GridAction]
    public ActionResult _Select()
    {
        return View(new GridModel ( db.Genres.ToList()));
    }

    [GridAction]
    public ActionResult _Update()
    {
        return View(new GridModel { Data = db.Genres.ToList() });
    }

【问题讨论】：

标签： ajax asp.net-mvc telerik pagination telerik-grid

【解决方案1】：

这是一个显示嵌套网格的 ajax 填充的示例：http://demos.telerik.com/aspnet-mvc/grid/hierarchyajax

【讨论】：