如何在Blazor WebAssembly应用中获取输入文本并存储至本地及用户列表

需求：在Blazor WebAssembly应用的Index.razor页面中，获取输入框中的文本，通过DataModel数据模型将其保存到本地存储，并将ID添加至users列表。

原始代码 #

Index.razor page

<EditForm Model="@_loginData" OnSubmit="HandleLogin" class="login-form">
  <input type="text" placeholder="Enter ID" name="psw" id="psw" runat="server" ClientIdMode="static" form="form" required>

  @if(errorMessage)
  {
      <div class="mb-3">
          <h5 style="color: red">You Are Already Logged In.You Are going to be redirected to the Alert Page in a second.</h5>
      </div>
  }

         <button type="submit" class="loginlink">Log in</button>
 
</EditForm>

private DataModel data = new DataModel();

private List<string> users = new List<string>();

string smstext = Guid.NewGuid().ToString("n").Substring(0, 4);


public class DataModel
 {

     public int Id { get; set; }

     public string UserId { get; set; }

     public string SMSCode { get; set; }

     public string Token { get; set; }
   
 }

 private async void HandleLogin()
 {

     var currentId = await LocalStorage.GetItemAsync<string>("id");

     if(currentId!=null)
     {
         var user = users.Contains(currentId);

         Console.WriteLine(currentId);

         Console.WriteLine(users);

         await Task.Delay(1700);
         errorMessage = true;
         NavManager.NavigateTo("/products");
     }
     else 
     {  
         Random rnd = new Random();
         int num = rnd.Next(1);

         var randomId = Guid.NewGuid().ToString();
         await LocalStorage.SetItemAsync<int>("id", num);
         await LocalStorage.SetItemAsync<string>("userId", randomId);
         await AuthStateProvider.GetAuthenticationStateAsync();

         NavManager.NavigateTo("/yourpage");

     }

代码问题分析 #

1. 输入框未与DataModel属性绑定，无法获取用户输入的ID
2. _loginData变量未定义，EditForm的Model绑定无效
3. 未将输入的ID添加到users列表，也未持久化该列表
4. 本地存储操作类型不匹配：存入int类型的id，却用string类型读取
5. 使用async void处理提交事件，Blazor中推荐用async Task避免生命周期问题
6. users列表仅存在于内存，页面刷新后数据丢失

修正后的代码 #

@page "/"
@inject ILocalStorageService LocalStorage
@inject NavigationManager NavManager

<EditForm Model="@_dataModel" OnSubmit="HandleLoginAsync" class="login-form">
    <!-- 绑定DataModel的UserId属性，获取用户输入的ID -->
    <InputText @bind-Value="_dataModel.UserId" placeholder="Enter ID" class="form-control" required />

    @if (_showErrorMessage)
    {
        <div class="mb-3">
            <h5 style="color: red">您已登录，将在1.7秒后跳转到提示页面</h5>
        </div>
    }

    <button type="submit" class="loginlink">登录</button>
</EditForm>

@code {
    private DataModel _dataModel = new DataModel();
    private List<string> _users = new List<string>();
    private bool _showErrorMessage;
    private string _smsCode = Guid.NewGuid().ToString("n").Substring(0, 4);

    public class DataModel
    {
        public int Id { get; set; }
        public string UserId { get; set; }
        public string SMSCode { get; set; }
        public string Token { get; set; }
    }

    protected override async Task OnInitializedAsync()
    {
        // 初始化时从本地存储加载users列表
        _users = await LocalStorage.GetItemAsync<List<string>>("users") ?? new List<string>();
        // 加载已保存的用户数据
        var savedData = await LocalStorage.GetItemAsync<DataModel>("userData");
        if (savedData != null)
        {
            _dataModel = savedData;
        }
    }

    private async Task HandleLoginAsync()
    {
        // 检查输入的UserId是否为空
        if (string.IsNullOrWhiteSpace(_dataModel.UserId))
        {
            return;
        }

        // 检查当前用户是否已在users列表中
        if (_users.Contains(_dataModel.UserId))
        {
            _showErrorMessage = true;
            await Task.Delay(1700);
            NavManager.NavigateTo("/products");
            return;
        }

        // 填充DataModel的其他字段
        _dataModel.Id = new Random().Next(1000, 9999); // 生成随机ID
        _dataModel.SMSCode = _smsCode;

        // 将DataModel保存到本地存储
        await LocalStorage.SetItemAsync("userData", _dataModel);

        // 将UserId添加到users列表并保存到本地存储
        _users.Add(_dataModel.UserId);
        await LocalStorage.SetItemAsync("users", _users);

        // 跳转到目标页面
        NavManager.NavigateTo("/yourpage");
    }
}

关键修改说明 #

• 用InputText组件绑定_dataModel.UserId，实现输入框数据双向绑定
• 初始化时从本地存储加载users列表，保证数据持久化
• 将async void改为async Task，符合Blazor事件处理规范
• 统一本地存储操作类型，直接保存完整的DataModel对象
• 添加输入合法性检查，确保UserId不为空
• 修正重复登录判断逻辑，直接检查users列表是否包含当前输入的UserId

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