jquery 循环和分配来自 Asp.net 核心 Razor 页面 foreach 的数据

Posted 2023-03-27

【中文标题】jquery 循环和分配来自 Asp.net 核心 Razor 页面 foreach 的数据

【英文标题】：jquery to loop and assign data from an Asp.net core Razor page foreach

【发布时间】：2021-10-13 05:25:02

【问题描述】：

我正在从表格中获取数据并将其显示为

@
        int i = 0;
    

    @foreach (var item in Model.RCACategoryMains)
    
        <div id="DivRows" class="row no-gutters mb-1">
            <div class="col-md-1">
                <span class="form-control">@Model.RCACategoryMains[i].IdRCAM</span>
            </div>
            <div class="col-md-4">
                <span id="mainData[@i]" onclick="alert(this.id)" class="form-control" >@Model.RCACategoryMains[i].Category"</span>
                <input id="inputData[@i]" type="text" class="form-control bg-white" name="selectedCategory" asp-for="RCACategoryList[i].RCACatName" name="selectedCategory[@i]" />
            </div>
            <div class="col-md-2 text-center">
                <input id="selectData[@i]" type="checkbox" name="checkBox[@i]" data-toggle="toggle" data-on="Yes" data-off="No" data- data- data-onstyle="success" data-offstyle="danger">
            </div>
        </div>
        i++;
    

如果用户勾选复选框，则 mainData 中的数据将使用 jquery 写入 inputData。我只能做一个字段，但不能循环

$(function () 
        $("#DivRows").on("change", function () 
            var dataGet = @Model.RCACategoryMains;

            var data = $("#mainData").text();
            if ($("#selectData").prop("checked") == true) 
                $("#inputData").val(data)
            
            else 
                $("#inputData").val("")
            
        );
    );

【参考方案1】：

我在一位朋友的帮助下找到了答案

$(function () 
        $("#DivRows").on("change", function () 
            $("[id^='selectData']").on("change", function () 
                var n = $(this).attr('id').split('_').pop();
                var data = $("#mainData_" + n).text();
                if ($("#selectData_" + n).prop("checked") == true) 
                    $("#inputData_" + n).val(data)
                
                else 
                    $("#inputData_" + n).val("")
                
            )
        );
    );