将日期选择器绑定到动态生成的文本框

Question

我在 foreach 中生成了几个文本框元素，如下所示：

@foreach(var thing in Model.Things)
{
    <tr>
        <td>@Html.TextBoxFor(m => thing.StartDate, new { id = "thingStartDate", @class = "thingDatePicker" })</td>
    </tr>
}

我将 jQuery 日期选择器附加到每个文本框，如下所示：

$(document).ready(function(){
    $(".thingDatePicker").datepicker({ dateFormat: "mm/dd/yy" });
});

日期选择器在每个文本框的正确位置都正确触发。但是当我从其中任何一个中选择一个日期时，它只会填充第一个文本框。如何确保每个日期选择器与其文本框牢固关联？

Answer 1

您的所有文本框 (id="thingStartDate") 似乎都使用相同的 id，这显然会导致 HTML 无效。所以要么删除 id 属性，要么确保你没有被骗。我可能会删除它，因为您使用的是类选择器，而这个 id 根本没有任何作用：

@foreach(var thing in Model.Things)
{
    <tr>
        <td>
            @Html.TextBoxFor(
                m => thing.StartDate, 
                new { @class = "thingDatePicker" }
            )
        </td>
    </tr>
}

我还希望您意识到m => thing.StartDate 会为这些文本框生成错误的名称。它将使用name="StartDate" 而不是name="Things[xxx].StartDate"，当您尝试绑定回视图模型时，这可能会给您带来麻烦。为此，我建议删除 foreach 循环以支持编辑器/显示模板：

@Html.editorFor(x => x.Things)

并在相应的编辑器模板内（~/Views/Shared/EditorTemplates/Thing.cshtml）

@model Thing
<tr>
    <td>
        @Html.TextBoxFor(
            x => x.StartDate, 
            new { @class = "thingDatePicker" }
        )
    </td>
</tr>