亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

動態添加具有javascript的字段,以形成

動態添加具有javascript的字段,以形成

慕運維8079593 2023-12-04 16:59:19
我使用 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 取自此處,但我也嘗試過發生相同問題的其他日期選擇器。
查看完整描述

2 回答

?
九州編程

TA貢獻1785條經驗 獲得超4個贊

首先:這個語法不正確:


@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 為了解釋起見,我使用了您的代碼的簡化版本。


查看完整回答
反對 回復 2023-12-04
?
慕斯709654

TA貢獻1840條經驗 獲得超5個贊

我不會使用 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>

希望這可以幫助


查看完整回答
反對 回復 2023-12-04
  • 2 回答
  • 0 關注
  • 156 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號