Blazor中点击按钮显示对应卡片文本的问题求助

你需要给每个卡片单独维护一个「文本是否可见」的状态，这样点击按钮时只切换当前卡片的状态，而不是全局修改。下面给两种可行的实现方式：

方式一：给ViewModel添加状态属性（推荐） #

如果可以修改NoteViewModel，直接给它加一个跟踪显示状态的属性：

// 修改你的NoteViewModel类
public class NoteViewModel
{
    public NoteModel NoteModel { get; set; }
    public bool IsTextVisible { get; set; } = false; // 新增：控制文本显示/隐藏
    // 其他原有属性...
}

然后更新前端Razor代码，通过@if判断控制文本区域的显示，同时修改按钮文本：

@foreach(var note in noteViewModels)
{
    <div class="m-2">
        <div class="d-flex justify-content-around" style="background-color: darkgray">
            <p>@note.NoteModel.Title</p>
            <p>@note.NoteModel.CreateDate</p>
            <div>
                <!-- 按钮文本根据状态切换 -->
                <button class="btn bg-dark text-light" @onclick="() => DetailsButtonHandler(note)">
                    @(note.IsTextVisible ? "隐藏文本" : "查看文本")
                </button>
                <button class="btn bg-dark text-light">编辑卡片</button>
            </div>
        </div>  
        <!-- 只有当IsTextVisible为true时才显示文本区域 -->
        @if(note.IsTextVisible)
        {
            <div style="background-color:lightgray;">
                <div class="m-0 p-1">
                    <p class="m-2 p-2 bg-light">@note.NoteModel.Text</p>
                </div>
            </div>
        }
    </div>
}

最后实现点击事件的处理方法：

// 组件的代码块里添加这个方法
private void DetailsButtonHandler(NoteViewModel note)
{
    // 切换当前卡片的显示状态
    note.IsTextVisible = !note.IsTextVisible;
}

方式二：用字典维护状态（不修改ViewModel） #

如果不能修改NoteViewModel，可以在组件里用字典来记录每个卡片的显示状态（假设NoteModel有唯一的Id属性）：

// 组件的代码块里声明字典
private Dictionary<int, bool> _textVisibility = new();

// 初始化时给所有卡片设置默认隐藏状态
protected override void OnInitialized()
{
    foreach(var note in noteViewModels)
    {
        _textVisibility.TryAdd(note.NoteModel.Id, false);
    }
}

private void DetailsButtonHandler(NoteViewModel note)
{
    var noteId = note.NoteModel.Id;
    // 切换当前卡片的状态
    if(_textVisibility.ContainsKey(noteId))
    {
        _textVisibility[noteId] = !_textVisibility[noteId];
    }
    else
    {
        _textVisibility.Add(noteId, true);
    }
}

对应的前端Razor代码修改：

@foreach(var note in noteViewModels)
{
    <div class="m-2">
        <div class="d-flex justify-content-around" style="background-color: darkgray">
            <p>@note.NoteModel.Title</p>
            <p>@note.NoteModel.CreateDate</p>
            <div>
                <button class="btn bg-dark text-light" @onclick="() => DetailsButtonHandler(note)">
                    @(_textVisibility.TryGetValue(note.NoteModel.Id, out var visible) && visible ? "隐藏文本" : "查看文本")
                </button>
                <button class="btn bg-dark text-light">编辑卡片</button>
            </div>
        </div>  
        @if(_textVisibility.TryGetValue(note.NoteModel.Id, out var visible) && visible)
        {
            <div style="background-color:lightgray;">
                <div class="m-0 p-1">
                    <p class="m-2 p-2 bg-light">@note.NoteModel.Text</p>
                </div>
            </div>
        }
    </div>
}

为什么之前的CSS操作没生效？ #

你之前尝试的CSS操作大概率是全局修改了某个类的显示状态，导致所有卡片的文本都被影响。而上面的方法是给每个卡片单独绑定状态，只会对点击的卡片生效。

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