C# Blazor点击按钮返回HTTP 400错误，执行函数后如何停留在原页面？

问题根因 #

你的代码中使用了原生HTML <form> 标签并设置了method="post"，同时登录按钮类型为submit，点击时浏览器会触发默认表单提交行为，直接向当前地址发送POST请求。Blazor应用默认未处理传统表单提交请求，因此返回400错误，同时页面会重载。

可选解决方案 #

方案1：使用Blazor原生EditForm组件（官方推荐） #

EditForm是Blazor内置的表单组件，自带数据绑定、验证能力，默认不会触发浏览器原生提交行为，适配Blazor的交互逻辑：

1. 先新增登录模型类LoginModel.cs：

public class LoginModel
{
    public string Email { get; set; }
    public string Password { get; set; }
    public bool RememberMe { get; set; }
}

2. 修改Login.razor代码：

@page "/"
@using 你的项目命名空间.Models

<div id="login">
    <h3 class="text-center text-white pt-5">Login form</h3>
    <div class="container">
        <div id="login-row" class="row justify-content-center align-items-center">
            <div id="login-column" class="col-md-6">
                <div id="login-box" class="col-md-12">
                    <EditForm Model="@_loginModel" OnValidSubmit="@LoginBTN">
                        <h3 class="text-center text-info">Login</h3>
                        <div class="form-group">
                            <label for="email" class="text-info">Email:</label><br>
                            <InputText @bind-Value="@_loginModel.Email" id="email" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="password" class="text-info">Password:</label><br>
                            <InputText type="password" @bind-Value="@_loginModel.Password" id="password" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="remember-me" class="text-info">
                                <span>Remember me</span> 
                                <span><InputCheckbox @bind-Value="@_loginModel.RememberMe" id="remember-me" /></span>
                            </label><br>
                            <button class="btn btn-info btn-md" type="submit">Login</button>
                        </div>
                        <div id="register-link" class="text-right">
                            <a href="/Register" class="text-info">Register here</a>
                        </div>
                    </EditForm>
                </div>
            </div>
        </div>
    </div>
</div>

3. 修改Login.razor.cs代码：

using System;
using System.Threading.Tasks;
using 你的项目命名空间.Models;

namespace W3SHARE_Interface.Pages.Authentication
{
    public partial class Login
    {
        private readonly LoginModel _loginModel = new();
        
        private void LoginBTN()
        {
            // 此处编写登录逻辑，例如调用后端认证接口
        }
    }
}

方案2：轻量修改原生表单，阻止默认提交行为 #

如果不想调整现有代码结构，只需要做两处修改即可：

1. 给原生form标签添加@onsubmit:preventDefault属性，禁用浏览器默认提交行为：

<form id="login-form" class="form" action="" method="post" @onsubmit:preventDefault>

2. 将登录按钮的type从submit改为button，避免触发表单提交：

<input name="submit" class="btn btn-info btn-md" value="Login" type="button" @onclick="LoginBTN">

额外优化建议：密码输入框建议将type设置为password，避免输入内容明文显示。

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