第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

動態(tài)添加具有javascript的字段,以形成

動態(tài)添加具有javascript的字段,以形成

慕運(yùn)維8079593 2023-12-04 16:59:19
我使用 for 循環(huán)動態(tài)地將字段添加到表單中,效果很好。但是,我添加的字段應(yīng)該是 DatePickers,并且它們也需要 javascript。我嘗試為它們提供循環(huán)迭代的整數(shù)中的唯一 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”,它適用于第一行,但之后的所有行/字段都不起作用(我猜是因?yàn)槟_本超出了其范圍)。如果我保留它們,則所有字段都不適用于該腳本。動態(tài)命名它們時(shí)我做錯(cuò)了什么嗎?DateRangePicker 取自此處,但我也嘗試過發(fā)生相同問題的其他日期選擇器。
查看完整描述

2 回答

?
九州編程

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊

首先:這個(gè)語法不正確:


@Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, htmlAttributes = new { @class = "form-control" }, @readonly = true })

它將呈現(xiàn)這個(gè)無用的屬性:htmlAttributes它應(yīng)該是:


@Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, @class= "form-control", @readonly = true })

我想這是一個(gè)錯(cuò)字。


其次: 您應(yīng)該做的是在 for 循環(huán)中生成所有 HTML,然后使用單個(gè)腳本標(biāo)記立即初始化 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. 創(chuàng)建日期選擇器后,我向每個(gè)日期選擇器添加一個(gè)自定義 css 類: custom-date-picker

  2. 在 for 循環(huán)渲染 HTML 后,我創(chuàng)建一個(gè)腳本標(biāo)記并使用選擇器獲取所有輸入 .custom-date-picker,并從中創(chuàng)建 daterangepicker 控件

PS 為了解釋起見,我使用了您的代碼的簡化版本。


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

TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊

我不會使用 ID 來分配日期選擇器,而是使用 css 類(即使是未定義的類,僅用于此目的)。所以你的代碼可能是這樣的:


@class = "control-label col-md-2 ToBeDatePickered"

所以你可以嘗試使用這個(gè)簡單的選擇器:


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

// ... and so on...

JS 代碼應(yīng)該在 for 語句之外,也許在 document.ready 函數(shù)中,如下所示:


<script type="text/javascript">

        $(document).ready(funtion() {

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

             // ... and so on...

        });

</script>

希望這可以幫助


查看完整回答
反對 回復(fù) 2023-12-04
  • 2 回答
  • 0 關(guān)注
  • 150 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號