将Kendo Grid绑定到远程数据MVC 4

时间:2014-10-16 13:32:08

标签: c# .net asp.net-mvc kendo-ui kendo-grid

当我将Kendo Grid绑定到远程数据时,我只返回带有数据的纯文本,但我想返回带有填充网格的View。如何使用Kendo Grid中的数据返回View?

控制器:

 public ActionResult Index([Bind(Prefix = "Id")] int categoryId,[DataSourceRequest]DataSourceRequest request)
    {
        var category = _db.Categories.Find(categoryId);

        var model =
             db.Query<Entry>()
                .OrderBy(en => en.Id)
                .Where(en => en.CategoryId == categoryId)
                .Select(en => new EntryViewModel
                {
                    Id = en.Id,
                    CategoryId = en.CategoryId,
                    Title = en.Title,
                    Username = en.Username,
                    Password = en.Password,
                    Url = en.Url,
                    Description = en.Description,
                }).AsEnumerable();

        return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

查看:

@model IEnumerable<PasswordCloudApp.ViewModels.EntryViewModel>


@(Html.Kendo().Grid<PasswordCloudApp.ViewModels.EntryViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.Title);
    columns.Bound(p => p.Username).Width(100);
    columns.Bound(p => p.Password);
    columns.Bound(p => p.Url);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
                    .Read(read => read.Action("Index", "Entry"))
 )
)

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

尝试这样的事情。它并不完全是您所需要的,但主要的是分离索引操作和用于检索网格数据的操作。

public ActionResult Index()
{
    // Retrieve the viewmodel for the view here, depending on your data structure.
    return View(new EntryViewModel);
}

public ActionResult GetData(int categoryId, [DataSourceRequest]DataSourceRequest request)
{
    var category = _db.Categories.Find(categoryId);
    var model = db.Query<Entry>()
        .OrderBy(en => en.Id)
        .Where(en => en.CategoryId == categoryId)
        .Select(en => new GridViewModel
        {
            Id = en.Id,
            CategoryId = en.CategoryId,
            Title = en.Title,
            Username = en.Username,
            Password = en.Password,
            Url = en.Url,
            Description = en.Description,
        }).AsEnumerable();

    return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

@model IEnumerable<PasswordCloudApp.ViewModels.EntryViewModel>
@(Html.Kendo().Grid<PasswordCloudApp.ViewModels.GridViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Title);
        columns.Bound(p => p.Username).Width(100);
        columns.Bound(p => p.Password);
        columns.Bound(p => p.Url);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("GetData", "Entry", new { categoryId = Model.CategoryID })))
)