jquery - jQuery UI 日期选择器没有按预期工作

Question

我正在尝试集成 Jquery UI datepicker。它显示正确，我可以从中选择日期。但是每当我尝试提交在文本字段中插入日期的表单时；它显示验证错误，并显示消息“ModifiedDate 字段是必需的”。

帮我解决问题

这是我的视图代码Create.cshtml：

@model EFDBcontextPracticeWithMVC.Models.Customer

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




@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Customer</legend>

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

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </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.MiddleName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MiddleName)
            @Html.ValidationMessageFor(model => model.MiddleName)
        </div>

        <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.Suffix)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Suffix)
            @Html.ValidationMessageFor(model => model.Suffix)
        </div>

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

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

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

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

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

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

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

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

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

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

这是我的部分视图代码DateTime.cshtml：

@model System.DateTime?
@Html.TextBox(" ", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "pickDate" })

<script type="text/javascript">
    $(document).ready(function () {

        $('.pickDate').datepicker();
    });
</script>

这是我的Customer.cs 模型：

//------------------------------------------------------------------------------
// <auto-generated>
//    This code was generated from a template.
//
//    Manual changes to this file may cause unexpected behavior in your application.
//    Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace EFDBcontextPracticeWithMVC.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Customer
    {
        public Customer()
        {
            this.CustomerAddresses = new HashSet<CustomerAddress>();
            this.SalesOrderHeaders = new HashSet<SalesOrderHeader>();
        }

        public int CustomerID { get; set; }
        public bool NameStyle { get; set; }
        public string Title { get; set; }
        public string FirstName { get; set; }
        public string MiddleName { get; set; }
        public string LastName { get; set; }
        public string Suffix { get; set; }
        public string CompanyName { get; set; }
        public string SalesPerson { get; set; }
        public string EmailAddress { get; set; }
        public string Phone { get; set; }
        public string PasswordHash { get; set; }
        public string PasswordSalt { get; set; }
        public System.Guid rowguid { get; set; }
        public System.DateTime ModifiedDate { get; set; }

        public virtual ICollection<CustomerAddress> CustomerAddresses { get; set; }
        public virtual ICollection<SalesOrderHeader> SalesOrderHeaders { get; set; }
    }
}

这是呈现的 HTML 的源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Edit</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.ui.core.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jquery.ui.widget.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>

</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]

            </div>
            <nav>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                </ul>
            </nav>
        </header>
        <section id="main">


<h2>Edit</h2>

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<form action="/default1/Edit/4" method="post"><div class="validation-summary-errors"><ul><li style="display:none"></li>
</ul></div>    <fieldset>
        <legend>Customer</legend>

        <input data-val="true" data-val-number="The field CustomerID must be a number." data-val-required="The CustomerID field is required." id="CustomerID" name="CustomerID" type="hidden" value="4" />

        <div class="editor-label">
            <label for="NameStyle">NameStyle</label>
        </div>
        <div class="editor-field">
            <input class="check-box" data-val="true" data-val-required="The NameStyle field is required." id="NameStyle" name="NameStyle" type="checkbox" value="true" /><input name="NameStyle" type="hidden" value="false" />
            <span class="field-validation-valid" data-valmsg-for="NameStyle" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Title">Title</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="Title" name="Title" type="text" value="Ms.sdvsf" />
            <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="FirstName">FirstName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="Janet" />
            <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="MiddleName">MiddleName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="MiddleName" name="MiddleName" type="text" value="M." />
            <span class="field-validation-valid" data-valmsg-for="MiddleName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="LastName">LastName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="LastName" name="LastName" type="text" value="Gates" />
            <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Suffix">Suffix</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="Suffix" name="Suffix" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Suffix" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="CompanyName">CompanyName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="CompanyName" name="CompanyName" type="text" value="Modular Cycle Systems" />
            <span class="field-validation-valid" data-valmsg-for="CompanyName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="SalesPerson">SalesPerson</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="SalesPerson" name="SalesPerson" type="text" value="adventure-works\jillian0" />
            <span class="field-validation-valid" data-valmsg-for="SalesPerson" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="EmailAddress">EmailAddress</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="EmailAddress" name="EmailAddress" type="text" value="janet1@adventure-works.com" />
            <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Phone">Phone</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="Phone" name="Phone" type="text" value="710-555-0173" />
            <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="PasswordHash">PasswordHash</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="PasswordHash" name="PasswordHash" type="text" value="ElzTpSNbUW1Ut+L5cWlfR7MF6nBZia8WpmGaQPjLOJA=" />
            <span class="field-validation-valid" data-valmsg-for="PasswordHash" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="PasswordSalt">PasswordSalt</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="PasswordSalt" name="PasswordSalt" type="text" value="nm7D5e4=" />
            <span class="field-validation-valid" data-valmsg-for="PasswordSalt" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="rowguid">rowguid</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The rowguid field is required." id="rowguid" name="rowguid" type="text" value="ff862851-1daa-4044-be7c-3e85583c054d" />
            <span class="field-validation-valid" data-valmsg-for="rowguid" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="ModifiedDate">ModifiedDate</label>
        </div>
        <div class="editor-field">
            <input class="pickDate" id="ModifiedDate__" name="ModifiedDate. " type="text" value="1/1/0001" />

<script type="text/javascript">
    $(document).ready(function () {

        $('.pickDate').datepicker();
    });
</script>
            <span class="field-validation-error" data-valmsg-for="ModifiedDate" data-valmsg-replace="true">The ModifiedDate field is required.</span>
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
</form>
<div>
    <a href="/default1">Back to List</a>
</div>

        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

score 0 · Accepted Answer

线：

<input class="pickDate" id="ModifiedDate__" name="ModifiedDate. " type="text" value="1/1/0001" />

我觉得很奇怪；特别是属性中的尾随下划线__和属性中id的点空间。我只能假设您的验证器需要，但它不存在。相反，你有和。. nameModifiedDateModifiedDate__ModifiedDate.

删除结尾的下划线__和点空间. 。这可能会解决您的问题。

此行应如下所示：

<input class="pickDate" id="ModifiedDate" name="ModifiedDate" type="text" value="1/1/0001" />

免责声明：我不知道关于 ASP 或 .net 的第一件事，这只是一个有根据的猜测！

线索：

这是你的 ASP：

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

这是结果：

<div class="editor-label">
    <label for="ModifiedDate">ModifiedDate</label>
</div>
<div class="editor-field">
    <input class="pickDate" id="ModifiedDate__" name="ModifiedDate. " type="text" value="1/1/0001" />

    <script type="text/javascript">
    $(document).ready(function () {

        $('.pickDate').datepicker();
    });
    </script>
    <span class="field-validation-error" data-valmsg-for="ModifiedDate" data-valmsg-replace="true">The ModifiedDate field is required.</span>
</div>

其余字段在 ASP 中的设置方式相同，但ModifiedDate它是 HTML 中唯一奇怪的字段。
查看for生成的 HTML 中的属性。现在查看id字段中的属性。它们应该是相同的。他们不是。

jquery - jQuery UI 日期选择器没有按预期工作

1 回答 1

Related

Reference