Telerik MVC - 查看未从 Json 获取数据

Question

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

编辑

我将 Telerik 颠倒过来寻找错误，下面的建议只是强化了我，Controller 中的 View 中的代码是可以的。问题是在其中一个 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。

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 中使用剑道网格时，我们有几个选项。

1. AutoBind()：如果设置为 false，则小部件在初始化期间不会绑定到数据源。在这种情况下，数据绑定将在触发数据源的更改事件时发生。默认情况下，小部件将绑定到配置中指定的数据源。

2. GetType(HttpVerbs.Get)：如果要在 HTTP GET 上获取数据。

3. ServerOperation(bool) : 启用或禁用服务器操作。
4. 寻呼机：实现寻呼机
5. 页面大小：如果实现了分页器，则使用页面大小进行分页。

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

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

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

参考

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid?
• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration
• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/server-binding

让我知道它是如何为你工作的。

这个网格对我有用：

@(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 正确显示视图。