Blazor日历点击日期后样式更新失效问题求助

你的问题根源在于Blazor的组件渲染机制：CalendarModel是普通POCO类，未实现INotifyPropertyChanged接口。当你修改calendarModel[index].Style时，属性值虽已变更，但Blazor无法感知复杂对象内部的属性变化——Blazor默认仅检测引用类型的引用是否替换、值类型的数值是否变更，不会自动追踪对象内部属性的修改。

提供两种可行修复方式，任选其一即可：

方案1：让CalendarModel实现INotifyPropertyChanged #

这是最规范的长期解决方案，适合需要频繁修改对象属性的场景：

public class CalendarModel : INotifyPropertyChanged
{
    private string _style = "active";
    public string Style
    {
        get => _style;
        set
        {
            if (_style != value)
            {
                _style = value;
                OnPropertyChanged(nameof(Style));
            }
        }
    }

    public DateOnly Date { get; set; }
    public bool isAvailable { get; set; } = true;

    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

修改后，Style属性变更时会自动触发PropertyChanged事件，Blazor会接收通知并更新对应UI元素。

方案2：修改属性后手动调用StateHasChanged() #

若不想修改模型类，可在属性更新后强制组件重新渲染：

public async Task CalendarHasChanged(int index)
{
    calendarModel[index].Style = "color:red;";
    StateHasChanged(); // 通知Blazor重新渲染组件
    await calendarChanged.InvokeAsync(calendarModel);
}

StateHasChanged()会告知Blazor组件状态已变更，需重新计算并更新DOM。

你的代码存在一个易忽略的错误：HTML中用class="@calendarModel[index].Style"，但赋值的是内联样式字符串（如"color:red;"）。class属性应传入CSS类名，若要使用内联样式，需改为style="@calendarModel[index].Style"；若想用CSS类，应先定义对应的类（如.selected { color: red; }），再将Style属性赋值为类名（如model.Style = "selected"）。这可能是样式不生效的潜在原因之一。

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