[英]Post Kendo Grid data to Controller in MVC
我有兩節課。 一個包含另一類的列表:
public string Name { get; set; }
public string Surname { get; set; }
public int Age { get; set; }
public List<Models.Occupation> Occupations { get; set; }
第二類如下
public string Name { get; set; }
public string Industry { get; set; }
我的控制器渲染視圖
Person p = new Person()
{
Name = "megan",
Surname = "du Preez",
Id = 0,
Age = 22
};
return View(p);
在視圖中
@model Models.Person
<form id="person">
<div>
@Html.TextBoxFor(mp => mp.Name)
@Html.TextBoxFor(mp => mp.Surname)
@(Html.Kendo().Grid<Models.Occupation>()
.Name("Occupations")
.Columns(columns =>
{
columns.Bound(e => e.Name);
columns.Bound(e => e.Industry);
})
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Occupations_Read", "People", new { Name = Model.Name}))
)
</div>
@Html.Kendo().Button().Name("btnTest").Content("Create")
內容如下:
List<Models.Occupation> oc = new List<Models.Occupation>();
oc.Add(new Models.Occupation() { CategoryName = "Lecturer" });
oc.Add(new Models.Occupation() { CategoryName = "Student" });
oc.Add(new Models.Occupation() { CategoryName = "Janitor" });
return Json(oc.ToDataSourceResult(request));
所有這些都呈現了我的視圖,並且一切正常,但是在表單發布后,我想將所有內容發送回操作
[HttpPost]
public JsonResult PersonPost(Models.Person p)
{
//do stuff
}
我可以使用以下JavaScript輕松發布此人的姓名和姓氏
$("#btnTest").click(function (e) {
e.preventDefault();
$.ajax({
url: "/Tasks/PersonPost",
type: 'POST',
data: $('#person').serialize(),
dataType: 'json',
success: function (data) {
}
});
});
但是網格中的職業不會被序列化並發布回控制器操作。
我的問題是如何從視圖到控制器發布帶有職業清單的整個模型。
嘗試這個..
@(Html.Kendo().Grid<Models.Occupation>()
.Name("Occupations")
.Columns(columns =>
{
columns.Bound(e => e.Name).ClientTemplate("#= Name # <input type='hidden' name='Occupation[#=index(data)#].Name' value='#= Name #' />");
columns.Bound(e => e.Industry).ClientTemplate("#= Industry # <input type='hidden' name='Occupation[#= index(data)#].Industry' value='#= Industry#' />");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Occupations_Read", "People", new { Name = Model.Name}))
)
[HttpPost]
public JsonResult PersonPost(Models.Person p)
{
//do stuff
}
您應該能夠在Person中獲得價值。 請添加以下功能。.***************************** Javascript ************* **************
//Index function for the WorkOrder Create view
function index(dataItem) {
var data = $("#GridName").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}
您可以在事件中使用此腳本:
function SaveUserProjectDetails() {
var postUrl;
var paramValue;
var gridData = $("#CustomerInfoKendoGrid").data("kendoGrid").dataSource.data();
postUrl = '@Url.Content("~/Billing/CustomerAccountManage/GetDepartmentWiseCategoryList")';
paramValue = JSON.stringify({ CustomerInformationList: gridData });
$.ajax({
url: postUrl,
type: 'POST',
dataType: 'json',
data: paramValue,
contentType: 'application/json; charset=utf-8',
success: function (result) {
console.log(result);
},
error: function (objAjaxRequest, strError) {
var respText = objAjaxRequest.responseText;
console.log(respText);
}
});
}
CustomerInformationList是您的網格源列表。 有關更多詳細信息, 請參見此
網格數據不在表單元素中。 表單元素僅在編輯單元格時出現,然后將其刪除。 您不能使用表單提交按鈕將數據發布到服務器。
正確的方法是添加網格自身提供的“保存”命令按鈕:
@(Html.Kendo().Grid<Invoice.Models.ViewModels.SegmentViewModel>()
.Name("Segment")
.ToolBar(toolbar => {
toolbar.Save(); // add save button to grid toolbar
})
// ... rest of options ...
或通過調用Grid小部件上的saveChanges():
保存細分
$("#save").on("click", function () {
$("#Segment").data("kendoGrid").saveChanges();
});
像這樣的解決方案呢?
$( document ).ready(
$("form").each(function(i, form){
$(this).find(".k-grid").each(function(_i, div){
$(form).submit(div, kendoGridSubmitData);
});
});
);
function kendoGridSubmitData(e) {
var lModel = e.data.id;
var lKendoGrid = $(e.data).data("kendoGrid");
// Iterate over all rows
lKendoGrid.dataItems().forEach(function(_row, _rowIndex){
// Iterate over all fields
_row.forEach(function(_value, _name){
// Add the input hidden
$('<input>').attr({
type: 'hidden',
id: lModel,
name: lModel+'['+_rowIndex+'].'+_name,
value: _value
}).appendTo('form');
});
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.