2015-03-08 4 views
0

Во-первых, я сам участвую в MVC, поэтому ни одна из этих проблем не может быть лучшей практикой, и вопрос может быть рассмотрен MVC 101. У меня есть googled и пробовал различные вещи в течение нескольких дней, так что в отчаянии я ищу Помогите.MVC5 - с помощью clockpicker для заполнения модели

Я использую MVC5, Ef6 и Bootstrap 3

Моя цель проста - я хочу, чтобы отобразить вид, что позволяет, введенную пользователем, время, используя timepicker часы стиля для Bootstrap The actual Clockpicker found here on GitHub. Результат которого затем заносится в мою базу данных, когда пользователь нажимает кнопку create на представлении.

Возможно, я не могу заставить его работать. Ниже я включил упрощенную версию Model, Controller и View. В представлении я могу заставить clockpicker отображать с помощью HTML, который я нашел в примерах, но я не уверен, как привязываться к моей модели. Если я использую html-хелпер-методы, используя способ, который я делал для других элементов начальной загрузки, он не отображает сборщик часов. Если я закодирую его в соответствии с примером, он отобразит clockpicker, но я тогда не знаю, как привязать результат к моей модели и, следовательно, к базе данных.

Если у вас есть какой-либо пример кода или вы можете указать мне куда-нибудь, что может объяснить, как я должен это делать, я был бы признателен.

Надеюсь, вопрос имеет смысл.

МОДЕЛЬ

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

ПРОБЛЕМА

***** Этот подход показывает clockpicker, но я не знаю, как привязать к модели *****

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

***** Этот подход обыкновение отображения clockpicker *****

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

вы заметите, что я оставил пару элементов данных в контроллере (employeeId и т. Д.). Моя фактическая модель и вид содержат их, поэтому это не ошибка, я просто забыл очистить ее перед публикацией. – cramar

ответ

0

Хорошо после сна на нем ... Я разработал его.

Проблема заключалась в том, как я связал сценарий.

@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 вместо (#clockpicker) в виде class selector (.clockpicker)

идет, чтобы показать, иногда просто с описанием проблемы может создать озарение требуется.