如何将JavaScript绑定到在MVC5视图中创建的表内的复选框和datetimepicker

Question

基本上，

我在MVC视图中创建了一个表。

每行都有一个复选框和一个与零件订单关联的日期时间HTML输入控件。 如果选择了复选框，我想将日期时间选择器自动设置为今天的日期。 如果我的复选框和日期时间具有预定义的ID（请参阅下面的jquery脚本），我知道该怎么做，但是在这种情况下，我不提前知道将有多少行。 我有些想尝试一种最简单的方法来设置唯一ID，然后从javascript中读取它们。

这是我在MVC视图中的代码片段：

<tbody>
@foreach (var partOrder in Model.PartOrders)
 {
  <tr>
   <td>@Html.DisplayFor(m => partOrder.Part.Description, new { htmlAttributes = new { @class = "form-control" } })</td>
   <td class="text-center">@Html.EditorFor(m => partOrder.IsPartReceived, new {htmlAttributes = new { @class = "checkbox isPartReceived" } })</td>
   <td class="text-center">@Html.DisplayFor(m => partOrder.OrderedOn, new { htmlAttributes = new { @class = "form-control" } })</td>
   <td>@Html.EditorFor(m => partOrder.ReceivedOn, new { htmlAttributes = new { @class = "form-control partReceivedOn"} })</td>
 </tr>
}
</tbody>

第一个@ Html.EditorFor生成复选框，第二个是日期时间选择器。

这是我在页面其他地方使用jquery进行类似操作的示例：

            $("#IsBoxRequested").click(function () {
                var checkBox = $("#IsBoxRequested");
                var timeBox = $("#BoxRequestedOn");
                setTime(checkBox, timeBox);
            });


    function setTime(checkbox, timebox) {
        if (checkbox.prop('checked') == true) {
            timebox.val(getToday());
        }
        else {
            timebox.val(null);
        }
    }
    function getToday() {
        var now = new Date();
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        return today = now.getFullYear() + "-" + (month) + "-" + (day);
    }

非常感谢您提供有关如何动态创建复选框输入的此技巧的任何提示。

Answer 1

再次感谢@StephenMuecke，我已经解决了我的问题。

首先，我切换到for循环，如下所示：

            <tbody>
                @for (int i = 0; i < Model.PartOrders.Count(); i++)
                {
                    @Html.HiddenFor(m=>m.OrderedPartIDs[i])
                    <tr>
                        <td>@Html.DisplayFor(m => m.PartOrders[i].Part.Description, new { htmlAttributes = new { @class = "form-control" } })</td>
                        <td class="text-center"><label style="display:block">@Html.EditorFor(m => m.PartOrders[i].IsPartReceived, new { htmlAttributes = new { @class = "checkbox isPartReceived" } })</label></td>
                        <td class="text-center">@Html.DisplayFor(m => m.PartOrders[i].OrderedOn, new { htmlAttributes = new { @class = "form-control" } })</td>
                        <td>@Html.EditorFor(m => m.PartOrders[i].ReceivedOn, new { htmlAttributes = new { @class = "form-control partReceivedOn" } })</td>
                    </tr>
                }
            </tbody>

其次，我将javascript更新为简单的：

            $(".isPartReceived").click(function () {
                var timeBox = $(this).closest('tr').find('.partReceivedOn');
                setTime($(this), timeBox);

            });

一切现在都像魅力一样！