如何将javascript绑定到MVC5视图中创建的表中的checkboxes和datetimepicker

Posted 2021-05-03

基本上，

我有一个在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);
    }

关于如何在动态创建的复选框输入上进行此操作的任何提示都非常感谢。

答案

非常感谢@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);

            });

现在一切都像魅力一样！