ASP.NET MVC 5：EditorTemplate 中的 Datepicker 错误，无法多次显示答案

【问题标题】：ASP.NET MVC 5: Datepicker in EditorTemplate error, cannot show multiple timesASP.NET MVC 5：EditorTemplate 中的 Datepicker 错误，无法多次显示
【发布时间】：2015-05-07 09:43:40
【问题描述】：

我有一个EditorTemplate 用于DateTime，我使用的是JQueryUI 的datepicker。当我有多个日期要编辑时，只会显示第一个日期选择器。

版本：

<package id="jQuery" version="2.1.3" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" />
<package id="Microsoft.AspNet.Mvc" version="5.2.2" targetFramework="net45" />

../Views/Shared/EditorTemplates/DateTime.cshtml：

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static",
    @id = "datepick"
})

../Views/Shared/_Layout.cshtml - 脚本：

<script>
    $(function () {
        $("#datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

我要编辑的视图：

<div class="form-group">
    @Html.LabelFor(model => model.StartDateTime, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDateTime)
        @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EndDateTime, new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.EditorFor(model => model.EndDateTime)
        @Html.ValidationMessageFor(model => model.EndDateTime, "", new {@class = "text-danger"})
    </div>
</div>

如前所述，只有第一个有效。我在谷歌上找不到任何对我有帮助的东西。希望你能。

【问题讨论】：

你需要给他们唯一的 id，它会选择第一个。尝试使用类。

标签： c# jquery asp.net asp.net-mvc jquery-ui

【解决方案1】：

发生这种情况是因为 id 与 StartDateTime 和 EndDateTime 相同。请查看更多关于select an item using an id or class

由于 ID 是唯一的，因此此表达式总是选择零个或一个元素，具体取决于是否存在具有指定 ID 的元素。

要解决这个问题，您必须使用class，因为您可以选择多个元素。

您的代码将发生如下变化：

../Views/Shared/EditorTemplates/DateTime.cshtml：

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static datepick",
})

../Views/Shared/_Layout.cshtml - 脚本：

<script>
    $(function () {
        $(".datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

【讨论】：