ASP.NET Core 6.0 Razor Page日期输入框默认显示今日且提交后保留选中值

问题根源 #

当前代码的问题在于：

• JS中的initialLoad始终为true，导致每次页面加载（包括提交后刷新）都会强制重置为今日日期
• 后端未将用户提交的日期传递回视图，无法在回发后保留选中值

后端（Search.cshtml.cs）修改 #

添加绑定属性并处理初始值与提交值：

public class SearchModel : PageModel
{
    [BindProperty]
    public string Date { get; set; }

    public void OnGet()
    {
        // 首次访问时设置为今日日期（适配input date的ISO格式：yyyy-MM-dd）
        Date = DateTime.Today.ToString("yyyy-MM-dd");
    }

    public void OnPostData()
    {
        // 直接使用绑定后的Date属性，无需从Request.Form手动获取
        // string selectedDate = Date;
        // 执行你的搜索逻辑
    }
}

前端（Search.cshtml）修改 #

绑定后端属性值，移除冗余JS代码：

<table>
    <tr>
        <td><label>Date</label></td>
        <td><input type="date" id="date" name="date" value="@Model.Date" /></td>
        <td><button type="submit" id="btnSearch" asp-page-handler="Data">Search</button></td>
    </tr>
</table>

原理说明 #

1. 首次访问页面时，OnGet方法触发，将Date设为今日日期，前端通过@Model.Date渲染到输入框
2. 用户选择日期提交后，[BindProperty]会自动将表单值绑定到Date属性，页面回发渲染时，输入框会显示用户选中的日期
3. 这种方式依托Razor Pages的模型绑定机制，比纯JS方案更可靠，避免了页面刷新时的逻辑冲突

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