動態添加有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為了解釋起見，我使用了您的代碼的簡化版本。