向Razor Pages提交含动态字段的表单：数据捕获方案问询

方法1：渲染控件时将问题ID嵌入name属性（最小改动） #

在JS动态渲染问题控件时，给控件的name属性设置为包含问题ID的格式（这属于渲染逻辑的微调，不算重构表单）：

// 示例：渲染单行文本问题
const input = document.createElement('input');
input.type = 'text';
input.dataset.questionid = question.id;
input.name = `answer_${question.id}`; // 核心：把问题ID嵌入name属性
form.appendChild(input);

后端读取表单时，遍历键值对拆分出问题ID和对应答案：

// C# 示例代码
var answers = new Dictionary<int, string>();
foreach (var key in Request.Form.Keys)
{
    // 处理普通单项答案
    if (key.StartsWith("answer_"))
    {
        if (int.TryParse(key.Substring(7), out int questionId))
        {
            answers[questionId] = Request.Form[key];
        }
    }
    // 处理多选问题
    else if (key.StartsWith("multi_answer_"))
    {
        if (int.TryParse(key.Substring(13), out int questionId))
        {
            // 多选可能有多个选中值，用GetValues获取全部
            var selectedValues = Request.Form.GetValues(key);
            answers[questionId] = string.Join(",", selectedValues);
        }
    }
}

带评论项的问题可将评论控件的name设为comment_${questionId}，后端按同样逻辑拆分处理。

方法2：用隐藏域传递控件与问题ID的映射（无需修改现有控件name） #

如果不想改动现有控件的name，可在渲染完章节后添加隐藏域，存储当前章节内控件name与data-questionid的映射：

// JS渲染章节后生成映射隐藏域
const controlMappings = Array.from(form.querySelectorAll('[data-questionid]')).map(el => ({
    controlName: el.name,
    questionId: el.dataset.questionid
}));
const hiddenMapping = document.createElement('input');
hiddenMapping.type = 'hidden';
hiddenMapping.name = `chapter_mapping_${chapter.id}`;
hiddenMapping.value = JSON.stringify(controlMappings);
form.appendChild(hiddenMapping);

后端先解析映射关系，再关联表单值：

// C# 示例代码
var questionMappings = new List<(string ControlName, int QuestionId)>();
// 读取所有章节的映射数据
foreach (var key in Request.Form.Keys)
{
    if (key.StartsWith("chapter_mapping_"))
    {
        var mappingJson = Request.Form[key];
        var mappings = JsonSerializer.Deserialize<List<(string ControlName, int QuestionId)>>(mappingJson);
        questionMappings.AddRange(mappings);
    }
}
// 关联答案与问题ID
var answers = new Dictionary<int, string>();
foreach (var mapping in questionMappings)
{
    if (Request.Form.ContainsKey(mapping.ControlName))
    {
        // 处理多选等多值情况
        if (Request.Form[mapping.ControlName].Count > 1)
        {
            answers[mapping.QuestionId] = string.Join(",", Request.Form.GetValues(mapping.ControlName));
        }
        else
        {
            answers[mapping.QuestionId] = Request.Form[mapping.ControlName];
        }
    }
}

方法3：解析原始表单数据（极端情况应急方案） #

如果完全无法修改前端代码，可读取Request的原始表单数据，结合前端控件的固定渲染规则关联问题ID（此方法稳定性差，仅作最后手段）：

// C# 示例：读取原始表单数据
using var reader = new StreamReader(Request.Body);
var rawForm = await reader.ReadToEndAsync();
var formItems = rawForm.Split('&')
                       .Select(pair => pair.Split('='))
                       .Select(arr => (
                           Name: Uri.UnescapeDataString(arr[0]),
                           Value: Uri.UnescapeDataString(arr[1])
                       ));
// 需根据前端控件的命名规则（如按问题顺序命名）手动关联问题ID，示例假设控件name为q1、q2对应问题ID1、2
foreach (var item in formItems)
{
    if (item.Name.StartsWith("q"))
    {
        if (int.TryParse(item.Name.Substring(1), out int questionId))
        {
            // 存入对应问题的答案
        }
    }
}

特殊问题类型补充处理 #

• Upload文件：文件控件name嵌入问题ID，后端通过Request.Form.Files获取文件，关联对应的questionId。
• YesNo类型：用单选按钮组时，确保所有选项的name一致且带问题ID，后端直接读取选中值即可。

内容的提问来源于stack exchange，提问作者Logany-hi