Kendo 网格不会通过 Ajax 绑定
Kendo Grid Won't Bind via Ajax
我正在按照使用 ASPNET-MVC 的 Kendo 控件进行 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;
}
看看这个博客post: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 序列化程序,并且出于某种原因决定设置默认行为以将我们的属性的大小写更改为驼峰式(使用 CamelCasePropertyNamesContractResolver)。为了强制它使用我们在视图模型中定义的相同 属性 名称,我们需要将以下行添加到 Startup.cs:
有关谁应该为将驼峰式命名为默认大小写的决定负责的更多信息:P 请查看:
JSON ASP.NET Core 中的序列化默认使用小写键,因此网格数据将使用键 "data"
和 "total"
提供。另一方面,Kendo UI MVC 网格由于历史原因和与 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 点)
我正在按照使用 ASPNET-MVC 的 Kendo 控件进行 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;
}
看看这个博客post: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 序列化程序,并且出于某种原因决定设置默认行为以将我们的属性的大小写更改为驼峰式(使用 CamelCasePropertyNamesContractResolver)。为了强制它使用我们在视图模型中定义的相同 属性 名称,我们需要将以下行添加到 Startup.cs:
有关谁应该为将驼峰式命名为默认大小写的决定负责的更多信息:P 请查看:
JSON ASP.NET Core 中的序列化默认使用小写键,因此网格数据将使用键 "data"
和 "total"
提供。另一方面,Kendo UI MVC 网格由于历史原因和与 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 点)