ASP.NET MVC仅提交选中课程至CourseSelected及单选框校验问题

一、解决「未选择课程时生成空CourseSelected数据」的问题 #

核心思路 #

不要提前为所有课程渲染CourseSelected的表单字段，而是仅当课程复选框被选中时，动态生成对应的学制单选框及绑定字段，取消选中时移除对应DOM结构，这样未选中的课程不会产生任何表单数据，提交时自然不会出现空条目。

具体实现 #

1. 视图基础结构
   遍历所有课程生成复选框，每个复选框绑定唯一课程ID标识，预留容器用于动态插入学制单选框区域：

   @model StudentViewModel
   
   <form asp-action="Submit" method="post">
       <!-- 课程选择区域 -->
       <div id="course-container">
           @foreach (var course in Model.Courses)
           {
               <div class="course-item">
                   <input type="checkbox" id="course-@course.Id" data-course-id="@course.Id" />
                   <label for="course-@course.Id">@course.Name</label>
                   <!-- 动态插入学制单选框的容器 -->
                   <div id="duration-container-@course.Id" class="duration-container" style="display:none;"></div>
               </div>
           }
       </div>
   
       <button type="submit">提交</button>
   </form>
   

2. JavaScript动态控制字段生成
   监听复选框的change事件，选中时生成带正确绑定路径的单选框字段，取消时清空容器：

   document.querySelectorAll('input[type="checkbox"][data-course-id]').forEach(checkbox => {
       checkbox.addEventListener('change', function() {
           const courseId = this.dataset.courseId;
           const container = document.getElementById(`duration-container-${courseId}`);
           
           if (this.checked) {
               // 用当前选中课程的数量作为索引，避免字段绑定冲突
               const selectedCount = document.querySelectorAll('input[type="checkbox"][data-course-id]:checked').length;
               const fieldHtml = `
                   <div class="duration-options">
                       <input type="radio" name="StudentViewModel.CourseSelecteds[${selectedCount-1}].Duration" value="1年" id="duration-${courseId}-1" />
                       <label for="duration-${courseId}-1">1年</label>
                       <input type="radio" name="StudentViewModel.CourseSelecteds[${selectedCount-1}].Duration" value="2年" id="duration-${courseId}-2" />
                       <label for="duration-${courseId}-2">2年</label>
                       <!-- 隐藏字段存储课程ID -->
                       <input type="hidden" name="StudentViewModel.CourseSelecteds[${selectedCount-1}].CourseId" value="${courseId}" />
                   </div>
               `;
               container.innerHTML = fieldHtml;
               container.style.display = 'block';
           } else {
               container.innerHTML = '';
               container.style.display = 'none';
           }
       });
   });
   

   这样只有选中的课程才会生成CourseSelecteds对应的表单字段，未选中的课程不会产生任何相关数据，提交后ViewModel里的CourseSelecteds集合只会包含选中的课程条目。

二、实现「选中课程时对应单选框必填」的校验逻辑 #

1. 前端校验（即时反馈） #

在表单提交前，遍历所有选中的课程复选框，检查对应学制单选框是否有选中项：

document.querySelector('form').addEventListener('submit', function(e) {
    let isValid = true;
    document.querySelectorAll('input[type="checkbox"][data-course-id]:checked').forEach(checkbox => {
        const courseId = checkbox.dataset.courseId;
        const durationRadios = document.querySelectorAll(`#duration-container-${courseId} input[type="radio"]`);
        const isDurationSelected = Array.from(durationRadios).some(radio => radio.checked);
        
        if (!isDurationSelected) {
            isValid = false;
            alert(`请选择课程「${document.querySelector(`label[for="course-${courseId}"]`).textContent}」的学制`);
            // 添加错误样式提示
            checkbox.parentElement.classList.add('error');
        } else {
            checkbox.parentElement.classList.remove('error');
        }
    });
    
    if (!isValid) {
        e.preventDefault(); // 阻止表单提交
    }
});

2. 后端校验（安全兜底） #

在StudentViewModel的CourseSelecteds集合中，对每个CourseSelected条目添加条件校验，确保只要存在CourseId（即课程被选中），Duration字段就不能为空：

public class StudentViewModel
{
    public List<Course> Courses { get; set; }
    public List<CourseSelected> CourseSelecteds { get; set; } = new List<CourseSelected>();
}

public class CourseSelected
{
    public int CourseId { get; set; }
    
    [RequiredIf(nameof(CourseId), ErrorMessage = "选中课程必须选择学制")]
    public string Duration { get; set; }
}

如果使用.NET框架，可自定义RequiredIf特性，或在控制器提交方法中手动校验：

[HttpPost]
public IActionResult Submit(StudentViewModel model)
{
    foreach (var selected in model.CourseSelecteds)
    {
        if (selected.CourseId != 0 && string.IsNullOrEmpty(selected.Duration))
        {
            ModelState.AddModelError($"CourseSelecteds[{model.CourseSelecteds.IndexOf(selected)}].Duration", "选中课程必须选择学制");
        }
    }
    
    if (!ModelState.IsValid)
    {
        // 重新加载课程数据返回视图
        model.Courses = _courseService.GetAllCourses();
        return View(model);
    }
    
    // 后续业务逻辑处理
    return RedirectToAction("Success");
}

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