ASP.NET Core 2.0表单提交前验证问题咨询（新手求助）

Hey there! 很高兴看到你已经搞定了ViewModel到Razor视图的动态表单生成——这可是个很棒的起步！针对你需要验证每个分组里的问题都必须选择答案的需求，这里有几个实用的方案，都是现在ASP.NET生态里常用的做法，你可以根据自己的项目情况选择：

1. 服务器端验证（最核心，必须做） #

客户端验证可以被绕过，所以服务器端验证是确保数据合法性的最后一道防线。你可以在接收表单提交的Action里，手动遍历每个分组和问题，检查是否存在未回答的项：

首先假设你的ViewModel结构大概是这样（可以对照自己的实际结构调整）：

// 示例ViewModel结构
public class SurveyViewModel
{
    public List<QuestionGroupViewModel> Groups { get; set; }
}

public class QuestionGroupViewModel
{
    public int GroupId { get; set; }
    public string GroupName { get; set; }
    public List<QuestionViewModel> Questions { get; set; }
}

public class QuestionViewModel
{
    public int QuestionId { get; set; }
    public string QuestionText { get; set; }
    public List<string> Options { get; set; }
    public string SelectedAnswer { get; set; } // 如果是数值型答案，换成int/long即可
}

然后在Post Action里添加验证逻辑：

[HttpPost]
public IActionResult SubmitSurvey(SurveyViewModel model)
{
    // 遍历每个分组
    foreach (var group in model.Groups)
    {
        // 遍历分组内的每个问题
        foreach (var question in group.Questions)
        {
            // 根据你的答案类型调整判断条件，比如int类型检查是否为默认值0
            if (string.IsNullOrEmpty(question.SelectedAnswer))
            {
                // 给对应的字段添加错误信息，确保视图能正确显示
                var groupIndex = model.Groups.IndexOf(group);
                var questionIndex = group.Questions.IndexOf(question);
                ModelState.AddModelError(
                    $"Groups[{groupIndex}].Questions[{questionIndex}].SelectedAnswer",
                    $"请回答分组「{group.GroupName}」中的问题「{question.QuestionText}」"
                );
            }
        }
    }

    if (!ModelState.IsValid)
    {
        // 验证不通过，返回视图让用户补填
        return View(model);
    }

    // 验证通过，处理后续的业务逻辑
    return RedirectToAction("SurveyCompleted");
}

2. 客户端验证（提升用户体验） #

配合服务器端验证，添加客户端JS验证可以让用户在提交前就得到即时提示，不用等待服务器响应。在你的Razor视图里，可以给元素加上标识，然后编写简单的JS逻辑：

@model SurveyViewModel

<form asp-action="SubmitSurvey" method="post">
    <!-- 显示全局错误摘要 -->
    <div asp-validation-summary="All" class="text-danger mb-3"></div>

    @foreach (var group in Model.Groups)
    {
        <div class="question-group mb-4" data-group-name="@group.GroupName">
            <h3>@group.GroupName</h3>
            @foreach (var question in group.Questions)
            {
                <div class="question-item mb-2">
                    <p class="mb-1">@question.QuestionText</p>
                    @foreach (var option in question.Options)
                    {
                        <input type="radio" 
                               name="Groups[@Model.Groups.IndexOf(group)].Questions[@group.Questions.IndexOf(question)].SelectedAnswer" 
                               value="@option" 
                               class="question-option" />
                        <label class="me-2">@option</label>
                    }
                    <!-- 单个问题的错误提示容器 -->
                    <span class="text-danger field-validation-valid" 
                          data-valmsg-for="Groups[@Model.Groups.IndexOf(group)].Questions[@group.Questions.IndexOf(question)].SelectedAnswer" 
                          data-valmsg-replace="true"></span>
                </div>
            }
        </div>
    }

    <button type="submit" id="submit-survey" class="btn btn-primary">提交问卷</button>
</form>

<script>
document.getElementById('submit-survey').addEventListener('click', function(e) {
    let isFormValid = true;
    // 清除之前的错误提示
    document.querySelectorAll('.text-danger').forEach(el => el.textContent = '');

    // 遍历所有分组的问题
    document.querySelectorAll('.question-group').forEach(group => {
        const groupName = group.dataset.groupName;
        const questions = group.querySelectorAll('.question-item');
        
        questions.forEach(question => {
            const selectedOption = question.querySelector('.question-option:checked');
            const questionText = question.querySelector('p').textContent;
            const errorEl = question.querySelector('.text-danger');

            if (!selectedOption) {
                isFormValid = false;
                errorEl.textContent = `请回答分组「${groupName}」中的问题「${questionText}」`;
            }
        });
    });

    if (!isFormValid) {
        e.preventDefault(); // 阻止表单提交，让用户补填
    }
});
</script>

3. 自定义验证属性（更优雅的服务器端验证） #

如果你觉得在Action里写遍历代码不够优雅，可以自定义一个验证属性，直接应用在ViewModel的Groups属性上，让验证逻辑更模块化：

首先创建自定义验证属性：

public class AllQuestionsAnsweredAttribute : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var questionGroups = value as List<QuestionGroupViewModel>;
        if (questionGroups == null || !questionGroups.Any())
        {
            return ValidationResult.Success; // 根据你的业务需求，也可以视为验证不通过
        }

        var unansweredList = new List<string>();

        foreach (var group in questionGroups)
        {
            foreach (var question in group.Questions)
            {
                if (string.IsNullOrEmpty(question.SelectedAnswer))
                {
                    unansweredList.Add($"分组「{group.GroupName}」：{question.QuestionText}");
                }
            }
        }

        if (unansweredList.Any())
        {
            return new ValidationResult($"以下问题未完成回答：{string.Join("；", unansweredList)}");
        }

        return ValidationResult.Success;
    }
}

然后在ViewModel上应用这个属性：

public class SurveyViewModel
{
    [AllQuestionsAnswered(ErrorMessage = "请完成所有分组中的问题回答")]
    public List<QuestionGroupViewModel> Groups { get; set; }
}

这样你的Post Action就会简洁很多，只需要检查ModelState.IsValid即可：

[HttpPost]
public IActionResult SubmitSurvey(SurveyViewModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }

    // 处理提交逻辑
    return RedirectToAction("SurveyCompleted");
}

最后再提醒一句：永远不要依赖客户端验证，一定要保留服务器端验证，因为恶意用户可以轻松绕过客户端的JS逻辑！

内容的提问来源于stack exchange，提问作者Hans-Henrik Møller