动态添加有javascript的字段，形成

Question

我已经使用 for 循环向我的表单动态添加了字段，效果很好。 但是，我添加的字段应该是 DatePickers，它们也需要 javascript。 我试过给他们一个来自循环迭代的 integer 的唯一 ID，但它似乎没有找到它们？

这是视图：

@model ProjectName.Models.ViewModels.GuestCreatorViewModel
@using Res = ProjectName.Resources.Resources

@for (int i = 1; i <= Model.NumOfGuests; i++)
{
    <div class="row">
        <div class="form-group">
            @Html.Label(Res.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.Label(Res.Period, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, htmlAttributes = new { @class = "form-control" }, @readonly = true })
                @Html.ValidationMessageFor(model => model.DateRange, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $('input[name="dateRangePicker'+@i'"]').daterangepicker();
        $('#dateRangePicker'+ @i'').daterangepicker({
                "showWeekNumbers": true
            }, function (start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
            });
    </script>
}

如果我删除 javascript 中的“+ @i”和 html.helper 中的“+ i”，它适用于第一行，但之后的所有行/字段都不起作用（我猜是因为脚本超出了它们的范围）。 如果我保留它们，则所有字段都不能与脚本一起使用。

动态命名它们时我做错了什么吗？

DateRangePicker 取自此处，但我也尝试了其他出现相同问题的日期选择器。

Answer 1

我不会使用 ID 来分配日期选择器，而是使用 css class （即使是未定义的，仅用于此目的）。 所以你的代码可能是这样的：

@class = "control-label col-md-2 ToBeDatePickered"

所以你可以尝试使用这个简单的选择器：

$(".ToBeDatePickered").daterangepicker();
// ... and so on...

并且 JS 代码应该在 for 语句之外，可能在 document.ready function 中，如下所示：

<script type="text/javascript">
        $(document).ready(funtion() {
             $(".ToBeDatePickered").daterangepicker();
             // ... and so on...
        });
</script>

希望这可以帮助

Answer 2

首先：此语法不正确：

@Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, htmlAttributes = new { @class = "form-control" }, @readonly = true })

它将呈现这个无用的属性： htmlAttributes它应该是：

@Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, @class= "form-control", @readonly = true })

我想这是一个错字。

第二：您应该做的是在 for 循环中生成所有 HTML，然后使用单个脚本标记立即初始化 daterangepicker 控件。 您可以使用 class 而不是使用它们的 ID 来获取所有输入。

@{
        int numOfGuests = 2;
    }
    @for (int i = 1; i <= numOfGuests; i++)
    {
        <div class="row">
            <div class="form-group">

                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, @class = "form-control custom-date-picker" , @readonly = true })
                </div>
            </div>
        </div>
    }
<script type="text/javascript">
    $('input.custom-date-picker').daterangepicker({
        "showWeekNumbers": true
    }, function (start, end, label) {
        console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    });
</script>

解释：

1. 创建日期选择器后，我向每个选择器添加一个自定义 css class: custom-date-picker picker
2. 在 for 循环呈现 HTML 之后，我创建了一个脚本标签并使用选择器.custom-date-picker获取所有输入，并从中创建 daterangepicker 控件

PS为了解释起见，我使用了您的代码的简化版本。