Blazor EditForm中DateTime输入值无法绑定，导航时URL参数始终为默认值的问题

看起来你遇到了Blazor EditForm里InputDate双向绑定不生效，提交后始终获取默认日期的问题，我来帮你梳理可能的原因和解决办法：

一、核心问题分析 #

你的代码逻辑框架是对的，但几个细节问题可能导致绑定失效：

1. 模型默认值包含时间部分，和InputDate的纯日期处理逻辑不匹配
2. 组件可能使用静态渲染模式（SSR），不支持客户端双向交互
3. 模型验证未通过，导致OnValidSubmit未执行

二、分步解决办法 #

1. 修正模型默认值为纯日期

DateTime.Now包含时分秒，而InputDate组件仅处理日期部分，这种类型差异可能导致绑定更新异常。把模型默认值替换为DateTime.Today：

public class BookingSearchModel
{
    [Required]
    [DataType(DataType.Date)]
    public DateTime CheckIn { get; set; } = DateTime.Today; // 替换DateTime.Now

    [Required]
    [DataType(DataType.Date)]
    public DateTime CheckOut { get; set; } = DateTime.Today.AddDays(1);
}

2. 启用组件的交互式渲染模式

如果你的项目是.NET 8+的Blazor SSR默认模板，静态组件不支持双向绑定，需要在组件顶部添加交互式渲染声明：

@inject NavigationManager Navigation
@rendermode InteractiveServer <!-- 新增：启用Server端交互式渲染 -->

<EditForm Model="@searchModel" OnValidSubmit="Submit" FormName="BookingForm" class="book_now">
    <!-- 原有表单内容保持不变 -->
</EditForm>

@code {
    // 原有代码保持不变
}

提示：如果是WebAssembly项目，可改用@rendermode InteractiveWebAssembly

3. 排查模型验证问题

检查页面上的<ValidationSummary />是否显示错误信息（比如日期格式问题）。如果验证失败，OnValidSubmit不会触发，你可以临时改用OnSubmit并手动验证：

<EditForm Model="@searchModel" OnSubmit="Submit" FormName="BookingForm" class="book_now">

然后在Submit方法中添加手动验证逻辑：

private void Submit()
{
    var validationContext = new ValidationContext(searchModel);
    var validationResults = new List<ValidationResult>();
    bool isValid = Validator.TryValidateObject(searchModel, validationContext, validationResults, true);

    if (isValid)
    {
        var url = $"/available-rooms?checkIn={searchModel.CheckIn:yyyy-MM-dd}&checkOut={searchModel.CheckOut:yyyy-MM-dd}";
        Navigation.NavigateTo(url);
    }
    else
    {
        // 打印验证错误，排查问题
        foreach (var result in validationResults)
        {
            Console.WriteLine($"Validation Error: {result.ErrorMessage}");
        }
    }
}

4. 可选：改用可空日期类型（DateTime?）

InputDate组件内部默认适配可空日期类型，改为DateTime?可以避免非可空类型的绑定兼容性问题：

public class BookingSearchModel
{
    [Required(ErrorMessage = "Check-in date is required")]
    [DataType(DataType.Date)]
    public DateTime? CheckIn { get; set; } = DateTime.Today;

    [Required(ErrorMessage = "Check-out date is required")]
    [DataType(DataType.Date)]
    public DateTime? CheckOut { get; set; } = DateTime.Today.AddDays(1);
}

三、验证测试 #

修改完成后：

1. 运行项目，选择新日期，观察页面上的Entered date: @searchModel.CheckIn是否实时更新
2. 点击提交按钮，检查URL参数是否为你选择的目标日期

内容来源于stack exchange