ASP.NET Core MVC：未保存单选框值时返回验证及跨表单取值问题

问题1：能否直接使用返回链接实现POST请求及单选框值的服务端ModelState验证？ #

不能直接用原生<a>标签实现，因为<a>默认发起GET请求，无法携带表单控件的POST参数。如果要避免使用JavaScript，推荐以下简洁方案：

方案：将返回“链接”改为主表单的提交按钮（样式模拟链接） #

把顶部的返回链接替换成主表单的提交按钮，通过CSS将按钮样式调整为链接外观，点击时提交主表单并带上单选框的值，后端用不同的Handler区分“保存”和“返回前验证”逻辑。

修改后的HTML：

<div class="width-container">
    <!-- 用提交按钮模拟链接，通过form属性关联主表单 -->
    <button type="submit" form="aform" asp-page-handler="ValidateBeforeBack" class="back-link-button">All Subjects</button>
</div>

<div class=formgroup>
    <form method="post" id="aform" novalidate>
       <!-- 原单选框代码不变 -->
       <div class="radios__item">
           <input class="radio_input" id="FirstRadio" asp-for="RadioValues" type="radio" value="1">
           Physics
       </div>
       <div class="radios__item">
           <input class="radio_input" id="SecondRadio" asp-for="RadioValues" type="radio" value="2">
           Chemistry
       </div>
       <div class="radios__item">
           <input class="radio_input" id="ThirdRadio" asp-for="RadioValues" type="radio" value="3">
           Biology
       </div>
                  
       <div class="button-group">
            <button id="save-button" type="submit" asp-page-handler="UpdateSubjects">Confirm subject</button>
       </div>
    </form>
</div>

添加CSS模拟链接样式：

.back-link-button {
    background: none;
    border: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}
.back-link-button:hover {
    color: #0056b3;
}

后端代码：

// 处理返回前的验证逻辑
public async Task<IActionResult> OnPostValidateBeforeBackAsync(SubjectModel model)
{
    // 执行ModelState服务端验证
    if (!ModelState.IsValid)
    {
        // 验证不通过，返回当前页面保留用户修改的单选框值
        return Page();
    }

    // 验证通过（或用户未修改值），跳转回目标页面
    return RedirectToPage("/Subjects");
}

// 原保存逻辑不变
public async Task<IActionResult> OnPostUpdateSubjectsAsync(SubjectModel model)
{
    if (ModelState.IsValid)
    {
        // 写入数据库的逻辑
        await _subjectRepository.UpdateAsync(model);
        return RedirectToPage("/Subjects");
    }
    return Page();
}

问题2：若使用第二个表单的返回按钮，如何在其对应的Post方法中获取第一个表单的单选框值？ #

HTML中两个独立表单提交时不会互相携带控件值，不使用JavaScript的话无法获取用户修改后的单选框值——因为用户修改的值仅存在于浏览器端，未提交到服务器，第二个表单提交时不会包含这些数据。

如果必须保留第二个表单，只能通过少量JavaScript同步值：

1. 在第二个表单中添加对应单选框的隐藏字段
2. 监听单选框的变更事件，将选中值同步到隐藏字段
3. 提交第二个表单时，隐藏字段的值会被传到后端

修改后的第二个表单：

<form method="post" id="validate--form" novalidate>
    <input type="hidden" name="RadioValues" id="hidden-radio-value" value="@Model.RadioValues">
    <div class="button-group">
        <button class="button" id="back-validation-button" type="submit" asp-page-handler="ValidationSubject">All applications</button>
    </div>
</form>

添加同步值的JS：

document.querySelectorAll('input[name="RadioValues"]').forEach(radio => {
    radio.addEventListener('change', function() {
        document.getElementById('hidden-radio-value').value = this.value;
    });
});

后端代码：

public async Task<IActionResult> OnPostValidationSubjectAsync(SubjectModel model)
{
    // 现在可以通过model.RadioValues获取用户修改后的单选框值
    if (!ModelState.IsValid)
    {
        return Page();
    }
    return RedirectToPage("/Subjects");
}

如果严格遵循“尽量少用JS”的要求，优先选择问题1中的方案，无需额外脚本即可实现需求。

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