ASP.NET Core MVC视图中如何实现未选全单选按钮的错误提示？

1. 定义带整体验证逻辑的视图模型 #

用ASP.NET Core MVC原生的IValidatableObject接口实现模型级验证，一次性检查所有单选按钮对应的属性是否有选中值，这样后端能兜底验证，避免用户绕过前端校验。

假设你的单选按钮对应模型里的多个属性，比如Question1、Question2、Question3，代码示例：

public class RadioGroupViewModel : IValidatableObject
{
    // 对应每组单选按钮的选中值，可根据实际类型调整（比如枚举、int等）
    public string Question1 { get; set; }
    public string Question2 { get; set; }
    public string Question3 { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        // 列出需要检查的单选按钮属性
        var requiredProps = new[] { nameof(Question1), nameof(Question2), nameof(Question3) };
        foreach (var propName in requiredProps)
        {
            var propValue = validationContext.ObjectType.GetProperty(propName)?
                .GetValue(validationContext.ObjectInstance)?.ToString();
            
            if (string.IsNullOrWhiteSpace(propValue))
            {
                // 错误信息关联到对应属性，同时会在ValidationSummary中显示
                yield return new ValidationResult("所有单选按钮必须选中", new[] { propName });
            }
        }
    }
}

2. 视图绑定单选按钮并配置验证显示 #

在视图中绑定模型属性，添加ValidationSummary统一展示错误，同时可给每组单选按钮添加单独的错误提示：

@model RadioGroupViewModel

<!-- 顶部显示所有验证错误 -->
@Html.ValidationSummary(true, "", new { @class = "alert alert-danger" })

<form asp-action="SaveRadioData" method="post">
    <!-- 第一组单选按钮 -->
    <div class="mb-3">
        <label class="form-label">问题1</label>
        <div>
            <input type="radio" asp-for="Question1" value="选项A" /> 选项A
            <input type="radio" asp-for="Question1" value="选项B" /> 选项B
            <!-- 单独显示当前组的错误 -->
            @Html.ValidationMessageFor(m => m.Question1, "", new { @class = "text-danger" })
        </div>
    </div>

    <!-- 第二组单选按钮 -->
    <div class="mb-3">
        <label class="form-label">问题2</label>
        <div>
            <input type="radio" asp-for="Question2" value="是" /> 是
            <input type="radio" asp-for="Question2" value="否" /> 否
            @Html.ValidationMessageFor(m => m.Question2, "", new { @class = "text-danger" })
        </div>
    </div>

    <!-- 第三组单选按钮 -->
    <div class="mb-3">
        <label class="form-label">问题3</label>
        <div>
            <input type="radio" asp-for="Question3" value="1" /> 选项1
            <input type="radio" asp-for="Question3" value="2" /> 选项2
            <input type="radio" asp-for="Question3" value="3" /> 选项3
            @Html.ValidationMessageFor(m => m.Question3, "", new { @class = "text-danger" })
        </div>
    </div>

    <button type="submit" class="btn btn-primary">提交（保存）</button>
</form>

3. 控制器中处理模型验证 #

在提交动作里检查ModelState.IsValid，验证失败直接返回视图，错误信息会自动渲染：

public class HomeController : Controller
{
    [HttpGet]
    public IActionResult RadioPage()
    {
        return View(new RadioGroupViewModel());
    }

    [HttpPost]
    public IActionResult SaveRadioData(RadioGroupViewModel model)
    {
        if (!ModelState.IsValid)
        {
            // 验证失败，返回原视图展示错误
            return View("RadioPage", model);
        }

        // 验证通过，执行保存逻辑
        // ...

        return RedirectToAction("SaveSuccess");
    }
}

4. 可选：添加前端即时验证 #

为提升用户体验，引入ASP.NET Core默认的jQuery Unobtrusive Validation，实现前端即时校验，不用回发服务器。只需在视图底部添加脚本引用：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

方案优势 #

• 后端兜底：即使用户禁用前端JS，后端验证依然能拦截不合法数据，确保数据完整性。
• 原生集成：复用ASP.NET Core MVC自带的验证体系，无需额外第三方库，代码易维护。
• 体验友好：既支持顶部统一提示，也支持单组按钮的错误提示，同时前端即时校验减少用户等待。

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