MVC Html.HiddenFor 的值未传递到模型

Question

我正在使用JQueryUI日期选择器，并且这是我在视图中使用的代码。

@model myprojectName.WebSite.DataModel.AvailableDate

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


</script>
<h3 class="headerColorWhite">Book a session with Mike</h3>
<p class="mainText">Select a date that you wish to train with Mike</p>

 @using (Html.BeginForm())
{
<div class="editor-field left" id="datepicker">
    @Html.HiddenFor(model => model.DateAvailable, new {@class = "datepicker"})
    @Html.ValidationMessageFor(model => model.DateAvailable)
</div>

<div class="col-md-10 left">
    <input type="submit" value="Search Available Slots" class="btn btn-default left" />
</div>
}

当点击提交/搜索可用时间槽按钮时，似乎没有将我的选择日期发送回模型。

以下是它传递日期的模型。

public partial class AvailableDate
{
    private DateTime? _DateAvailable;

    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")]
    public System.DateTime DateAvailable
    {
        get { return _DateAvailable ?? DateTime.Today; }
        set { _DateAvailable = value; }
    }
}

请告诉我我做错了什么以及我需要做什么才能修复这个问题。

--------------- 编辑以显示get和post方法---------------

// GET: Bookings
    public ActionResult Index()
    {

        return View();
    }
    [HttpPost]
    public ActionResult Index(AvailableDate availableDate)
    {
        return View();
    }

- Simon Price

---

你的控制器方法签名是什么样子的？ - Erik Philips

我正在使用hiddenFor字段，因为我希望日期选择器始终可见，而不仅在点击文本框时显示。此外，在使用文本框时，它的格式不正确，但这是另一个时间的问题。 - Simon Price

代码已编辑以显示此页面的get和post，一旦我得到正确的日期返回，我将添加一个新的partialView来获取可用日期列表。 - Simon Price

很抱歉 - 在我发布那条评论后，我花了几秒钟才意识到你为什么要使用隐藏字段，因此进行了编辑。感谢更新。 - Rhys

当你将 div 转换为日期选择器时，你没有将名称属性设置为 DateAvailable.. 也许你可以像这样设置名称 <div class="editor-field left" id="datepicker" name="DateAvailable"> - JamieD77

Answer 1

目前，隐藏字段DateAvailable始终为null。当您从日期选择器中选择一个日期时，它目前不会更新隐藏字段。

因此，不要

$(function () {
    $("#datepicker").datepicker();
});

尝试:

$(function() {
    $("#datepicker").datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function (dateText, e) {
            $("#DateAvailable").val($(this).val());
        }
    });
});

这将为隐藏字段分配一个值。 此外，正如我们在转换中讨论的那样，日期需要按照上面定义的dateFormat：'dd-mm-yy'进行格式化。

- Rhys

---

仍然得到相同的结果 - Simon Price

当您单击日期时，DateAvailable 的值是什么？ - Rhys

我该如何检查这个？ - Simon Price

在Google Chrome中，按F12打开开发者工具。然后你可以使用CTRL + F查找"DateAvailable"，或在控制台中输入$("#DateAvailable").val();。 - Rhys

这会给我选定的日期。 - Simon Price

Answer 2

你确定选择的日期已应用于隐藏字段吗？也许你应该使用altField：

$( "#datepicker" ).datepicker({
  altField: ".datepicker"
});

这里的.datepicker是您注入到隐藏字段中的类名。或者更好的方法是使用其ID并应用格式：

$( "#datepicker" ).datepicker({
  altField: "#DateAvailable",
  altFormat: "dd-mm-yy" // added for conversion compatibility
});

请查看此fiddle。

- Linus Caldwell

---

使用这段代码片段，日期选择器甚至不会显示在页面上。 - Simon Price

我使用Firebug进行客户端调试。如果隐藏字段的值发生变化，您可以在那里看到它。如果没有“altField”，则不会发生任何事情。 - Linus Caldwell

我没有正确使用代码，但你给的片段仍然没有将值传回，但我即将检查Firebug。 - Simon Price

好的，那么我能想到的最后一件事就是错误的格式无法转换。也许要检查一下。我更新了我的答案。 - Linus Caldwell

我已经使用Rhys的解决方案使其正常工作了，但非常感谢您的时间和帮助。 - Simon Price