UI 元素仅在焦点从原始按钮/输入移开时更新

Posted 2023-03-27

【中文标题】UI 元素仅在焦点从原始按钮/输入移开时更新

【英文标题】：UI Elements only update when focus is moved away from original button/input

【发布时间】：2022-01-10 22:54:28

【问题描述】：

我遇到了一个问题，我按下一个按钮，服务器会给出响应，但 UI 不会更新以显示我为它设置的响应，直到我开始与其他东西交互。似乎无法弄清楚是什么原因造成的。一直在检查代码，在 UI 布局方面进行了更改，但似乎没有任何效果。我这里有一个 gif 来更好地演示。我尝试过使用StateHasChanged，但这似乎也不起作用

剃刀页面

<EditForm Model="@AssignUser" OnValidSubmit="@AddUserToProject">

@*    <DataAnnotationsValidator />*@
<div class="form-group">
    <label class="custom-control-label"> Assign Users </label>
    <InputText placeholder="Username" id="inlineFormInputGroup" type="email" @bind-Value="@AssignUser.UserName" class="form-control" />

    <button type="submit" class="btn btn-success">Add</button>
</div>
</EditForm>
//display messages depending on outcome
@if (userNotFoundError == true)

    <div class="alert alert-danger" role="alert">
        User could not be found
    </div>


@if (userExistsAlready == true)

    <div class="alert alert-danger" role="alert">
        User is already on the project
    </div>

将用户添加到项目功能

private bool userNotFoundError = false;
private bool userExistsAlready = false;
private async void AddUserToProject()

    try
    
        var response = await Http.PutAsJsonAsync($"Projects/add/User/AssignUser.UserName/projectItem.ProjectId", AssignUser);

        // Attempt add adding someone who is already on the project?
        if (response.StatusCode == HttpStatusCode.Forbidden)
        
            StateHasChanged();

            if (userNotFoundError == true)
            
                userNotFoundError = false;
            
            userExistsAlready = true;

            
        
// Attempt at adding someone who does not exist as a user?
        else if (response.StatusCode == HttpStatusCode.BadRequest)
        
            StateHasChanged();

            if (userExistsAlready == true)
            
                userExistsAlready = false;
            
            userNotFoundError = true;
        
        else
        
            var content = await response.Content.ReadAsStringAsync();
            var userobject = JsonConvert.DeserializeObject<ApplicationUser>(content);
            response.EnsureSuccessStatusCode();
            Navigation.NavigateTo("/projects");
            userNotFoundError = false;
            userExistsAlready = false;
            StateHasChanged();
        

    
    catch (Exception e)
    
        userNotFoundError = true;
    

在控制器中添加用户功能

[HttpPut("add/User/userName/projID")]
public async Task<IActionResult> AddUserToProject(string userName, Guid projID)


    var project = _context.Projects.Include(u => u.AssignedUsersToProject).FirstOrDefault(p => p.ProjectId.ToString().Equals(projID.ToString()));

    try
    
        var user = _context.Users.First(u => u.UserName.Equals(userName));

        if (!project.AssignedUsersToProject.Any(u => u.UserName.Equals(user.UserName)))  
            project.AssignedUsersToProject.Add(user);                    
         else
        
            return Forbid();
        
    
    catch (InvalidOperationException)
    
        return BadRequest();
    

    try
    
        await _context.SaveChangesAsync();
    
    catch (DbUpdateConcurrencyException)
    
        if (!ProjectExists(projID))
        
            return NotFound();
        
        else
        
            throw;
        
    

    return NoContent();

【问题讨论】：

问题几乎完成，但我们看不到您在哪里/如何显示错误。这可能很重要。

感谢您的建议。我已更新帖子以显示此内容。

错误代码看起来没问题 - 那一定只是异步无效。

【参考方案1】：

改变

private async void AddUserToProject()

到

private async Task AddUserToProject()

它应该可以工作。

然后您还可以删除所有那些 StateHasChanged() 调用，它们不再有任何用途。

Blazor 不知道 async void 何时完成。当您使用 async Task 方法时，Blazor 将在该方法完成时自动重新呈现您的 UI。

但我确实怀疑显示错误还有另一个问题。 StateHasChanged() 调用应该已经“修复”了大多数分支的 async void。

【讨论】：

有一个简单的规则：避免异步无效。将为您省去很多麻烦。