如何解决 Ajax POST 中的空 DateTime 字段？答案

【问题标题】：How to resolve null DateTime field in Ajax POST?如何解决 Ajax POST 中的空 DateTime 字段？
【发布时间】：2017-10-17 16:31:06
【问题描述】：

我已将 Ajax POST 函数中的序列化表单传递给我的控制器。除了DateTime? NextUpdate 字段之外，所有属性都被映射到控制器构造函数中的升级对象。

所以为了调试它，我检查了以下一些事情：

输入字段元素 ID 匹配模型属性的名称 - 是

其他对象属性填充在传递的升级对象中 - 是的

NextUpdate 输入字段在 createForm 表单容器内 - 是的

DateTime 值已填充到视图中 - 是

问题：

有谁知道为什么我的 DateTime 属性在升级对象中为空？

以下是我的上下文设置要点：

DateTimePicker 声明（我使用第二个输入元素传回 DateTime 值）：

               <form action="" id="createForm" class="form-group has-warning" method="post">
                        <div class="form-horizontal">

                                    <!-- NextUpdateDisplay -->
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="NextUpdateDisplay">Next Update Due</label>
                                        <div class="col-md-8">
                                            <div class='input-group date' id='NextUpdateDisplay'>
                                                <input type='text' class="form-control" />
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>



                                    <!-- Next Update Hidden Field -->
                                    <div>
                                        <input id="NextUpdate" name="NextUpdate" type="text" hidden disabled="disabled" />
                                    </div>

                        </div>
                    </form>

将 DateTimePicker 值传递给我的 NextUpdate 隐藏输入字段 onChange 的 DateTimePicker 值的 Javascript：

    $(function () {
        $('#NextUpdateDisplay').datetimepicker({

        });
    });

    $("#NextUpdateDisplay").on("dp.change", function (e) {
        $('#NextUpdate').val(moment(e.date).format());
    });

Ajax 方法：

$("#dialog-confirm-submit").dialog("open").on("dialogclose", function (event, ui) {
                if ($(this).data("state") == "confirmed") {
                    $.ajax({
                        url: "@(Url.Action("Index", "CreateEscalation"))",
                        type: 'POST',
                    traditional: true,
                    data: $("#createForm").serialize(),
                    dataType: "json",
                    success: function (result) {
                        //todo: use result
                        if (result.Success) {
                            window.location.href = result.redirectUrl;
                        }
                        else {
                            $('#submitStatus').text("Error occurred while processing your request, please try again or contact system administrators");
                            $(this).addClass('alert alert-danger fade in');
                            $('#submitStatus').show();

                        }
                    }
                });

                }
            });

控制器发布方法：（要点）

    [HttpPost]
    public ActionResult Index(Escalation escalation)
    {


        //do  controller stuff here..

    }

模型属性：（要点）

public partial class Escalation
{

    public DateTime? NextUpdate { get; set; }

}

运行时控制器中升级对象的内容：

【问题讨论】：

发送到服务器的实际 JSON 负载是什么？
@Amy 关于如何查看 JSON 有效负载的任何提示？
使用您的浏览器控制台工具，网络选项卡。

标签： ajax asp.net-mvc datetime object properties

【解决方案1】：

似乎 javascript 发布了一个字符串，但您的控制器想要一个 DateTime？类型，所以它们不匹配。尝试从请求中访问数据，例如：

Escalation.NextUpdate = (!string.IsNullOrWhiteSpace(Request["NextUpdate"])) ? DateTime.ParseExact(Request["NextUpdate"].Trim(),"MM/dd/yyyy", null) : Escalation.NextUpdate;

【讨论】：

【解决方案2】：

经过仔细检查，我们发现模型绑定器只选择只读字段。隐藏的输入 NextUpdate 具有以下阻止它被拾取的属性：

disabled="disabled"

注释掉这个设置允许模型绑定器选择 DateTime 字段。

【讨论】：