Kendo Grid不会通过Ajax绑定

时间:2017-05-16 16:21:07

标签: c# kendo-ui telerik kendo-grid

我遵循使用Kendo Controls for ASPNET-MVC进行Ajax数据绑定的说明。但是,Grid不会绑定返回的数据。我可以在Chrome中看到从AJAX调用返回的数据;问题是它不会受到约束。我也使用.ToDataSourceRequest来格式化返回的数据。

有什么想法吗?

在我的视图中

@(Html.Kendo().DropDownList()
                .Name("MonthFilter")
                .BindTo(Model.MonthDropdownOptions())
                .DataTextField("Text")
                .DataValueField("Value")
                .Events(e => e.Change("onMonthFilterChange"))
                )

      @(Html.Kendo().Grid<PersonStatus>()
            .Name("measuresGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.PersonId).Width(100).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false).SuggestionOperator(FilterType.Contains).Operator("contains"))).HtmlAttributes(new { title = "#=Measure.Name#" });
                columns.Bound(c => 
c.PersonName).ClientHeaderTemplate("Patient Name").Filterable(ftb => 
ftb.Cell(cell => cell.ShowOperators(false).SuggestionOperator(FilterType.Contains).Operator("contains"))).HtmlAttributes(new { patientName = "patientName" });
            })
            .DataSource(ds =>
                ds.Ajax()
                .PageSize(20)
                .ServerOperation(true)
                .Read(read => read.Action("PersonRead", "PersonList").Data("getPersonGridParameterData"))
                .Model(m => m.Id(p=>p.PersonId))
            )
        )

    var getPersonGridParameterData = function (e) {
        console.log("Gettting parameter Data....");
        var monthFilterValue = $("#MonthFilter").val();
        return { "yearMonth": monthFilterValue };
    }

在我的控制器中

public IActionResult Index()
    {
        var viewModel = new PersonViewModel
        {
            People = new List<Person>()
        };

        viewModel.PeopleStatuses = GetPersonStatus();
        return View(viewModel);
    }

    [HttpPost]
    public ActionResult PersonRead([DataSourceRequest]DataSourceRequest request, string yearMonth)
    {
        return Json(GetPersonStatus(yearMonth).ToDataSourceResult(request));
    }        


    private List<PersonStatus> GetPersonStatus(string yearMonth = "")
    {
        var aQuery = new PersonListQuery(yearMonth);
        var aResult = _queryDispatcher.Dispatch<PersonListQuery, PersonListQueryResult>(aQuery);

        return aResult.PeopleStatuses;
    }

2 个答案:

答案 0 :(得分:1)

请看一下这篇博文:https://coderulez.wordpress.com/2017/05/12/asp-net-core-and-kendo-grid/

在ASP MVC中你所做的就足够了。但是在ASP.NET Core中,您需要为kendo网格采取额外的步骤才能读取数据(请参阅下面的Startup.cs代码)。

这是因为ASP.NET Core包含了Newtonsoft的JSON Serializer,并且由于某种原因决定设置默认行为以将我们的属性的大小更改为camelCase(使用CamelCasePropertyNamesContractResolver)。为了强制它使用我们在视图模型中定义的相同属性名称,我们需要使用以下行添加到Startup.cs: Startup.cs Config

有关制作camelCase的决定归咎于谁的更多信息:P看看:

https://github.com/aspnet/Mvc/issues/4283

https://github.com/aspnet/Mvc/issues/4842

答案 1 :(得分:1)

ASP.NET Core中的JSON序列化默认使用小写键,因此Grid数据将使用键"data""total"提供。另一方面,Kendo UI MVC Grid由于历史原因以及与ASP.NET MVC("Data""Total")的兼容性而需要大写键。要恢复大写键,请按照

中的方法操作

http://www.telerik.com/forums/json-serialization-breaks-grid#1N43h6vKUEmdhFLmYQd3yg

http://docs.telerik.com/aspnet-core/getting-started/getting-started (第4点)