ASP.NET Core Razor页面登录验证失败如何保留输入并弹出提示？

要实现保留输入内容+弹出验证提示，可以通过ASP.NET Core的ModelState机制和页面绑定来处理，分两步修改：

1. 重构后端PageModel代码 #

放弃直接读取Request.Form，改用属性绑定+ModelState记录错误，返回页面时会自动保留用户输入：

// 在PageModel类中添加绑定属性
[BindProperty]
public string EmailAddress { get; set; }

[BindProperty]
public string Password { get; set; }

public async Task<IActionResult> OnPostButton_Login()
{
    // 检查输入并添加验证错误
    if (string.IsNullOrEmpty(EmailAddress))
    {
        ModelState.AddModelError("EmailAddress", "请输入邮箱地址");
    }
    if (string.IsNullOrEmpty(Password))
    {
        ModelState.AddModelError("Password", "请输入密码");
    }

    // 存在验证错误时直接返回页面，输入值会被自动保留
    if (!ModelState.IsValid)
    {
        return Page();
    }

    // 验证通过后执行登录逻辑
    await GetUser(EmailAddress, Password);

    return Page();
}

2. 修改前端页面代码 #

用asp-for绑定输入框，同时添加验证提示组件，既自动回填输入值，又能显示错误提示：

<!-- 显示所有验证错误的汇总提示 -->
<div asp-validation-summary="All" class="text-danger"></div>

<form method="post">
    <div>
        <label>邮箱:</label>
        <!-- asp-for绑定后，返回页面时自动填充用户之前的输入 -->
        <input asp-for="EmailAddress" type="email" />
        <!-- 显示单个字段的错误提示 -->
        <span asp-validation-for="EmailAddress" class="text-danger"></span>
    </div>
    <div>
        <label>密码:</label>
        <input asp-for="Password" type="password" />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    <button type="submit" asp-page-handler="Button_Login">登录</button>
</form>

原理说明 #

• [BindProperty]标记的属性会自动从表单请求绑定值，返回页面时这些值会存在ModelState中，通过asp-for绑定的输入框会自动读取并回填。
• ModelState.AddModelError用于记录验证错误，前端的asp-validation-summary和asp-validation-for组件会自动读取并展示这些提示信息。

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