按下按钮时，Blazor服务器应用程序中的输入字段不绑定

Question

我在我的应用程序中遇到了奇怪的行为，当我在PC上调试它时，它运行良好，当我将它发布到Azure时，当我按下"登录"按钮时，密码输入不绑定。要绑定它，我必须单击其他位置，然后按"登录"按钮。这是我的代码：

<AuthorizeView>
<Authorized>
<b>Hello, @context.User.Identity.Name!</b>
<a class="ml-md-auto btn btn-primary"
href="/logout?returnUrl=/"
target="_top">Logout</a>
</Authorized>
<NotAuthorized>
<input type="text"
placeholder="User Name"
@bind="@Username" />
&nbsp;&nbsp;
<input type="password"
placeholder="Password"
@bind="@Password" />
<a class="ml-md-auto btn btn-primary"
href="/login?paramUsername=@encode(@Username)&paramPassword=@encode(@Password)"
target="_top">Login</a>
@code {
string Username = "";
string Password = "";
private string encode(string param)
{
return HttpUtility.UrlEncode(param);
}
}

Answer 1

之所以会发生这种情况，是因为只有当您将注意力集中在输入之外时才会设置该值，因此您应该使用在每次按键时更新该值的方法。

<input 
type="password"
placeholder="Password"
@bind="@Password" 
@bind:event="oninput" // update value on every key press
/>