MVC Kendo 网格未显示任何数据

Question

我正在使用 Kendo UI 网格 server-side 包装器并尝试从我的模型中将一些数据加载到其中。网格正在页面上呈现，但未填充任何数据。我没有那么多地使用这个网格，所以我想我只是缺少 ClientTemplate 的一些东西。我已经查看了 Kendo 文档，但还没有成功。

这是我的观点：

<div id="dependents">
    <div id="grid">
        @(Html.Kendo().Grid<Enrollment.Models.DependentModel>()
              .Name("grid")
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("KendoGrid", "Dependents"))
                  .ServerOperation(false)
              )
              .Columns(columns =>
              {
                  columns.Bound(d => d.MaskedSSN).ClientTemplate("<#: MaskedSSN #>").Title("SSN");
                  columns.Bound(d => d.FirstName).ClientTemplate("<#: FirstName #>").Title("First Name");
                  columns.Bound(d => d.LastName).ClientTemplate("<#: LastName #>").Title("Last Name");
                  columns.Bound(d => d.DateOfBirth).ClientTemplate("<#: DateOfBirth #>").Title("Date of Birth");
                  columns.Bound(d => d.Gender).ClientTemplate("<#: Gender #>").Title("Gender");
                  columns.Bound(d => d.DependentTypeId).ClientTemplate("<#: DependentTypeId #>").Title("Type");
              })
              .Pageable()
              .Sortable()
              .HtmlAttributes(new {style = "height: 400px;"})
              )
    </div>

这是我的控制器：

[HttpGet]
    public ActionResult KendoGrid([DataSourceRequest]DataSourceRequest request)
    {
        DataSourceResult result = UnitOfWork.Enrollment.Dependents.ToDataSourceResult(request,
            model => new DependentModel
            {
                SSN = model.SSN,
                FirstName = model.FirstName,
                LastName = model.LastName,
                DateOfBirth = model.DateOfBirth,
                Gender = model.Gender,
                DependentTypeId = model.DependentTypeId
            });
        return View(result);   
    }

有人可以让我知道我遗漏了什么或做错了什么吗？如果您需要更多信息，请告诉我。就像我说的，网格在页面上呈现所有正确的列标题，并且应该有一行但没有数据存在。它只是在其中显示“没有要显示的项目”。

谢谢

Answer 1

通过查看代码，我假设控制器正在 return 视图（html + 数据）。

你可能应该 return JSON.

将您的 return 语句更改为。

return Json(result);

或

return Json(result, JsonRequestBehavior.AllowGet);

Answer 2

（只是为您扩展之前的答案）

网格在其默认状态下读取时实际上执行 post。运行 fiddler 时你会看到这个。所以通过用 Http.GET 标记这个动作永远不会被调用。除非您已告知读取操作发送获取请求而不是 post 请求。

尝试将您的控制器更改为：

public JsonResult KendoGrid([DataSourceRequest]DataSourceRequest request)
{
    DataSourceResult result = UnitOfWork.Enrollment.Dependents.ToDataSourceResult(request,
        model => new DependentModel
        {
            SSN = model.SSN,
            FirstName = model.FirstName,
            LastName = model.LastName,
            DateOfBirth = model.DateOfBirth,
            Gender = model.Gender,
            DependentTypeId = model.DependentTypeId
        });


    return Json(result,JsonRequestBehavior.AllowGet);   
}

注意我已经删除了 http 动词。如果需要，您可以在之后申请回来。

Answer 3

你知道吗？ scartag 和 David Shorthose 都是对的。据我所知，你应该 return 单独查看。

public ActionResult Dependents()
{
    return View();
}

然后您尝试为您的网格调用 ajax。

.DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("GetKendoGridData", "Dependents"))
              .ServerOperation(false)
          )

[HttpGet]
public ActionResult GetKendoGridData([DataSourceRequest]DataSourceRequest request)
{
    DataSourceResult result = UnitOfWork.Enrollment.Dependents.ToDataSourceResult(request,
        model => new DependentModel
        {
            SSN = model.SSN,
            FirstName = model.FirstName,
            LastName = model.LastName,
            DateOfBirth = model.DateOfBirth,
            Gender = model.Gender,
            DependentTypeId = model.DependentTypeId
        });
    Json(result,JsonRequestBehavior.AllowGet);   
}

应该可以。或者您可以尝试以下操作。以前从未尝试过，所以我对此不确定；

return View(Json(result, JsonRequestBehavior.AllowGet));

MVC Kendo 网格未显示任何数据

MVC Kendo Grid not showing any data

c#

asp.net-mvc-4

kendo-ui

kendo-grid