动态添加具有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。

@{

        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 类： custom-date-picker

2. 在 for 循环渲染 HTML 后，我创建一个脚本标记并使用选择器获取所有输入 .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">

        $(document).ready(funtion() {

             $(".ToBeDatePickered").daterangepicker();

             // ... and so on...

        });

</script>

希望这可以帮助