Telerik MVC - 视图未从 Json 中获取数据

Question

我开始使用 Telerik 并遇到了这个问题。网格被解析到预期的位置：localhost:.../Dashboard/Dashboard 没有抛出任何异常，但是它是空的。 Json 从我的 ViewModel 中正确获取数据并在 localhost:.../Dashboard/ChartTable 中正确返回。出于某种原因，视图不会读取此 Json。我该怎么做？

编辑

我颠倒地挖掘了 Telerik 的错误，下面的建议让我更加确信 View in Controller 中的代码是可以的。问题是在其中一个 ViewModel 字段（此处示例代码中未提及）中，我的 Json 返回了 NaN - 这在 Json 中无效。所以我不应该说 Json 正确地选择了日期。得到这个错误是一个很好的学习。

查看

@model IEnumerable<PriceBench.ViewModels.CompsSnapshotVM>

<div id="div1">

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Width(200).Title("Name");
        columns.Bound(p => p.MatchCount).Width(300).Title("Count");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(read => read.Action("ChartTable", "Dashboard"))
        )
)
</div>

控制器：

public ActionResult ChartTable([DataSourceRequest]DataSourceRequest request)
{
    DataSourceResult result = _dashRepo.GetCompsSnapshotVM().ToDataSourceResult(request);

    return Json(result);
}

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

Answer 1

看起来你正在将你的网格绑定到视图的模型并试图同时使用 AJAX.. 只需将你的网格更改为此。

@(Html.Kendo().Grid<PriceBench.ViewModels.CompsSnapshotVM>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Width(200).Title("Name");
        columns.Bound(p => p.MatchCount).Width(300).Title("Count");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(read => read.Action("ChartTable", "Dashboard"))
        )
)

这只是告诉网格模型类型是什么。或在第一次调用视图时传入要绑定网格的数据。

您可能还想从数据源设置中删除 .ServerOperation(false) 部分

编辑。

尝试将 JsonRequestBehavior.AllowGet 添加到您的 return。

public ActionResult ChartTable([DataSourceRequest]DataSourceRequest request)
{
    var result = _dashRepo.GetCompsSnapshotVM().ToDataSourceResult(request);

    return Json(result, JsonRequestBehavior.AllowGet);
}

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

Answer 2

在 ASP.NET MVC 中使用 kendo 网格时，我们有几个选项。

AutoBind()：如果设置为 false，小部件将不会在初始化期间绑定到数据源。在这种情况下，数据绑定将在触发数据源的更改事件时发生。默认情况下，小部件将绑定到配置中指定的数据源。
GetType(HttpVerbs.Get):如果要在HTTP GET上获取数据。
ServerOperation(bool) : 启用或禁用服务器操作。
寻呼机：实现寻呼机
页面大小：如果实现了寻呼机，则使用页面大小进行分页。

所以你的网格将是这样的。

@(Html.Kendo().Grid<PriceBench.ViewModels.CompsSnapshotVM>()
    .Name("grid")
    .AutoBind() //if you are using AutoBind
  //If you want to implement Pager
     .Pageable(pager => pager
                    .PageSizes(true)                    
                    .Info(true)
                    .PreviousNext(true)                    
                )
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Width(200).Title("Name");
        columns.Bound(p => p.MatchCount).Width(300).Title("Count");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)      
        .ServerOperation(true)
        .Read(read => read.Action("ChartTable", "Dashboard"))            
        )
)

如果你想使用 HTTP GET 就会像这样。

.Read(read => read.Action("ChartTable", "Dashboard").Type(HttpVerbs.Get))

我不确定您是如何调用绑定此网格的。如果你能告诉我，我可以根据那个给你建议。

参考

告诉我它是如何为你工作的。

这个网格对我有用：

@(Html.Kendo().Grid<UserViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Username).Width(150).Title("User Name");
        columns.Bound(p => p.Role).Width(100).ClientTemplate("#=Role.RoleName#").Filterable(false).Width(80).Sortable(false);       
    })        
    .Pageable()
    .Sortable()        
    .DataSource(dataSource => dataSource
        .Ajax()               
        .PageSize(10)
        .Model(model =>
        {
            model.Id(p => p.ID);            
            model.Field(p => p.Role).DefaultValue(ViewData["defaultCategory"] as UserRole);
        }
        )


                .Read(read => read.Action("GetAllUser", "Administration"))

    )
)

Answer 3

根据编辑，问题是 Json 在其中一个 ViewModel 字段中有一个 NaN。 Json 中不允许使用 NaN，它会阻止 Telerik 正确显示视图。

Telerik MVC - 视图未从 Json 中获取数据

Telerik MVC - View not picking up the data from Json

c#

asp.net-mvc

json

telerik