ASP.NET Core MVC项目：单选框选中项ID回传控制器的技术问询

一、当前思路的问题与优化 #

你的思路方向是对的，但有两个关键问题需要修正：

1. 单选框用错了：你现在用的radio单选框，同一组只能选一个，而你需要多选作战单位，必须改成checkbox复选框，还要给所有复选框加相同的name属性（比如name="selectedCombatants"），这样表单提交时能自动收集所有选中的ID。
2. JS代码逻辑有问题：你写的JS里有语法错误（比如comList[i.ID]应该是comList[i].ID，getElementByID漏了document.），而且完全没必要把整个模型转成JSON再遍历，直接通过选择器获取选中的复选框就行，简单得多。

二、修正后的视图代码 #

把单选框改成复选框，补充必要属性，再套上表单：

<form asp-action="SaveEncounter" method="post">
    <!-- 遭遇战名称输入框 -->
    <div class="mb-3">
        <label>遭遇战名称</label>
        <input type="text" name="EncounterName" class="form-control" required>
    </div>

    <table class="table table-striped table-bordered mr-3 ml-3">
        <thead>
            <tr>
                <th>Name</th>
                <th>Select?</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var combatant in Model)
            {
                <tr>
                    <td>@combatant.CombatantName</td>
                    <td>
                        <input type="checkbox" 
                               name="selectedCombatants" 
                               id="@combatant.ID" 
                               value="@combatant.ID">
                    </td>
                </tr>
            }
        </tbody>
    </table>

    <button type="submit" class="btn btn-primary">保存遭遇战</button>
</form>

三、把选中ID传回控制器的两种方法 #

方法1：直接表单提交（新手首选，无需JS） #

ASP.NET Core MVC的模型绑定会自动把同名复选框的选中值拼成数组，直接在控制器方法里接收就行：

// 控制器里的保存方法
[HttpPost]
public IActionResult SaveEncounter(string EncounterName, int[] selectedCombatants)
{
    // 实例化Encounter对象
    var newEncounter = new Encounter
    {
        Name = EncounterName,
        CombatantIds = selectedCombatants?.ToList() ?? new List<int>() // 整数列表属性赋值
    };

    // 保存到数据库
    _dbContext.Encounters.Add(newEncounter);
    _dbContext.SaveChanges();

    return RedirectToAction("EncounterList"); // 跳转到列表页
}

这种方法最简单，不用写JS，完全依赖MVC的自动绑定，适合你当前的情况。

方法2：AJAX异步提交（无刷新提交） #

如果想要页面不刷新就完成保存，用AJAX提交数组，先写JS逻辑：

// 给提交按钮加点击事件（假设按钮id是saveBtn）
document.getElementById('saveBtn').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认表单提交

    // 获取选中的复选框，转成ID数组
    const selectedBoxes = document.querySelectorAll('input[name="selectedCombatants"]:checked');
    const combatantIds = Array.from(selectedBoxes).map(box => parseInt(box.value));

    // 获取遭遇战名称
    const encounterName = document.querySelector('input[name="EncounterName"]').value;

    // 发送AJAX请求
    fetch('/YourControllerName/SaveEncounterAsync', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 必须带防CSRF令牌，ASP.NET Core默认生成的令牌在页面里
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify({
            EncounterName: encounterName,
            CombatantIds: combatantIds
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert('保存成功！');
            // 这里可以做页面更新，比如刷新列表
        } else {
            alert('保存失败：' + data.message);
        }
    })
    .catch(err => console.error('请求出错:', err));
});

然后控制器里需要定义一个视图模型来接收JSON数据：

// 视图模型，用来接收前端传的参数
public class EncounterCreateModel
{
    public string EncounterName { get; set; }
    public List<int> CombatantIds { get; set; }
}

// 异步保存的控制器方法
[HttpPost]
public IActionResult SaveEncounterAsync([FromBody] EncounterCreateModel model)
{
    if (!ModelState.IsValid)
    {
        return Json(new { success = false, message = "输入信息不完整" });
    }

    var newEncounter = new Encounter
    {
        Name = model.EncounterName,
        CombatantIds = model.CombatantIds
    };

    _dbContext.Encounters.Add(newEncounter);
    _dbContext.SaveChanges();

    return Json(new { success = true });
}

注意：要确保页面里有防CSRF令牌，ASP.NET Core在表单里会自动生成，或者手动加一行：@Html.AntiForgeryToken()

总结 #

• 先把单选框改成复选框，这是核心问题，否则只能选一个作战单位。
• 优先用方法1表单提交，不用写JS，对新手友好，MVC会帮你处理数组绑定。
• 如果需要无刷新体验再用AJAX，记得处理CSRF令牌，避免安全问题。

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