如何在ASP.NET Core Razor页面传递复选框选中文本到Action结果

问题概述 #

在ASP.NET Core Razor页面开发中，已实现复选框选中ID数组的传递，但复选框旁的选中文本无法传递到后端。调试时后端Action的string[] classidsText参数始终为null，问题出在获取文本的代码——原代码试图通过next('label')获取文本，但实际复选框后并未使用<label>标签，文本直接放在input元素之后。

后端代码 #

public JsonResult OnGetSubAccountClassName(string[] classIds, string[] classidsText)
{
    var assetsSubAccountName = _IAssetsService.GetJdeAssetSubAccountClassName(classIds);
    AssetCountGeneration.JDEAssetSubAccountClassNameDetails = assetsSubAccountName;
    return new JsonResult(assetsSubAccountName);
}

前端原代码 #

复选框状态监听与AJAX请求 #

$(document).on('change', '.classCheckbox', function () {
    var selectedClassIds = [];
    var selectedClassText = [];
    $('.classCheckbox:checked').each(function () {
        selectedClassIds.push($(this).val());
        selectedClassText.push($(this).next('label').text()); // 此处出错：无label标签
    });
    console.log("selected items" + selectedClassIds)
    if (selectedClassIds.length > 0) {
        $.ajax({
            url: '?handler=SubAccountClassName',
            type: 'GET',
            traditional: true,
            data: { classIds: selectedClassIds, classidsText: selectedClassText },
            success: function (response) {
                $('#subClassesList').empty();
                $('#subClassesContainer').show();
               
                var subClassesContainer = $('<div data-class-id="' + selectedClassIds + '"></div>');
                $.each(response, function (i, item) {
                    $(subClassesContainer).append('<input type="checkbox" class="subclassCheckbox" name="selectedSubClasses" value="' + item.subClassAccountId + '" /> ' + item.subClassAccountName + '<br />');
                });
                $('#subClassesList').append(subClassesContainer);
            }
        });
    }
});

复选框列表生成代码 #

$('#btnDisplay').click(function (event) {
    event.preventDefault();
    var dropdown = $('#accountclassname-select');
    dropdown.empty();
  
    $.ajax({
        url: '?handler=AccountClassName',
        type: "GET",
        dataType: "json",
        success: function (response) {
            $('#classesContainer').show();
            $('#classesList').html(''); // 清空现有内容
            $('#classesList').append('<input type="checkbox" class="classCheckbox" value="0" /> All <br />');
            $.each(response, function (i, classes) {
                $('#classesList').append('<input type="checkbox" class="classCheckbox" value="' + classes.classAccountId + '" /> ' + classes.classAccountName + '<br />');
            });
           
        }
    });
});

解决方案 #

方案1：不修改DOM结构，直接获取文本节点 #

将获取选中文本的代码替换为直接读取input元素后的兄弟文本节点内容：

selectedClassText.push($(this).get(0).nextSibling.nodeValue.trim());

方案2：修改DOM结构，使用label标签包裹文本（推荐，提升可访问性） #

1. 修改复选框生成代码，将文本放入<label>标签并与复选框关联：

$('#classesList').append('<input type="checkbox" class="classCheckbox" id="class_' + classes.classAccountId + '" value="' + classes.classAccountId + '" /> <label for="class_' + classes.classAccountId + '">' + classes.classAccountName + '</label><br />');

2. 保持原获取文本的代码，添加trim()去除多余空格：

selectedClassText.push($(this).next('label').text().trim());

验证 #

修改后，selectedClassText数组将正确获取选中复选框的文本内容，AJAX请求会将文本数组传递到后端，classidsText参数将不再为null。

内容的提问来源于stack exchange，提问作者ahmed abdelaziz