如何在Blazor中为不同卡片列表展示差异化模态框

1. 定义数据模型 #

先创建封装卡片与对应模态框内容的模型类，把每个卡片的展示信息和模态框差异化数据整合在一起：

public class CardModalItem
{
    public int Id { get; set; }
    public string CardTitle { get; set; }
    public string CardContent { get; set; }
    public string ModalTitle { get; set; }
    public string ModalBody { get; set; }
}

2. 组件内实现逻辑与UI #

在Blazor组件中，通过列表遍历生成卡片，绑定点击事件记录选中项，再基于选中项渲染对应模态框内容：

@inject IJSRuntime JSRuntime

<!-- 卡片列表 -->
<div class="row">
    @foreach (var item in CardModalList)
    {
        <div class="col-md-4 mb-3">
            <div class="card" style="cursor:pointer" @onclick="() => OpenModal(item)">
                <div class="card-body">
                    <h5 class="card-title">@item.CardTitle</h5>
                    <p class="card-text">@item.CardContent</p>
                </div>
            </div>
        </div>
    }
</div>

<!-- 通用模态框，根据选中项展示差异化内容 -->
<div class="modal fade" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cardModalLabel">@SelectedItem?.ModalTitle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @SelectedItem?.ModalBody
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

@code {
    private List<CardModalItem> CardModalList { get; set; }
    private CardModalItem SelectedItem { get; set; }

    protected override void OnInitialized()
    {
        // 模拟5张卡片的数据源
        CardModalList = new List<CardModalItem>
        {
            new CardModalItem { Id = 1, CardTitle = "卡片1", CardContent = "点击查看卡片1的详情", ModalTitle = "模态框1", ModalBody = "这是卡片1对应的差异化内容" },
            new CardModalItem { Id = 2, CardTitle = "卡片2", CardContent = "点击查看卡片2的详情", ModalTitle = "模态框2", ModalBody = "这是卡片2对应的差异化内容" },
            new CardModalItem { Id = 3, CardTitle = "卡片3", CardContent = "点击查看卡片3的详情", ModalTitle = "模态框3", ModalBody = "这是卡片3对应的差异化内容" },
            new CardModalItem { Id = 4, CardTitle = "卡片4", CardContent = "点击查看卡片4的详情", ModalTitle = "模态框4", ModalBody = "这是卡片4对应的差异化内容" },
            new CardModalItem { Id = 5, CardTitle = "卡片5", CardContent = "点击查看卡片5的详情", ModalTitle = "模态框5", ModalBody = "这是卡片5对应的差异化内容" }
        };
    }

    private async Task OpenModal(CardModalItem item)
    {
        SelectedItem = item;
        // 调用JS打开Bootstrap模态框
        await JSRuntime.InvokeVoidAsync("bootstrap.Modal.getOrCreateInstance", "#cardModal").InvokeAsync("show");
    }
}

3. 进阶适配说明 #

如果需要更复杂的模态框内容（比如表单、自定义组件），可以在模态框的ModalBody部分根据选中项的标识做分支判断：

<div class="modal-body">
    @if (SelectedItem.Id == 1)
    {
        <p>卡片1的专属复杂内容</p>
        <CustomComponent1 />
    }
    else if (SelectedItem.Id == 2)
    {
        <p>卡片2的专属复杂内容</p>
        <CustomComponent2 />
    }
    <!-- 其他卡片的分支逻辑 -->
</div>

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