MVC:从视图到模型的绑定日期时间值(引导日期时间选择器)

时间:2013-06-25 14:08:45

标签: asp.net-mvc asp.net-mvc-4 twitter-bootstrap data-binding datetimepicker

我想将从view获取的日期时间值绑定到我的模型,以便我可以将其保存在数据库中。
注意:目前我正在使用bootstrap日期时间选择器来获取日期时间值 我们假设我有一个名为foo的ViewModel

public class fooVM
{
  public string Name {get; set; }

  [DataType(DataType.DateTime)]
  public DateTime DateEntered {get; set}
}

基于此我有一个观点

@model User.Model.fooVM
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
}
@section Datetime
{
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
    <link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
}
  @using (Html.BeginForm("Register", "Account", FormMethod.Post))
    {

            <div class="input-block-level">@Html.TextBoxFor(model => model.Name</div>


           <div id="datetimepicker2" class="input-append date">
                    <input data-format="dd/MM/yyyy HH:mm:ss PP" type="text"/>
               <span class="add-on">
                   <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
               </span>

                </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    $('#datetimepicker2').datetimepicker({
                        format: 'dd/MM/yyyy hh:mm:ss',
                        language: 'en',
                        pick12HourFormat: true
                    });
                });
            </script>
        </div>

    }
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
</fieldset>

现在这会在视图中为我提供日期时间选择器,但该值不会绑定到模型中的DateEntered值。

如果我想从视图获取日期时间的值并保存它可能在数据库中, 我该怎么办?所以,如果我在我的控制器中执行了以下命令,那就可以了。

[HttpPost]
public ActionResult Create(fooVM user)
{
    if (ModelState.IsValid) {
       _db.Users.Add(user);
       _db.SaveChanges();
}

PS:这可能是数据库中的可能值 名称:ABC
DateEntered:6/14/2013 9:34:23 AM

3 个答案:

答案 0 :(得分:4)

如果您在输入中设置了Name属性,我相信MVC会将其与您模型上具有相同名称的属性相匹配。

或者,您可以使用HtmlTextBoxFor帮助程序并使用htmlAttributes参数设置data-format。像@Html.TextBoxFor(model => model.DateEntered, new { data_format = 'dd/MM/yyyy HH:mm:ss PP'});

这样的东西

以下是此次重载的MSDN

答案 1 :(得分:1)

您需要为输入标记指定与模型中的属性对应的名称,如下所示:

<input name="DateEntered" data-format="dd/MM/yyyy HH:mm:ss PP" type="text"/>

答案 2 :(得分:0)

您需要做的就是为引导日期选择输入提供相应的“name”属性,该输入映射到视图模型中的所需属性。

<input data-format="dd/MM/yyyy HH:mm:ss PP" type="text" name="DateEntered" />