Twitter bootstrap MVC5-使用时钟选择器填充模型

首先，我自己自学MVC，所以这些都不是最佳实践，这个问题可能被认为是MVC 101。几天来我一直在谷歌上搜索和尝试各种各样的东西，所以在沮丧中我正在寻求帮助

我使用的是MVC5、EF6和Bootstrap3

我的目标很简单-我想显示一个视图，让用户使用时钟样式的计时器为引导输入时间。当用户单击视图上的“创建”时，其结果将填充回我的数据库

然而，我似乎无法让它工作。下面我提供了模型、控制器和视图的简化版本。在视图中，我可以使用示例中找到的HTML显示时钟选择器，但我不确定如何绑定到我的模型。如果我使用html助手方法，就像我对其他引导元素所做的那样，它将不会显示时钟选择器。如果我按照示例进行编码，它将显示时钟选择器，但我不知道如何将结果绑定回我的模型和数据库

如果您有任何示例代码，或者可以向我指出某个地方，可以解释我应该如何做到这一点，我将不胜感激

我希望这个问题有意义

型号

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace ATAS.Models
{


public partial class Authorisation : IControllerHooks
{

    public long AuthorisationId { get; set; }

    [Required, StringLength(10)]
    public string AuthorisationNumber { get; set; }

    [Required]
    [DataType(DataType.Date)]
    public DateTime StartTime { get; set; }

    [Required]
    [DataType(DataType.Date)]
    public DateTime FinishTime { get; set; }


}
}

控制器（我刚刚包括了创建操作）

查看（CREATE.cshtml）

@model ATAS.Models.authorization
@{
ViewBag.Title=“创建”；
}
创造
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
授权

@Html.ValidationSummary（true）
时钟选择器：
@LabelFor（model=>model.FinishTime，新的{@class=“controllabel col-md-2”}）
@Html.TextBoxFor（model=>model.FinishTime，new{@class=“clockpicker”}）

@Html.ValidationMessageFor（model=>model.FinishTime）
}
@ActionLink（“返回列表”、“索引”）
@章节页面特定{
$（文档）.ready（函数（）{
//页面相关脚本
/*
*时钟选择器
*/
$（“#时钟选择器”）。时钟选择器({
位置：'顶部'，
donetext:'完成'
});
})
}

问题

*****这种方法显示时钟选择器，但我不知道如何绑定到模型*****

    <div class="col-sm-12">
        <div class="form-group">
            <label>Clockpicker:</label>
            <div class="input-group">
                <input class="form-control" id="clockpicker" type="text" placeholder="Select time" data-autoclose="true">
                <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
            </div>
        </div>
    </div>

时钟选择器：

*****这种方法不会显示时钟选择器*****

    <div class="form-group">
        @Html.LabelFor(model => model.FinishTime, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.FinishTime, new { @class = "clockpicker" })<br />
            @Html.ValidationMessageFor(model => model.FinishTime)
        </div>
    </div>

@LabelFor（model=>model.FinishTime，新的{@class=“controllabel col-md-2”}）
@Html.TextBoxFor（model=>model.FinishTime，new{@class=“clockpicker”}）

@Html.ValidationMessageFor（model=>model.FinishTime）

睡过之后。。。我已经解决了

问题总是在于我是如何将脚本连接在一起的

@section pagespecific {
<script src="/scripts/plugin/clockpicker/clockpicker.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

    // PAGE RELATED SCRIPTS



    /*
    * CLOCKPICKER
    */

    $('#clockpicker').clockpicker({
        placement: 'top',
        donetext: 'Done'
    });
   })   </script>
}

@节页特定{
$（文档）.ready（函数（）{
//页面相关脚本
/*
*时钟选择器
*/
$（“#时钟选择器”）。时钟选择器({
位置：'顶部'，
donetext:'完成'
});
})   
}

我用（#时钟选择器）代替了（.clockpicker）

---

有时只描述问题就可以产生所需的顿悟。

您会注意到我在控制器中留下了一些其他数据元素（employeeId等）。我的实际模型和视图中确实包含这些元素，因此没有错误，我只是在发布前忘了清理。

    <div class="form-group">
        @Html.LabelFor(model => model.FinishTime, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.FinishTime, new { @class = "clockpicker" })<br />
            @Html.ValidationMessageFor(model => model.FinishTime)
        </div>
    </div>

@section pagespecific {
<script src="/scripts/plugin/clockpicker/clockpicker.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

    // PAGE RELATED SCRIPTS



    /*
    * CLOCKPICKER
    */

    $('#clockpicker').clockpicker({
        placement: 'top',
        donetext: 'Done'
    });
   })   </script>
}