Blazor 组件未执行 NavManager.NavigateTo

Question

我遇到了一个奇怪的事情，我有一个登录屏幕，它接受两个文本框的用户名和密码的输入，它检查用户是否有帐户并返回用户 ID..

但是当我通过单击按钮调用该方法时，由于某些奇怪的原因，页面刷新并且此查询字符串弹出在我的栏上

然后代码开始执行...它也不会导航我请求的页面...

我买回的数据很好，但我显然不了解生命周期是如何工作的。有什么建议吗？

我的组件

<html>
<body>
    <div class="container">
        <div class="header-text">
            &nbsp;&nbsp;&nbsp;<img style="height:200px; width:200px" class="header-text-logo" src="/logo/WebbiSkoolsLogo.jpg" alt="logo">
            <p class="header-text-description">Student Login</p>
        </div>
        <form>
            <input type="text"
                   placeholder="Username"
                   name="username"
                   id="username"
                   @oninput="@((e) => { Username = (string)e.Value; })"
                   autofocus>
            <input type="password"
                   name="password"
                   id="password"
                   @oninput="@((e) => { Password = (string)e.Value; })"
                   placeholder="Password"
                   required>
            <button @onclick="ValidateUser" style="cursor:pointer" type="submit" name="login">Login</button>
            <button @onclick="AddUserTest" style="cursor:pointer" type="submit" name="login">Add User</button>
            <div class="text-lg-center">
                @*<p style="color:red"><h1>@Errors</h1></p>*@
            </div>
        </form>
    </div>
</body>
</html>

组件代码

@code {
    private string Username { get; set; }
    private string Password { get; set; }
    private string Errors = string.Empty;
    private int UserId = 0;
    public bool IsShow { get; set; } = false;

    private void ValidateUser()
    {

        string user = Username;
        string pass = Password;

        UserId =  TryLogin(user, pass);

        if (UserId != 0)
        {
            NavManager.NavigateTo("QuizEdit");
        }
        else
        {
            Errors = "Failed to log in";
        }

    }

代码隐藏

public int TryLogin(string user, string pass)
        {
            connectionString = Settings.Value.ConnectionString;
            Login login = new Login();
            UserId =  login.GetUserIdByUsernameAndPassword(user, pass, connectionString);
            return UserId;
        }

我的登录检查

public int GetUserIdByUsernameAndPassword(string username, string password, string connectionString)
        {
            // this is the value we will return
            int userId = 0;
            
            
            SqlConnection con = new SqlConnection(connectionString);
            using (SqlCommand cmd = new SqlCommand("SELECT UserId, Password, Guid FROM [UserDetails] WHERE username=@username", con))
            {
                cmd.Parameters.AddWithValue("@username", username);
                con.Open();
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    // dr.Read() = we found user(s) with matching username!

                    int dbUserId = Convert.ToInt32(dr["UserId"]);
                    string dbPassword = Convert.ToString(dr["Password"]);
                    string dbUserGuid = Convert.ToString(dr["Guid"]);

                    // Now we hash the UserGuid from the database with the password we wan't to check
                    // In the same way as when we saved it to the database in the first place. (see AddUser() function)
                    string hashedPassword = Security.HashSHA1(password + dbUserGuid);

                    // if its correct password the result of the hash is the same as in the database
                    if (dbPassword == hashedPassword)
                    {
                        // The password is correct
                        userId = dbUserId;
                    }
                }
                con.Close();
            }

            // Return the user id which is 0 if we did not found a user.
            return userId;
        }

Answer 1

问题是您在表单上使用了“提交”按钮。当您单击它们中的每一个时，都会发生 HTTP post 请求。但这不是你的本意。您想调用 ValidateUser 和 AddUserTest，但您 post 向服务器发出了无意义的 post 请求。您应该改用带有 type="button" 或 button element

的 input 元素

Blazor 组件未执行 NavManager.NavigateTo

Blazor component not executing the NavManager.NavigateTo

c#

asp.net-core

blazor

page-lifecycle