Razor Pages登录失败后保留表单输入值的实现问题咨询

核心思路：避免重定向，直接返回页面（优先推荐） #

登录失败时不要用 RedirectToPage，因为重定向会触发新的 GET 请求，导致原有表单数据丢失。直接返回 Page() 就能保留用户输入值和验证状态，同时解决初始加载显示验证信息的问题。

具体代码实现 #

1. 定义登录模型类

public class LoginModel
{
    [Required(ErrorMessage = "请输入用户名")]
    public string Username { get; set; }

    [Required(ErrorMessage = "请输入密码")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

2. AccountModel 后台逻辑

public class AccountModel : PageModel
{
    // 默认 SupportsGet = false，GET 请求不会绑定该属性，避免初始加载触发验证
    [BindProperty]
    public LoginModel LoginInput { get; set; }

    public void OnGet()
    {
        // 初始加载时无需额外操作，LoginInput 为 null，不会触发验证
    }

    public IActionResult OnPost()
    {
        // 先验证表单格式
        if (!ModelState.IsValid)
        {
            // 格式验证失败，直接返回页面，保留用户输入值
            return Page();
        }

        // 执行实际登录验证逻辑（替换为你的业务代码）
        bool loginSuccess = false;
        if (!loginSuccess)
        {
            // 登录失败，添加全局错误信息，返回页面保留输入值
            ModelState.AddModelError(string.Empty, "用户名或密码错误");
            return Page();
        }

        // 登录成功，跳转主页
        return RedirectToPage("/Index");
    }
}

3. Account 页面视图

@page
@model AccountModel

<h1>登录</h1>

<!-- 显示全局错误信息 -->
@if (!ModelState.IsValid)
{
    <div class="alert alert-danger">
        @Html.ValidationSummary(false, "", new { @class = "text-danger" })
    </div>
}

<form method="post">
    <div class="form-group">
        <label asp-for="LoginInput.Username"></label>
        <input asp-for="LoginInput.Username" class="form-control" />
        <span asp-validation-for="LoginInput.Username" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="LoginInput.Password"></label>
        <input asp-for="LoginInput.Password" class="form-control" />
        <span asp-validation-for="LoginInput.Password" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
</form>

特殊场景：必须重定向时的处理 #

如果业务要求必须用 RedirectToPage，可以通过 TempData 序列化传递登录模型：

修改 AccountModel 的 OnPost 和 OnGet 方法

public void OnGet()
{
    // 从 TempData 中取出登录失败时的表单数据
    if (TempData.ContainsKey("FailedLoginModel"))
    {
        LoginInput = JsonSerializer.Deserialize<LoginModel>(TempData["FailedLoginModel"].ToString());
        // 手动添加错误信息到 ModelState
        ModelState.AddModelError(string.Empty, "用户名或密码错误");
    }
}

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    bool loginSuccess = false;
    if (!loginSuccess)
    {
        // 序列化登录模型存入 TempData
        TempData["FailedLoginModel"] = JsonSerializer.Serialize(LoginInput);
        return RedirectToPage("./Account");
    }

    return RedirectToPage("/Index");
}

关键注意点 #

• [BindProperty] 默认 SupportsGet = false，确保初始 GET 请求不会绑定属性，避免页面刚加载就显示验证错误。
• 优先使用 return Page() 而非重定向，这是 Razor Pages 处理表单提交失败的标准方式，能自动保留表单状态。

内容的提问来源于stack exchange，提问作者amir parsa rezaie