问题描述
我有一个奇怪的现象，我有一个登录屏幕，它需要输入两个文本框的用户名和密码，它会检查用户是否有帐户并带回用户 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，但是您向服务器发送了一个毫无意义的发送请求。您应该改为使用带有 type="button" 或 button 元素的 input 元素