Blazor 组件未执行 NavManager.NavigateTo
Blazor component not executing the NavManager.NavigateTo
我遇到了一个奇怪的事情,我有一个登录屏幕,它接受两个文本框的用户名和密码的输入,它检查用户是否有帐户并返回用户 ID..
但是当我通过单击按钮调用该方法时,由于某些奇怪的原因,页面刷新并且此查询字符串弹出在我的栏上
然后代码开始执行...它也不会导航我请求的页面...
我买回的数据很好,但我显然不了解生命周期是如何工作的。有什么建议吗?
我的组件
<html>
<body>
<div class="container">
<div class="header-text">
<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;
}
问题是您在表单上使用了“提交”按钮。当您单击它们中的每一个时,都会发生 HTTP post 请求。但这不是你的本意。您想调用 ValidateUser 和 AddUserTest,但您 post 向服务器发出了无意义的 post 请求。您应该改用带有 type="button" 或 button element
的 input 元素
我遇到了一个奇怪的事情,我有一个登录屏幕,它接受两个文本框的用户名和密码的输入,它检查用户是否有帐户并返回用户 ID..
但是当我通过单击按钮调用该方法时,由于某些奇怪的原因,页面刷新并且此查询字符串弹出在我的栏上
然后代码开始执行...它也不会导航我请求的页面...
我买回的数据很好,但我显然不了解生命周期是如何工作的。有什么建议吗?
我的组件
<html>
<body>
<div class="container">
<div class="header-text">
<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;
}
问题是您在表单上使用了“提交”按钮。当您单击它们中的每一个时,都会发生 HTTP post 请求。但这不是你的本意。您想调用 ValidateUser 和 AddUserTest,但您 post 向服务器发出了无意义的 post 请求。您应该改用带有 type="button" 或 button element
的 input 元素