MVC Kendo Grid 未显示任何数据答案

【问题标题】：MVC Kendo Grid not showing any dataMVC Kendo Grid 未显示任何数据
【发布时间】：2015-03-22 15:19:42
【问题描述】：

我正在使用 Kendo UI Grid 服务器端包装器，并尝试从我的模型中将一些数据加载到其中。网格正在页面上呈现，但没有填充数据。我没有太多地使用这个网格，所以我认为我只是缺少 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);   
    }

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

谢谢

【问题讨论】：

如果您在浏览器中使用开发者工具，您是否看到数据实际上来自您的服务器？这将帮助您将问题分成两半，并确定它是否真的没有获取数据，或者没有显示数据。
我在控制器上设置了一个断点，它到达了断点。有趣的是 /Dependents/KendoGrid 正在为 POST 生成 404 错误，但这是一个 GET

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

【解决方案1】：

（只是为您扩展上一个答案）

当它在默认状态下读取时，网格实际上会执行一个帖子。运行 fiddler 时会看到这一点。因此，通过使用 Http.GET 对其进行标记，该操作永远不会被调用。除非您已告知读取操作发送 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 动词。如果你愿意，你可以在之后应用它。

【讨论】：

【解决方案2】：

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

您可能应该返回 JSON。

将您的退货声明更改为。

return Json(result);

或

return Json(result, JsonRequestBehavior.AllowGet);

【讨论】：

我已经尝试过了，但是当我返回 Json 时，它不会呈现网格。该页面仅显示 Json 有效负载，没有其他内容。想法？
如果您尝试访问 /Dependents/KendoGrid .. 您当然会得到 json 有效负载 ..
这证明我正在取回数据，但是当我点击返回 View() 的 ActionResult 索引时，网格渲染没有任何内容，并且我在 KendoGrid 上的断点永远不会触发。

【解决方案3】：

你知道吗？ Scartag 和 David Shorthose 都是对的。据我所知，您应该单独返回视图。

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

【讨论】：