ASP.NET 7.0登录系统：如何在HTML页面显示登录/注册错误提示？

一、登录无效时显示错误提示 #

后端修改（OnPostLogin方法） #

在登录失败的分支中，通过ModelState添加错误信息，供前端页面读取展示：

public void OnPostLogin()
{
    string LoginUser = Request.Form["login-user"];
    string LoginPass = Request.Form["login-passwrd"];

    using (SqlConnection conn = new SqlConnection("Valid Connection String Here"))
    using (SqlCommand cmd = new SqlCommand("SELECT * FROM AccountData WHERE [User] = @1 AND [Password] = @2", conn))
    {
        cmd.Parameters.AddWithValue("@1", LoginUser);
        cmd.Parameters.AddWithValue("@2", LoginPass);

        conn.Open();
        SqlDataReader reader = cmd.ExecuteReader();

        if (reader.HasRows)
        {
            reader.Close();
            System.Diagnostics.Debug.WriteLine("We have found an account");
            // 此处添加登录逻辑，如设置Session/Cookie
        }
        else
        {
            reader.Close();
            System.Diagnostics.Debug.WriteLine("No Account Found");
            // 向ModelState添加登录失败错误信息
            ModelState.AddModelError(string.Empty, "用户名或密码错误，请重试");
        }

        conn.Close();
    }
}

前端页面修改 #

在登录表单区域添加验证提示元素，直接读取ModelState中的错误信息：

<form method="post" asp-page-handler="Login">
    <div>
        <label>用户名:</label>
        <input type="text" name="login-user" />
    </div>
    <div>
        <label>密码:</label>
        <input type="password" name="login-passwrd" />
    </div>
    <!-- 显示登录错误 -->
    <div asp-validation-summary="All" class="text-danger"></div>
    <!-- 或单独指定错误展示 -->
    @if (!ModelState.IsValid)
    {
        <div class="text-danger">@ModelState[string.Empty].Errors[0].ErrorMessage</div>
    }
    <button type="submit">登录</button>
</form>

二、注册时重复账号提示处理 #

后端修改（OnPostSignup方法） #

当检测到用户名/邮箱已存在时，通过ViewData传递提示信息；同时修正原SQL查询逻辑（将AND改为OR，确保任一信息重复都触发提示）：

public void OnPostSignup()
{
    System.Diagnostics.Debug.WriteLine("Post Request Received");

    string InputUser = Request.Form["signup-user"];
    string InputPassword = Request.Form["signup-pwd"];
    string InputEmail = Request.Form["signup-email"];

    using (SqlConnection conn = new SqlConnection("Valid Server String Here"))
    using (SqlCommand cmd = new SqlCommand("INSERT INTO AccountData ([User], [Password], [Email]) VALUES (@1, @2, @3);", conn))
    {
        cmd.Parameters.AddWithValue("@1", InputUser);
        cmd.Parameters.AddWithValue("@2", InputPassword);
        cmd.Parameters.AddWithValue("@3", InputEmail);

        // 修改SQL逻辑：检测用户名或邮箱任一重复
        using (SqlCommand UserCheck = new SqlCommand("SELECT * FROM AccountData WHERE [User] = @1 OR [Email] = @2", conn))
        {
            UserCheck.Parameters.AddWithValue("@1", InputUser);
            UserCheck.Parameters.AddWithValue("@2", InputEmail);

            conn.Open();
            SqlDataReader reader = UserCheck.ExecuteReader();
            
            if(reader.HasRows)
            {
                reader.Close();
                conn.Close();
                // 传递重复账号提示信息
                ViewData["DuplicateAccountMessage"] = "该信息对应的账号已存在，是否登录？";
            }
            else
            {
                reader.Close();
                cmd.ExecuteNonQuery();
                conn.Close();
                // 注册成功后可跳转至登录页或首页，示例：
                // Response.Redirect("/Login");
            }
        }
    }
}

前端页面修改 #

在注册表单下方添加提示区域，读取ViewData信息并提供登录跳转按钮：

<form method="post" asp-page-handler="Signup">
    <div>
        <label>用户名:</label>
        <input type="text" name="signup-user" />
    </div>
    <div>
        <label>密码:</label>
        <input type="password" name="signup-pwd" />
    </div>
    <div>
        <label>邮箱:</label>
        <input type="email" name="signup-email" />
    </div>
    <!-- 显示重复账号提示 -->
    @if (ViewData["DuplicateAccountMessage"] != null)
    {
        <div class="text-warning">
            @ViewData["DuplicateAccountMessage"]
            <button type="button" onclick="window.location.href='?handler=Login'">立即登录</button>
        </div>
    }
    <button type="submit">注册</button>
</form>

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