我使用带有自定义编辑器的网格。我将普通输入替换为列内的文本区域。
Usecase:
- 检查textarea的当前值为"test 0"
- 按下网格的编辑按钮
- 添加新值"test 01"
- 按下网格的更新按钮
- 检查在网格行(works)中更新的新值
- 再次按网格的编辑按钮(新值为"test 01")
- 按下网格的取消按钮(这里发生了一些神奇的事情!)不仅与网格,而且与每个自定义编辑元素)
- 检查当前值没有从"测试01"变为"测试0"(失败)。
取消前一个值("test 0"代替"test 01")后,网格显示。这种情况与其他列(不可自定义)的值相同,例如Amount。如果我保存然后按取消键,则显示错误的值,但正确的值将保存在db
中。完全网格重新加载节省了这种情况,但对于ajax网格来说不是最佳的
网格的数据源:
// bind json result from /Bonuses/GetPagedJsonBonuses
var bonusesDataSource = new kendo.data.DataSource({
transport: {
read: "@Url.Action("GetPagedJsonBonuses", "Bonuses")",
update: {
url: "@Url.Action("Edit", "Bonuses")",
type: "PUT"
},
create: {
url: "@Url.Action("Create", "Bonuses")",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation === "update" || operation === "create") {
// updates the BonusDTO.EmployeeId with selected value
if (newValueEmployeeId !== undefined)
options.EmployeeId = newValueEmployeeId;
}
return options;
}
},
schema: {
data: "Data", // PagedResponse.Data
total: "TotalCount", // PagedResponse.TotalCount
model: {
id: "BonusId", // Data
fields: {
EmployeeId: { type: "number" },
EmployeeLastName: {
type: "string",
editable: true,
//validation: { required: {message: "Employee's last name is required"}}
},
Amount: {
type: "number",
editable: true,
nullable: false,
validation: {
required: { message: "Amount is required to be set" }
}
}
} // fields
} // model
}// schema
});
网格元素看起来像这样:
// creates bonuses grid control
$("#bonusesGrid").kendoGrid({
dataSource: bonusesDataSource,
toolbar: ["create"],
editable: "inline",
columns: [
"BonusId",
"EmployeeId",
{
field: "EmployeeLastName",
editor: employeeAutocompletingEditor,
template: "#=EmployeeLastName#"
},
"Amount",
{
field: "Comment",
titel: "Comment",
editor: textareaEditor,
filterable: {
operators: {
number: {
contains: "Contains"
}
}
}
},
{
command: ["edit"],
title: " "
}
],
save: function(e) {
if (newValueEmployeeId !== undefined && newValueEmployeeLastName !== undefined) {
e.model.EmployeeId = newValueEmployeeId; // it's a hack to bind model and autocomplete control
e.model.EmployeeLastName = newValueEmployeeLastName;
}
},
edit: function(e) {
setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
},
cancel: function(e) {
setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
}
});
文本区代码在这里:
function textareaEditor(container, options) {
$('<textarea data-bind="value: ' + options.field + '" cols="10" rows="4"></textarea>')
.appendTo(container);
}
更新1
在步骤4之后(将'test 0'改为'test 01'注释并按更新)我有下一个请求:
Accept:application/json, text/javascript, */*; q=0.01
Content-Length:490
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Host:localhost
Origin:http://localhost
Referer:http://localhost/
X-Requested-With:XMLHttpRequest
POST正文
Form Dataview sourceview URL encoded
BonusId:45
EmployeeId:47
Employee[EmployeeId]:47
Employee[UserName]:opetriv
Employee[LastName]:Oleh Petrivskyy
Employee[LastNameUkr]:Петрівський Олег Миронович
EmployeeLastName:Oleh Petrivskyy
Date:Fri Apr 19 2013 12:00:00
Amount:2
**Comment:test 01**
IsActive:true
Ulc:ryakh
Dlc:Fri Apr 19 2013 12:34:33 GMT+0300 (FLE Daylight Time)
对我来说是正确的。
控制器的响应是:{"BonusId":45,
"EmployeeId":47,
"Employee":{"EmployeeId":47,"UserName":"opetriv","LastName":"Oleh Petrivskyy","LastNameUkr":"Петрівський Олег Миронович"},
"EmployeeLastName":"Oleh Petrivskyy","Date":"/Date(1366362000000)/","Amount":2,**"Comment":"test 01"**,"IsActive":true,"Ulc":"ryakh ","Dlc":"/Date(1366375264603)/"}
在步骤7之后(按取消键并接收此魔术),没有任何ajax请求到服务器。我有一个错误处理程序的数据源,它不触发
当您按下更新时,来自服务器的响应是很重要的。为数据源的错误事件设置一个处理程序,并查看是否触发它。
检查服务器对更新请求的原始响应。它不应该包含任何错误。还要记住,在最新版本的jQuery中,空响应不是有效的JSON,并且会触发错误事件。
使用自定义编辑器更改字段不会触发数据库的更新。这可以通过改变save
函数来解决:
save: function(e) {
if (newValueEmployeeId !== undefined && newValueEmployeeLastName !== undefined) {
e.model.EmployeeId = newValueEmployeeId; // it's a hack to bind model and autocomplete control
e.model.EmployeeLastName = newValueEmployeeLastName;
**e.model.dirty = true;**
}
在我的例子中试试
.Events(events => {
events.Change("update_handler");
})
function update_handler(e)
{
if(e.action === 'sync')
{
this.read();
}
console.log(e);
}
我也遇到了同样的问题。在我的情况下,问题是,在创建新值后,我没有返回适当的模型(与有效的ID)。
旧代码(不工作):
public ActionResult Product_Create([DataSourceRequest] DataSourceRequest request, Product product)
{
if (product != null && ModelState.IsValid)
{
Database.Products.InsertOnSubmit(new Product()
{
Name = product.Name,
IsActive = product.IsActive
});
Database.SubmitChanges();
}
return Json(new[] { product }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
}
新代码:public ActionResult Product_Create([DataSourceRequest] DataSourceRequest request, Product product)
{
Product newProduct = product;
if (product != null && ModelState.IsValid)
{
Database.Products.InsertOnSubmit(newProduct = new Product()
{
Name = product.Name,
IsActive = product.IsActive
});
Database.SubmitChanges();
}
return Json(new[] { newProduct }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
}
我正在使用ASP。. NET MVC与EF,所以在Database.SubmitChanges()
之后,我有有效ID的产品。