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

Posted 2023-05-07

【中文标题】将 Kendo Grid 绑定到远程数据 MVC 4

【英文标题】：Binding Kendo Grid to remote data MVC 4

【发布时间】：2014-12-11 21:39:43

【问题描述】：

当我将 Kendo Grid 绑定到远程数据时，我只返回带有数据的纯文本，但我想返回带有填充网格的视图。如何返回 View 与 Kendo Grid 中的数据？

控制器：

 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"))
 )
)

有什么建议吗？

【问题讨论】：

除非我遗漏了什么，否则您的代码看起来是正确的。听起来可能缺少 Kendo UI 或 JQuery 脚本。您是否使用日期选择器或其他工具确认 Kendo 已成功安装

【参考方案1】：

试试这样的。它不会完全是您所需要的，但重点是将 Index 操作和用于检索网格数据的操作分开。

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 )))
)