Динамически добавлять поля, которые имеют javascript, чтобы сформировать

Question

Я добавил поля в мою форму динамически, используя for-l oop, который отлично работает. Однако поля, которые я добавляю, должны быть DatePickers, и они также требуют javascript. Я пытался дать им уникальный идентификатор из целого числа, через которое проходит цикл, но, похоже, он их не находит?

Это представление:

@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>
}

Если я удаляю "+ @i" в javascript и "+ i" в html .helper это работает для первой строки, но все строки / поля после не работают (я думаю, потому что скрипт находится за пределами их области видимости) , Если я сохраню их, ни одно из полей не будет работать со сценарием.

Что-то не так, когда я их динамически называю или что-то в этом роде?

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 })

Я думаю, это опечатка.

Секунда: Что вам нужно сделать, это сгенерировать все ваши HTML в for для l oop и использовать один тег-скрипт после этого для инициализации daterangepicker контролирует сразу. Вы можете получить все входные данные с классом вместо того, чтобы использовать их идентификаторы.

@{
        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. При создании сборщиков даты я добавляю к каждому custom css class: custom-date-picker
2. После того, как for l oop рендерит HTML, я создаю тег сценария и получаю все входные данные с помощью селектора .custom-date-picker и создаю из них элементы управления daterangepicker

PS Я использовал упрощенную версию вашего кода для объяснения.

Answer 2

Я бы не использовал идентификатор для назначения указателя даты, а только класс 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>

Надеюсь, это поможет