Blazor应用中Radzen Dialog Service失效，点击按钮无弹窗如何解决？

以下是导致弹窗无法弹出的几个常见原因及对应修复方案：

1. 未注入DialogService #

Blazor中Radzen的DialogService需要通过依赖注入获取，你的代码中未显示注入步骤，需在代码块顶部添加注入代码：

@inject Radzen.DialogService DialogService

2. 未在布局中添加RadzenDialog组件 #

Radzen弹窗需要全局的<RadzenDialog />组件承载才能渲染，必须在主布局文件（如MainLayout.razor）中添加该组件，通常放在布局根容器内：

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<!-- 添加RadzenDialog组件 -->
<RadzenDialog />

3. 弹窗内按钮的Click绑定语法错误 #

你代码中弹窗内的RadzenButton的Click事件使用双引号包裹lambda表达式，会被解析为字符串而非委托，需改为@()绑定：

<RadzenButton Text="Ok" Click=@(() => ds.Close(true)) Class="mr-1" Style="width: 80px;" />
<RadzenButton Text="Cancel" Click=@(() => ds.Close(false)) ButtonStyle="ButtonStyle.Secondary" Class="mr-1" />

修复后的完整代码示例 #

@inject Radzen.DialogService DialogService

<RadzenDataGridColumn TItem="IDictionary<string, object>" Title="Modify">
    <Template>
        <RadzenButton ButtonStyle="ButtonStyle.Info" Icon="edit" Class="m-1" Click=@EditSkill/>
    </Template>
</RadzenDataGridColumn>

@code{
    async Task EditSkill()
    {
     await DialogService.OpenAsync("Edit Skill", ds =>
        @<RadzenCard>
          <div>
            <p class="mb-4">Skill ID <b>1</b></p>
            <div class="row">
                <div class="col">
                    <RadzenButton Text="Ok" Click=@(() => ds.Close(true)) Class="mr-1" 
                        Style="width: 80px;" />
                    <RadzenButton Text="Cancel" Click=@(() => ds.Close(false)) 
                        ButtonStyle="ButtonStyle.Secondary" Class="mr-1" />
                </div>
            </div>
        </div>
        </RadzenCard>);
    }
}

优先确认前两点（注入服务和添加布局组件），这是Radzen弹窗最容易遗漏的配置项，按步骤调整后即可正常触发弹窗。

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