我完全懂你的需求——点击按钮后弹出一个带动态内容（比如从数据库取的code）的弹窗，之前试Blazor Modal踩了坑没成功，就想要个简单能用的方案对吧？下面给你几个不同层级的选项，按需选择就行：

方案一：最简单的原生HTML弹窗（零依赖，快速实现） #

这个方案不需要任何第三方库，用纯HTML+CSS+Blazor绑定就能搞定，适合快速满足需求：

1. 在你的Blazor组件页面里，添加弹窗的HTML结构，用布尔变量控制显示/隐藏；
2. 编写按钮点击事件，从数据库获取code后触发弹窗显示。

<!-- 弹窗主体 + 遮罩层 -->
@if (IsPopupVisible)
{
    <!-- 半透明遮罩层，防止弹窗后点击页面其他元素 -->
    <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999;"></div>
    
    <!-- 弹窗内容 -->
    <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 1000;">
        <p>Hello this is your @DatabaseCode</p>
        <button @onclick="() => IsPopupVisible = false" style="margin-top: 1rem; padding: 0.5rem 1rem; cursor: pointer;">关闭</button>
    </div>
}

<!-- 触发弹窗的按钮 -->
<button @onclick="ShowCodePopup" style="padding: 0.5rem 1rem;">显示验证码</button>

@code {
    // 控制弹窗显示状态的变量
    private bool IsPopupVisible { get; set; } = false;
    // 存储从数据库获取的code
    private string DatabaseCode { get; set; } = string.Empty;

    private async Task ShowCodePopup()
    {
        // 替换成你实际从数据库查询code的逻辑
        DatabaseCode = await FetchCodeFromDatabase();
        // 显示弹窗
        IsPopupVisible = true;
    }

    // 模拟数据库查询方法，实际项目中替换为你的数据库操作
    private Task<string> FetchCodeFromDatabase()
    {
        // 这里用你之前的Guid生成示例，实际换成从数据库取数据的逻辑
        var smsCode = Guid.NewGuid().ToString("n").Substring(0, 4);
        return Task.FromResult(smsCode);
    }
}

这个方案的好处是完全不需要额外依赖，代码简单易懂，调试起来也方便，适合快速验证需求。

方案二：用SweetAlert2实现美观弹窗（修复你之前的代码问题） #

你之前尝试用SweetAlert但没成功，大概率是服务没注册或者用了async void导致的问题，下面给你修正后的完整步骤：

1. 首先通过NuGet安装SweetAlert2的Blazor包：Install-Package SweetAlert2.Blazor；
2. 在Program.cs里注册SweetAlert服务：

   builder.Services.AddSweetAlert2();
   

3. 在组件中注入服务，并且把async void改成async Task（Blazor中尽量避免async void，会导致生命周期异常）：

@inject ISweetAlertService SweetAlertServ

<button @onclick="SMSCodePopUp" style="padding: 0.5rem 1rem;">显示SMS验证码</button>

@code {
    private async Task SMSCodePopUp()
    {
        // 从数据库获取code，替换成你的实际查询逻辑
        var smsText = await FetchCodeFromDatabase();
        // 如果你需要用到token，保留这段，不需要可以删掉
        var token = Guid.NewGuid().ToString("n").Substring(4, 9);

        await SweetAlertServ.FireAsync(new SweetAlertOptions
        {
            Title = "Confirmation",
            Text = $"SMS Code {smsText}",
            Icon = SweetAlertIcon.Warning,
            ShowCancelButton = true,
            ConfirmButtonText = "Got It"
        });
    }

    private Task<string> FetchCodeFromDatabase()
    {
        var smsCode = Guid.NewGuid().ToString("n").Substring(0, 4);
        return Task.FromResult(smsCode);
    }
}

按照这个步骤来，应该就能解决你之前弹窗不显示的问题了，SweetAlert2的弹窗自带美观的样式和交互，适合需要更好用户体验的场景。

总结 #

• 如果追求最快实现、零依赖，选方案一的原生HTML弹窗；
• 如果想要美观的交互样式，选方案二的SweetAlert2，只要确保服务注册正确、用async Task替代async void就能正常工作。

备注：内容来源于stack exchange，提问作者DimitriTfb