user-interface - 剑道网格取消按钮失去了新的价值

Question

我使用带有自定义编辑器的网格。我用列内的文本区域替换常用输入。

用例：

将 textarea 的当前值破解为“test 0”
按下网格的编辑按钮（它的行）
添加新值“test 01”
按网格的更新按钮
检查网格行中的新值是否更新（有效）
再次按下网格的编辑按钮（新值为“test 01”）
按下网格的取消按钮（这里有一些魔法！不仅是网格，还有每个自定义编辑元素）
检查当前值是否没有从“test 01”变为“test 0”（失败）。

取消后，先前的值（“test 0”而不是“test 01”）由网格显示。这种情况与其他列（非 customEditable）中的值相同，例如金额。如果我保存然后按取消，则会显示错误的值，但正确的值将保存在 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 步之后（将“测试 0”更改为“测试 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 请求到服务器。我有一个数据源错误处理程序，它不会触发。

score 2 · Accepted Answer

当您按下更新时，服务器的响应是什么很重要。为dataSource的error事件放一个handler，看是否触发。

检查服务器对更新请求的原始响应是什么。它不应包含任何错误。另请记住，最新版本的 jQuery 空响应不是有效的 JSON，并且将触发错误事件。

score 1 · Accepted Answer

使用自定义编辑器更改字段不会触发数据库更新。这可以通过更改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;**
  }

score -1 · Accepted Answer

我有同样的问题。就我而言，问题是在创建新值后我没有返回正确的模型（使用有效 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 的产品之后。

user-interface - 剑道网格取消按钮失去了新的价值

3 回答 3

Related

Reference