DatePicker始终设置为ASP.NET MVC的第一行

Question

我的日期选择器始终设置为第一行。 它会动态实施还是系统出现问题？

  <tbody class="TrimGridContent" id="trimBody">
                        @foreach (TrimsAccessoriesOrderModel trimsData in TrimsData)
                        {
                            <tr class="TrimGridFields">
                                <td >
                                    <input type="checkbox" class="singleTrimGridCheck" value="@trimsData.GridTranId">
                                </td>
                                <td>@trimsData.SerialNumber</td>
                                <td>@trimsData.GridOrderDate</td>
                                <td>@trimsData.GridSyleNo</td>
                                <td>@trimsData.GridItemName</td>
                                <td>@trimsData.GridItemCode</td>
                                <td>@trimsData.GridStoreName</td>
                                <td>@trimsData.GridSupplierName</td>
                                <td>@trimsData.GridOrderQty</td>
                                <td>@trimsData.GridUnitName</td>
                                <td>@trimsData.GridUnitPrice</td>
                                <td>@trimsData.GridDeliveryDate</td>
                                <td>@trimsData.GridRemarks</td>
                                <td>
                                    @Html.TextBoxFor(m => m.SupplierDate, new {@class = "form-control datepicker", @placeholder = "Supplier Date", @id = "SupplierDate"})
                                </td>
                                <td>
                                    @Html.TextBoxFor(m => m.RevisedDate, new {@class = "form-control datepicker", @placeholder = "Revised Date", @id = "RevisedDate"})
                                </td>

                                <td>
                                    @Html.TextBoxFor(m => m.InHouseDate, new {@class = "form-control datepicker", @placeholder = "In House Date", @id = "InHouseDate"})
                                </td>
                            </tr>
                        }
                    </tbody>

如果我向第一行日期选择器行以外的第二行或第三行提供输入，则日期将设置为第一行，即供应商日期。

这是我的js。

 @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script> $('.datepicker').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy' }); </script> } 

有人遇到过这种问题吗？

Answer 1

听起来好像是发生了问题，因为您将@Html.TextBoxFor()帮助器放入具有预定义@id = "SupplierDate"参数的foreach循环中，该参数呈现具有相同id属性而不是唯一ID名称的所有对应文本框。 因此，您应该在删除id属性定义的同时尝试使用for循环和TrimsData集合索引（让助手创建唯一的id属性值）：

@for (int i = 0; i < TrimsData.Count; i++)
{
    <tr class="TrimGridFields">
        <td>
           <input type="checkbox" class="singleTrimGridCheck" value="@TrimsData[i].GridTranId">
        </td>
        <td>@TrimsData[i].SerialNumber</td>
        <td>@TrimsData[i].GridOrderDate</td>
        <td>@TrimsData[i].GridSyleNo</td>
        <td>@TrimsData[i].GridItemName</td>
        <td>@TrimsData[i].GridItemCode</td>
        <td>@TrimsData[i].GridStoreName</td>
        <td>@TrimsData[i].GridSupplierName</td>
        <td>@TrimsData[i].GridOrderQty</td>
        <td>@TrimsData[i].GridUnitName</td>
        <td>@TrimsData[i].GridUnitPrice</td>
        <td>@TrimsData[i].GridDeliveryDate</td>
        <td>@TrimsData[i].GridRemarks</td>
        <td>
            @Html.TextBoxFor(m => m.TrimsData[i].SupplierDate, new {@class = "form-control datepicker", @placeholder = "Supplier Date" })
        </td>
        <td>
            @Html.TextBoxFor(m => m.TrimsData[i].RevisedDate, new {@class = "form-control datepicker", @placeholder = "Revised Date" })
        </td>

        <td>
            @Html.TextBoxFor(m => m.TrimsData[i].InHouseDate, new {@class = "form-control datepicker", @placeholder = "In House Date" })
        </td>
    </tr>
}

或者，如果您还有另一个具有唯一值的TrimsData属性，请使用该属性设置文本框ID值，如下例所示：

@Html.TextBoxFor(m => m.SupplierDate, new {@class = "form-control datepicker", @placeholder = "Supplier Date", @id = trimsData.Id })

相关问题：

多个.NET MVC输入字段的jQuery Datepicker不起作用

Answer 2

我认为的原因之一是datepicker在呈现动态文本框后运行。 您必须重新触发datepicker初始化才能使其工作。