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

Question

首先，我正在自学 MVC，所以 none 这可能是最佳实践，这个问题可能被认为是 MVC 101。我已经用谷歌搜索并尝试了好几天的各种事情，所以很沮丧，我正在寻求帮助.

我正在使用 MVC5、EF6 和 Bootstrap3

我的 objective 很简单 - 我想显示一个视图，让用户使用 Bootstrap The actual Clockpicker found here on GitHub 的时钟式时间选择器输入时间。当用户在视图上单击创建时，其结果将填充回我的数据库。

但是我似乎无法让它工作。下面我包含了模型、控制器和视图的简化版本。在视图中，我可以使用我在示例中找到的 HTML 显示时钟选择器，但我不确定如何绑定到我的模型。如果我使用我对其他 bootstrap 元素所做的方式使用 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; }


}
}

CONTROLLER（我刚刚添加了创建操作）

using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;
using ATAS.Data;
using ATAS.Models;

namespace ATAS.Controllers
{
    public class AuthorisationsController : Controller
    {
    private DataManager db = new DataManager();     

    // GET: /Authorisations/Create
    public ActionResult Create()
    {
        ViewBag.AuthorisedEmployeeId = new SelectList(db.Employees, "EmployeeId", "FullName");
        ViewBag.PaymentTypeId = new SelectList(db.OvertimeTypes, "PaymentTypeId", "Description");
        ViewBag.AuthorisingEmployeeId = new SelectList(db.Employees, "EmployeeId", "FullName");
        return View();
    }

    // POST: /Authorisations/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include="AuthorisationId,DateAuthorised,StartTime,FinishTime")] Authorisation authorisation)
    {
        if (ModelState.IsValid)
        {
                            if (authorisation is IControllerHooks) { ((IControllerHooks)authorisation).OnCreate(); }
            db.Authorisations.Add(authorisation);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.AuthorisedEmployeeId = new SelectList(db.Employees, "EmployeeId", "FullName", authorisation.AuthorisedEmployeeId);
        ViewBag.PaymentTypeId = new SelectList(db.OvertimeTypes, "PaymentTypeId", "Description", authorisation.PaymentTypeId);
        ViewBag.AuthorisingEmployeeId = new SelectList(db.Employees, "EmployeeId", "FullName", authorisation.AuthorisingEmployeeId);
        return View(authorisation);
    }

VIEW (CREATE.cshtml)

@model ATAS.Models.Authorisation

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Authorisation</h4>
    <hr />
    @Html.ValidationSummary(true)


    <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>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>

    </div>
    }

    <div>
    @Html.ActionLink("Back to List", "Index")
    </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>
}

问题

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

    <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>

Answer 1

好吧，睡过头了……我已经解决了。

问题始终出在我如何将脚本连接在一起。

@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>
}

我使用了 id selector instead (#clockpicker) of a class selector (.clockpicker)

去展示有时仅仅描述问题就可以产生所需的顿悟。

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

MVC5 - using clockpicker to populate model

jquery-ui

twitter-bootstrap

asp.net-mvc-5.2