【问题标题】:Jquery datepicker submit value to the MVC4 modelJquery datepicker 向 MVC4 模型提交值
【发布时间】:2014-01-15 10:42:14
【问题描述】:

我有以下代码,它曾经是日期注册字段中日期选择器的一个弹出窗口。并希望将日期值提交到数据库中的注册字段。简而言之,我的意思是说我想从 jquery datepicker 中选择一个日期,而不是手动给它。但不幸的是从来没有工作......我想要当我点击注册字段时弹出一个jquery datapicker......

我的学生.cs

namespace ContosoSite.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    [MetadataType(typeof(StudentMetadata))]
    public partial class Student
    {
        public Student()
        {
            this.Enrollments = new HashSet<Enrollment>();
        }

        public int StudentID { get; set; }
        public string LastName { get; set; }
        public string FirstName { get; set; }
        [Display(Name = "EnrollmentDate")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public Nullable<System.DateTime> EnrollmentDate { get; set; }
        public string MiddleName { get; set; }
        public virtual ICollection<Enrollment> Enrollments { get; set; }
    }
}

create.cshtml

@model ContosoSite.Models.Student
@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"> 
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Student</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        @*<div class="editor-label">
            @Html.LabelFor(model => model.EnrollmentDate)
        </div>
        <div class="datefield editor-field">
            @Html.EditorFor(model => model.EnrollmentDate)
            @Html.ValidationMessageFor(model => model.EnrollmentDate)
        </div>*@
        <div class="editor-label">
            @Html.LabelFor(model => model.EnrollmentDate)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.EnrollmentDate)
            @Html.ValidationMessageFor(model => model.EnrollmentDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.MiddleName)
        </div>
        <div class="editor-field " >
            @Html.EditorFor(model => model.MiddleName)
            @Html.ValidationMessageFor(model => model.MiddleName)
        </div>

        <p>
            <input type="submit" value="Create" />

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

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

【问题讨论】:

    标签: jquery asp.net-mvc-4 jquery-ui-datepicker datapicker


    【解决方案1】:

    改变你的脚本

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

    【讨论】:

    • nice nilesh.... 请问几个问题.... 我希望在出现注册字段的整个站点中使用此日期选择器... 是否可行。例如,我在创建页面中使用此功能,,,我也希望在编辑页面中使用此功能
    • 您只需将上面带有正确 id 和必要 jqueries 的脚本粘贴到该页面
    • 好的,谢谢.... 有时我的 pahe 会显示一条消息:“值 '05/17/2014' 对于 EnrollmentDate 无效。”有什么问题
    • 可能是您在模型中添加的属性的 bcoz...如果答案有用,请不要忘记将其标记为答案
    • 不用担心,你的回答和 cmets 都将被标记为有帮助,亲爱的,也请支持我的问题...
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-06-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-12
    相关资源
    最近更新 更多