Blazor Wasm修改内容无法加载问题求助

核心原因 #

Blazor的UI更新依赖状态变更通知机制，你的问题源于两点：

1. List<T>是普通集合，添加/移除元素时不会自动触发Blazor的UI更新；
2. ToDoItem的属性（比如EstaCompletado）变更时，因未实现INotifyPropertyChanged，UI无法感知到变化。

修复步骤 #

1. 解决集合变更不触发UI更新的问题

有两种可选方案：

方案一：手动触发状态变更

在AddToDo方法末尾添加StateHasChanged()，手动通知Blazor更新UI：

private void AddToDo()
{
    if(!string.IsNullOrWhiteSpace(nuevoTitulo))
    {
        toDos.Add(new ToDoItem { 
            Titulo = nuevoTitulo, 
            Contenido = nuevoContenido , 
            FechaEntrega = new DateOnly(2022,1,31)
        });
        nuevoTitulo = string.Empty;
        StateHasChanged(); // 手动触发UI更新
    }
}

方案二：使用可观察集合

将List<ToDoItem>替换为ObservableCollection<ToDoItem>，它会自动在集合变更时触发通知：
首先在Razor页面顶部添加命名空间：

@using System.Collections.ObjectModel

然后修改集合定义：

private ObservableCollection<ToDoItem> toDos = new(); 

使用该方案后，无需手动调用StateHasChanged()，添加元素时UI会自动刷新。

2. 解决属性变更不触发UI更新的问题

修改ToDoItem类，实现INotifyPropertyChanged接口，确保属性值变化时UI同步更新：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class ToDoItem : INotifyPropertyChanged
{
    public int TodoItemId { get; set; }

    private string? _titulo;
    public string? Titulo 
    { 
        get => _titulo;
        set => SetField(ref _titulo, value);
    }

    private string? _contenido;
    public string? Contenido 
    { 
        get => _contenido;
        set => SetField(ref _contenido, value);
    }

    public string? Responsable { get; set; }
    public List<string> Etiquetas { get; set; } = new List<string>();

    private DateOnly? _fechaEntrega;
    public DateOnly? FechaEntrega 
    { 
        get => _fechaEntrega;
        set => SetField(ref _fechaEntrega, value);
    }

    public TimeOnly? HoraEntrega { get; set; }

    private bool _estaCompletado;
    public bool EstaCompletado 
    { 
        get => _estaCompletado;
        set => SetField(ref _estaCompletado, value);
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected bool SetField<T>(ref T field, T value, [CallerMemberName] string? propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

额外排查点 #

• 强制刷新浏览器（Ctrl+F5），清除缓存避免加载旧资源；
• 执行项目清理+重新生成（右键项目 → 清理 → 生成），确认无隐藏编译错误；
• 如果是Blazor Server模式，检查SignalR连接状态；WASM模式则确认客户端静态资源已更新。

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