来自 jquery 的 mvc 日期时间选择器设置值未绑定到模型答案

【问题标题】：mvc datetime picker setting value from jquery does not bind to model来自 jquery 的 mvc 日期时间选择器设置值未绑定到模型
【发布时间】：2017-09-15 09:18:03
【问题描述】：

我有绑定到我的视图模型上的日期时间属性的日期时间选择器。当我从日期时间选择器中选择日期并回发时，它会将值绑定到模型，但是当我尝试通过 jequery 设置值时，该值始终为空。

我的模型是：

 public class viewmodel
{
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public datetime DDate { get; set; }

}

查看代码是

<div class="col-md-3">
@Html.TextBoxFor(m => m.DDate, new {@class = "form-control datepicker" })
@Html.ValidationMessageFor(model => model.DDate, "", new { @class = "text-danger" })</div>

javascript代码是

$("#DDate").datepicker({ dateFormat: 'dd/mm/yy' });

所以当我点击一个选项按钮时，它会设置日期时间选择器的日期

$(':input[id="rbVatVoluntary"]').click(function () {

    var thDate = $("#DDate");
    thDate.attr("disabled", 'disabled');
    thDate.datepicker('setDate', new Date());});

当我在浏览器中检查控制台时，我看到该值设置正确，但是当我发布表单并检查模型属性时，它为空。

感谢您对此提供的任何帮助

【问题讨论】：

您已禁用控件 - 禁用的控件不会回发值
thDate.attr("disabled", 'disabled'); 在 POST 期间不提交值 - 改用 thDate.attr("readonly", 'readonly');。
你的TextBoxFor 绑定在DDate 而你的模型属性名称是Date ...这是一个错字吗？
是的，实际上是错字
@TetsuyaYamamoto 成功了，非常感谢。我一直在努力解决这个问题。

标签： javascript jquery asp.net-mvc datetime jquerydatetimepicker

【解决方案1】：

disabled HTML 属性阻止在 POST 请求期间提交输入值（视为空值），如以下解释所示：

禁用的元素通常用灰色的文本绘制。如果元素是已禁用，它不响应用户操作，无法聚焦，并且命令事件不会触发。 在表单元素的情况下，它不会提交。

如果您想保留在 POST 期间提交的值但阻止用户更改其内容，请改用 HTML readonly attribute：

$(':input[id="rbVatVoluntary"]').click(function () {
    var thDate = $("#Date");
    thDate.attr("readonly", "readonly");
    thDate.datepicker('setDate', new Date());
});

您还需要将属性名称与辅助方法中分配的属性名称相匹配：

@Html.TextBoxFor(m => m.Date, new { @class = "form-control datepicker" })

【讨论】：