Kendo ui 网格内联日期编辑，将日期从 Kendo UI 传递到 ASP.NET 导致无效的 ModelState

Question

我的数据源中有一个可为空的 DateTime 属性 - ExpectedReceiptDate，我正在网格中实现内联编辑：

$(document).ready(function() {
 $("#grid").kendoGrid({
     dataSource: {
         transport: { 
            //setup transport
        },
         schema:
         {
             data: 'Data', total: 'Total', errors: 'Errors',
             model:
             {
                 id: 'Id',
                 fields: {
                     Id : { editable: false, type: 'number' },
                     Name : { editable: false, type: 'string' },
                     ExpectedReceiptDate : { 
                        editable: true, 
                        format: "{0: dd/MMM/yyyy}",
                        nullable: true,
                        type: 'date'
                    }
                 }
             }
         },
         requestEnd: function(e) {
             if (e.type == 'update') {this.read();}
         },
         serverFiltering: true,
         serverSorting: true
     },
     editable: {
         mode: "inline"
     },
     columns: [
     {
         field: "Id",
         title: "ID"                                
     },{
         field: "Name",
         title: "Name"
     },{
         field: "ExpectedReceiptDate",
         title: "Date",
         editor: DateEditor, 
     },
     {
         title: " ",
         command: ["edit"],
         width: 200
     }
     ]
 });

});

编辑器很简单：

function DateEditor(container, options) {
                         $('<input required name="' + options.field + '"/>')
                            .appendTo(container)
                             .kendoDatePicker({format: "dd/MMM/yyyy"});
                      }

在编辑获取日期的行时，例如 24/Feb/2017 我收到一个错误：

无效的模型状态 ExpectedReceiptDate，值“（日期）FLE 标准时间”对于 ExpectedReceiptDate 无效

我已尝试为该字段添加自定义验证：

function ExpectedReceiptDateValidator(input){                       
                        if (input.is("[name='ExpectedReceiptDate']") && input.val() != "") {
                            try { 
                                var date = kendo.parseDate(input.val(), "dd/MMM/yyyy");
                                if(!date) 
                                    return false;                                   
                            } catch (err) { return false;}                          
                            console.log('res', true);
                        }                           
                        return true;
                    }

验证通过，输入的日期值被很好地解析为Date obj，但模型状态错误仍然存​​在。 是什么导致模型状态错误？

Answer 1

尝试将格式说明符从 schema.model 定义移动到列定义，因为 format 不是 datasource.schema.model 的配置选项，而是 grid.columns(http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.format) 的配置选项，这很有意义日期格式是一个演示问题。

使用列上的格式说明符，您将不需要自定义编辑器，因为内置日期编辑器将自动使用列配置中的格式。如果您想进行一些非标准的额外自定义，您只需要自定义编辑器。

另外，我不确定 requestEnd 中的“this.read()”调用是否是必需的。

演示：http://dojo.telerik.com/@Stephen/oNOja

Answer 2

原来模型状态无效的错误是服务器的响应，我没有注意到，并认为这是客户端问题。 但无论如何，内联日期编辑的问题仍然存在，最后我在这里找到了答案：

Passing dates from Kendo UI to ASP.NET MVC

MVC 在映射 JSON 参数时使用“/Date(…)/”格式，但在映射表单数据时不使用。默认情况下，Kendo 将参数作为表单传递。

处理此日期解析问题的一种方法是使用 Kendo UI DataSource 向服务器发送 JSON 数据而不是表单数据。然后MVC 会自动正确地将“/Date(...)/”转换为 DateTime。

发送 JSON 格式数据的替代方法是将我们的数据保留为 表单数据，这是默认设置，而只需更改 我们日期的格式。

所以我做了以下事情：

transport:{
  update: ..,
  parameterMap: function(data, operation) {
                if (operation === "update") {
                    data.ExpectedReceiptDate = formatDate(data.ExpectedReceiptDate);
                }
                return data;
            }
}

Answer 3

由于链接已损坏并且无法找到任何可行的解决方案，因此以下方法均不适合我。

所以...在我的情况下（我可以让它工作的唯一方法），我的一个网格字段上有一个更改功能（远离物理保存按钮#AutoSaveIsTheFuture）

 schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: {
                        
                        fields: {
                            ...
                            ItemDate: { editable: true, type: "date", validation: { required: true }},
                            ...
                            Amount: { editable: true, type: "decimal", validation: { required: true }}
                        }
                    }
                },

...

 columns: [{
...

                    {
                        field: "ItemDate",
                        title: "Item Date",
                        format: "{0:yyyy/MM/dd}",
},
                        field: "Amount",
                        title: "Amount",
                        format: "{0:n2}",
                        editor: customAmountEditor
                        
                    }],

...

function customAmountEditor(container, options)
        {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                .appendTo(container)
                .kendoNumericTextBox({
                    change: SaveLineItem 
                    
                });
        }

通过 AJAX POST 方法将字段发送到我的控制器，我在其中执行以下操作：

 function SaveLineItem(e)
    {
        var element = e.sender.element;
        var row = element.closest("tr");
        var grid = $("#GridName").data("kendoGrid");
        var dataItem = grid.dataItem(row);

        var dateField = row.find("input[name='ItemDate']");
        var dateValue = dateField.val();

 $.ajax({
            cache: false,
            type: "POST",
            url: "@Html.Raw(Url.Action("MethodName", "ControllerName"))",
             data: {
                 "Id": dataItem.Id,
                 "ItemDateString": dateValue,
                ...
                "Amount": dataItem.Amount,
            },
            success: function (data)
            {
                AddRow();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (XMLHttpRequest.status === 410) {
                    alert(errorThrown);
                }
            }
         });
    }

它在控制器端作为字符串接收，但至少格式正确（“yyyy/mm/dd”）并且易于使用 Convert.ToDateTime(ItemDateString) 进行转换；

希望这会有所帮助。 （如有乱请见谅）