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

Question

我使用 for 循环动态地将字段添加到表单中，效果很好。但是，我添加的字段应该是 DatePickers，并且它们也需要 javascript。我尝试为它们提供循环迭代的整数中的唯一 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

首先：这个语法不正确：@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 控件。您可以通过类获取所有输入，而不是使用它们的 id。@{&nbsp; &nbsp; &nbsp; &nbsp; int numOfGuests = 2;&nbsp; &nbsp; }&nbsp; &nbsp; @for (int i = 1; i <= numOfGuests; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-10">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, @class = "form-control custom-date-picker" , @readonly = true })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; }<script type="text/javascript">&nbsp; &nbsp; $('input.custom-date-picker').daterangepicker({&nbsp; &nbsp; &nbsp; &nbsp; "showWeekNumbers": true&nbsp; &nbsp; }, function (start, end, label) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');&nbsp; &nbsp; });</script>解释：创建日期选择器后，我向每个日期选择器添加一个自定义 css 类：&nbsp;custom-date-picker在 for 循环渲染 HTML 后，我创建一个脚本标记并使用选择器获取所有输入&nbsp;.custom-date-picker，并从中创建 daterangepicker 控件PS 为了解释起见，我使用了您的代码的简化版本。

Answer 2

我不会使用 ID 来分配日期选择器，而是使用 css 类（即使是未定义的类，仅用于此目的）。所以你的代码可能是这样的：@class = "control-label col-md-2 ToBeDatePickered"所以你可以尝试使用这个简单的选择器：$(".ToBeDatePickered").daterangepicker();// ... and so on...JS 代码应该在 for 语句之外，也许在 document.ready 函数中，如下所示：<script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(funtion() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(".ToBeDatePickered").daterangepicker();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// ... and so on...&nbsp; &nbsp; &nbsp; &nbsp; });</script>希望这可以帮助