Blazor页面加载时下拉框选中值不显示问题排查

问题核心 #

你的代码中导航、数据过滤、URI均正常，但下拉框显示空白，点击后默认选中第一个值，本质是DateTime类型与option字符串值的绑定匹配失败，加上参数更新时的逻辑冲突导致选中状态未正确同步。

修复方案 #

1. 统一日期格式，解决类型匹配问题 #

Blazor的@bind处理DateTime与select的option值时，依赖字符串格式完全一致。你当前option用ToShortDateString()，而导航和参数用yyyy-MM-dd，格式不统一导致绑定无法匹配选中项。

将option的value改为和参数、导航一致的yyyy-MM-dd格式：

<select @bind="SelectedDate" class="form-select form-control-lg">
    @foreach (var date in StartOfWeekDates)
    {
        <option value="@date.ToString("yyyy-MM-dd")">@date.ToShortDateString()</option>
    }
</select>

2. 修正参数更新逻辑，避免重复导航 #

OnParametersSetAsync中直接赋值SelectedDate会触发其setter里的NavigateTo，导致不必要的导航循环，同时可能覆盖正确的选中状态。改为直接设置私有字段selectedDate：

protected override async Task OnParametersSetAsync()
{
    if (!string.IsNullOrEmpty(StartDate) && DateTime.TryParse(StartDate, out DateTime date))
    {
        selectedDate = date.Date; // 只保留日期部分，和StartOfWeekDates的元素匹配
    }
    else if (StartOfWeekDates.Any())
    {
        selectedDate = StartOfWeekDates.FirstOrDefault().Date;
    }
}

3. 确保选中值的日期部分完全匹配 #

StartOfWeekDates中的元素是Date类型（无时间部分），所以初始化和参数解析时，要将selectedDate转为Date，避免时间部分导致匹配失败：

protected override async Task OnInitializedAsync()
{
    // ... 原有代码 ...

    if (!string.IsNullOrEmpty(StartDate) && DateTime.TryParse(StartDate, out DateTime date))
    {
        selectedDate = date.Date;
    }
    else if (StartOfWeekDates.Any())
    {
        selectedDate = StartOfWeekDates.FirstOrDefault().Date;
    }
}

4. 优化SelectedDate的setter逻辑 #

确保导航时的格式和option一致，同时避免重复导航：

public DateTime SelectedDate 
{ 
    get { return selectedDate; } 
    set 
    { 
        if (selectedDate.Date != value.Date) // 比较日期部分
        {
            selectedDate = value.Date;
            NavigationManager.NavigateTo($"/timesheet-dashboard/{selectedDate:yyyy-MM-dd}");
        }
    } 
}

完整修改后的代码片段 #

@page "/timesheet-dashboard"
@page "/timesheet-dashboard/{StartDate}"

@inject IJSRuntime JSRuntime
@using valkyrie.Services.Timesheets
@using valkyrie.Services.Crm;
@inject TimesheetService TimesheetService;
@inject DealService DealService;
@inject TimesheetRecordService TimesheetRecordService;
@inject IHttpContextAccessor HttpContextAccessor
@inject NavigationManager NavigationManager
@rendermode InteractiveServer

<div class="container">
    <div class="col-lg-4 mx-auto pb-3">
        <select @bind="SelectedDate" class="form-select form-control-lg">
            @foreach (var date in StartOfWeekDates)
            {
                <option value="@date.ToString("yyyy-MM-dd")">@date.ToShortDateString()</option>
            }
        </select>
    </div>
</div>

@code {
    [Parameter]
    public string StartDate { get; set; }

    private DateTime selectedDate;
    public DateTime SelectedDate 
    { 
        get { return selectedDate; } 
        set 
        { 
            if (selectedDate.Date != value.Date) 
            {
                selectedDate = value.Date;
                NavigationManager.NavigateTo($"/timesheet-dashboard/{selectedDate:yyyy-MM-dd}");
            }
        } 
    }

    private List<DateTime> StartOfWeekDates { get; set; } = new();
     
    protected override async Task OnInitializedAsync()
    {
        DateTime someStartDate = DateTime.Now.AddDays(-30);
        DateTime someEndDate = DateTime.Now;

        var records = TimesheetRecordService.GetAllTimesheetRecords();
    
        StartOfWeekDates = records
            .Where(rec => rec.Timesheet != null && 
                          rec.Timesheet.StartOfWeekDate >= someStartDate && 
                          rec.Timesheet.StartOfWeekDate <= someEndDate)
            .Select(rec => rec.Timesheet.StartOfWeekDate.Date)
            .Distinct()
            .OrderBy(date => date)
            .ToList();

        if (!string.IsNullOrEmpty(StartDate) && DateTime.TryParse(StartDate, out DateTime date))
        {
            selectedDate = date.Date;
        }
        else if (StartOfWeekDates.Any())
        {
            selectedDate = StartOfWeekDates.FirstOrDefault().Date;
        }
    }

    protected override async Task OnParametersSetAsync()
    {
        if (!string.IsNullOrEmpty(StartDate) && DateTime.TryParse(StartDate, out DateTime date))
        {
            selectedDate = date.Date;
        }
        else if (StartOfWeekDates.Any())
        {
            selectedDate = StartOfWeekDates.FirstOrDefault().Date;
        }
    }
}

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