将 jqueryui datepicker 中的选定日期绑定到模型

Question

我正在尝试将 jQueryUI 日期选择器中的选定日期绑定到要在控制器中使用的模型，但它返回 null。使用 formcollection 时，我可以检索选定的值

视图模型

public class EmpViewModel
 {
    public int EmpId { get; set; }

    public string FirstName { get; set; }
    public string LastName { get; set; }

    public DateTime DateOfBirth { get; set; }

}

查看

<div class="col-md-10">
    @Html.EditorFor(model => model.DateOfBirth, 
            new { htmlAttributes = new { @class = "form-control datefield" } })
</div>

控制器

public ActionResult Create(EmpViewModel emp)
{
}

尝试了以下文章中的方法，但无法正常工作 http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4

脚本

<script>
    $(function () {
        $(".datefield").datepicker();
    })
</script>

Answer 1

将 datepicker 绑定到 viewmodel 有多种解决方案，但这两种是常见的：

首先，尝试在EditorFor 上声明一个id 属性并将jQuery datepicker 绑定到它。

@Html.EditorFor(model => model.DateOfBirth, 
            new { htmlAttributes = new { @id = "DateOfBirth", @class = "form-control datefield" } })

<script>
    $(function () {
        $("#DateOfBirth").datepicker();
    });
</script>

其次，如果您的模型使用表单提交传递给控制器​​，请在您的控制器方法上尝试HttpPost 属性，并在必要时使用ModelState.IsValid。

[HttpPost]
public ActionResult Create(EmpViewModel emp)
{
    if (ModelState.IsValid)
    {
        // do something
    }
}

如果这些解决方案仍然不起作用，请将 EditorFor 更改为 TextBoxFor 并使用表单集合参数和模型绑定方案检查提交是如何工作的。

需要关注的其他事项：

1. 确保您的EditorFor 包含在<form> 标记内，或尝试@using (Html.BeginForm("Create", "Controller", FormMethod.Post)) 并将EditorFor 放入其中。

2. 确保 datepicker 提供的日期格式是 System.DateTime 可识别的正确格式，不要依赖 JS 格式（如果有，请避免使用 toLocaleDateString）。如果您想使用特定的日期格式，请使用 momentjs 库。

3. 确保 jQuery 已正确加载，在页面加载后检查浏览器控制台是否存在 jQuery（查看 TypeError: jQuery is not defined 消息是否存在）。

4. 尝试将纯 DateTime 设置为可空 DateTime: public DateTime? DateOfBirth { get; set; } 并插入一些代码来检查空值。

类似问题进一步参考：

MVC 4 DatePicker's selected value not getting set to model

Bind Datetime Model value to datepicker and pass them to controller method