Blazor Web Assembly模态弹窗输入框绑定失败问题求助

核心问题定位 #

1. 双向绑定语法错误：输入框的bind="_password"缺少Blazor要求的@前缀，导致输入值无法绑定到_password变量，始终为空。
2. SHA1哈希计算错误：SHA1.Create(_password)用法错误，该方法不接受字符串参数，需先将字符串转为字节数组再计算哈希。
3. UI状态未主动更新：修改提示信息的类名后，未调用StateHasChanged()触发组件重新渲染，错误提示可能无法及时显示。

修正后的代码 #

前端Razor部分 #

<div class="simple-form">
<div class="form-group">
    <label class="form-label">Password</label>
    <!-- 修正双向绑定语法，添加@前缀 -->
    <input type="password" class="form-control" placeholder="Password" @bind="_password"/>
    <label class="@_pwordIncorrect alert alert-danger" role="alert">Password incorrect, try again!</label>
    <label class="@_pwordRequired alert alert-danger" role="alert">Password is required</label>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success" @onclick="Login">Login</button>
</div>
</div>

C#逻辑部分 #

[CascadingParameter] BlazoredModalInstance ModalInstance { get; set; }

private string _password = string.Empty;
private string _pwordIncorrect = "d-none";
private string _pwordRequired = "d-none";

private async Task Login()
{
    if (string.IsNullOrEmpty(_password))
    {
        _pwordRequired = "";
        _pwordIncorrect = "d-none"; // 重置另一个提示状态
    }
    else
    {
        _pwordRequired = "d-none";
        _pwordIncorrect = "d-none"; // 重置错误提示
        
        // 修正SHA1哈希计算逻辑
        using var sha1 = SHA1.Create();
        byte[] passwordBytes = Encoding.UTF8.GetBytes(_password);
        byte[] hashBytes = sha1.ComputeHash(passwordBytes);
        string hashString = BitConverter.ToString(hashBytes).Replace("-", "").ToLowerInvariant();
        
        bool ok = await TerritoryDataStore.CheckDoNotCallPasswordsAsync(hashString);
        if (ok)
        {
            await ModalInstance.CloseAsync(ModalResult.Ok(true));
        }
        else
        {
            _pwordIncorrect = "";
        }
    }
    // 触发UI状态更新，确保提示信息及时显示
    StateHasChanged();
}

额外说明 #

• 调试时的Microsoft.VisualStudio.Shared.VSCodeDebugProtocol.ProtocolException通常是绑定失效导致调试器无法正确跟踪变量状态，修复绑定语法后该异常大概率会消失。
• 使用using语句包裹SHA1.Create()，确保哈希对象正确释放资源。
• 每次验证时重置所有提示的状态，避免多个错误提示同时显示的混乱。

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