Radzen Blazor Dialog doesn't close

Question

I have an issue when use dialog.Close of Radzen.Blazor. I did all step in get started of blazor.radzen

• Open the Shared/MainLayout.razor file and include , , and
• Open the Startup.cs file (server-side Blazor) or Program.cs (client-side WebAssembly Blazor) and add DialogService, NotificationService, ContextMenuService and TooltipService.

The problem is when I open dialog, it open. Then I click in Button submit or Button Cancel to trigger dialog.Close(data) (Button Submit) and dialog.Close(false) (Button Cancel) it still run in function Submit/Close but it doesn't close dialog. I try to find but can see any error.

This is my code I use this to open dialog var result = await OpenAsync("Thêm mới", @Form);

This is Open Async Task<dynamic> OpenAsync(string title, RenderFragment<TItem> content) => dialog.OpenAsync<WrapperForm<TItem>>(title, new Dictionary<string, object> { { "Content", content }, { "Data", null } }, FormOption ?? new DialogOptions() { Width = "700px", Top = "30px" });

This is my WrapperForm

@typeparam TItem

<div class="row">
    @Content(Data)
</div>

@code {
    [Parameter] public RenderFragment<TItem> Content { set; get; }
    [Parameter] public TItem Data { set; get; }   
}

This is component @Form i pass into OpenAsync

@using QuanLyKiemDinh.Components

@using QuanLyKiemDinh.Helpers

@inject QuanLyKiemDinhContext dbContext
@inject Radzen.DialogService dialog

<FormBase Data="@capVanban" TItem="tbCapVanBan" Submit="@Submit" Cancel="@Cancel">
    <Items>
        <FormItem Label="Tên cấp" SM="12">
            <Item>
                <RadzenTextBox @bind-Value="@capVanban.TenCap" Placeholder="Tên cấp" Style="width: 100%" />
            </Item>
        </FormItem>
        <FormItem Label="Mô tả" SM="12">
            <Item>
                <RadzenTextBox @bind-Value="@capVanban.MoTa" Placeholder="Mô tả" Style="width: 100%" />
            </Item>
        </FormItem>
    </Items>
</FormBase>

@code {
    [Parameter] public tbCapVanBan Data { set; get; }
    tbCapVanBan capVanban = new tbCapVanBan();

    async void Submit(tbCapVanBan capVanban)
    {
        if (Data == null)
        {
            capVanban.id = SequenceId.GetInt("VBPL.Seq_tbCapVanBan");
            dbContext.tbCapVanBans.Add(capVanban);
            dbContext.SaveChanges();
        } else
        {
            dbContext.tbCapVanBans.Update(capVanban);
            dbContext.SaveChanges();
        }
        dialog.Close(capVanban);
        //dbContext.SaveChanges();
    }

    void Cancel()
    {
        dialog.Close(false);
    }

    protected override void OnInitialized()
    {
        if (Data != null)
        {
            capVanban = Data;
        }
        base.OnInitialized();
    }
}

This is my FormBase

@typeparam TItem

@inject QuanLyKiemDinhContext dbContext
@inject Radzen.DialogService dialog
@inject NotificationService notificationService
@inject NavigationManager UriHelper

<RadzenTemplateForm TItem="TItem" Data="@Data" Style="font-family:Helvetica; width: 100%" Submit="@Submit">
    <div class="row" style="padding: 10px 20px;">
        @Items
        @if (DisableBtn != true)
        {
        <div style="padding: 10px 15px;">
            @if (Buttons == null)
            {
                <ButtonTable Text="Lưu dữ liệu" ButtonType="ButtonType.Submit" />
                <ButtonTable Text="Hủy" ButtonStyle="ButtonStyle.Light" OnClick="@Cancel"/>
                @if (MoreButtons != null)
                {
                    @MoreButtons
                }
            } else
            {
                @Buttons
            }
        </div>
        }
    </div>
</RadzenTemplateForm>

@code {
    [Parameter] public EventCallback<TItem> Submit { set; get; }
    [Parameter] public EventCallback Cancel { set; get; }
    [Parameter] public TItem Data { set; get; }
    [Parameter] public RenderFragment Items { set; get; }
    [Parameter] public RenderFragment Buttons { get; set; }
    [Parameter] public RenderFragment MoreButtons { get; set; }
    [Parameter] public Boolean? DisableBtn { set; get; }

}

Answer 1

I had the same problem and found out that you need to add

<script async src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

in your index.html or _Host.cshtml file.

Link to the _Host.cshtml