Blazor嵌套筛选问题：选择课程后无法联动加载对应考试

问题概述 #

使用.NET Core + Blazor开发全栈项目时，添加试题页面中，选择课程后右侧下拉框无法自动加载对应考试，无法实现联动筛选。

1. 前端事件绑定冲突问题 #

核心问题 #

<InputSelect>同时使用@bind-Value和@onchange会触发事件冲突——@bind-Value内部已封装onchange处理逻辑，手动绑定会覆盖原有逻辑，导致联动方法无法正确触发。

修复代码 #

修改前端课程选择下拉框的绑定方式，改用ValueChanged回调替代@onchange：

<InputSelect Value="@_quiz.LessonId" 
             ValueChanged="@((Guid? value) => LoadExamsAsync(value))"
             ValueExpression="@(() => _quiz.LessonId)"
             class="form-control">
    <option value="0">Ders Seç</option>
    @foreach (var c in _lessonDtos)
    {
        <option value="@c.Id">@c.Name</option>
    }
</InputSelect>

同步更新LoadExamsAsync方法的参数与逻辑，增加考试ID重置：

private async Task LoadExamsAsync(Guid? lessonId)
{
    Console.WriteLine("LoadExamsAsync triggered");

    if (lessonId.HasValue && lessonId != Guid.Empty)
    {
        Console.WriteLine($"Selected LessonId: {lessonId.Value}");
        _examDtos = (await ExamApi.GetExamsByLessonId(lessonId.Value))?.ToArray() ?? Array.Empty<ExamDto>();
        // 切换课程后重置选中的考试ID，避免无效值
        _quiz.ExamId = Guid.Empty;
    }
    else
    {
        Console.WriteLine("Invalid LessonId");
        _examDtos = Array.Empty<ExamDto>();
        _quiz.ExamId = Guid.Empty;
    }
    StateHasChanged();
}

2. 后端API返回逻辑问题 #

核心问题 #

当未找到对应课程的考试时，后端控制器返回NotFound状态码，但前端API调用未处理非200响应，导致_examDtos无法被正确赋值为空数组。

修复代码 #

修改后端控制器，统一返回200状态码与空数组，而非NotFound：

[HttpGet("{lessonId:guid}")]
public async Task<IActionResult> GetExamsByLessonId(Guid lessonId, bool trackChanges)
{
    try
    {
        var exams = await _manager.ExamService.GetExamsByLessonIdAsync(lessonId, trackChanges);
        // 无论是否有数据，都返回200状态码，由前端处理空数据逻辑
        return Ok(exams);
    }
    catch (Exception ex)
    {
        return BadRequest($"An error occurred while fetching exams: {ex.Message}");
    }
}

确保前端API客户端能处理空响应：

public async Task<IEnumerable<ExamDto>> GetExamsByLessonId(Guid lessonId)
{
    var response = await _httpClient.GetFromJsonAsync<IEnumerable<ExamDto>>($"exams/{lessonId}?trackChanges=false");
    return response ?? Enumerable.Empty<ExamDto>();
}

3. 初始状态与重置逻辑补全 #

核心问题 #

页面初始化时_examDtos未初始化，导致下拉框初始状态异常；切换课程后未重置考试选中值，残留旧数据。

修复代码 #

在组件初始化方法中初始化考试列表：

protected override async Task OnInitializedAsync()
{
    _lessonDtos = await LessonApi.GetAllLessonsAsync();
    // 初始化空的考试列表
    _examDtos = Array.Empty<ExamDto>();
}

4. 调试验证步骤 #

• 打开浏览器开发者工具Network标签，确认选择课程后是否发送了正确的API请求，检查响应状态码与内容。
• 查看浏览器控制台Console输出，确认LoadExamsAsync是否触发，以及lessonId解析是否正确。
• 验证后端数据库中对应课程是否存在考试数据，确认服务层查询逻辑无误。

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