Chandradev's Blog

We can display the Popup window in Blazor using Radzen Controls like this

Step 1: Configure the project setup like this https://chandradev819.wordpress.com/2022/09/28/getting-started-with-radzen-blazor-controls/

Step 2: Register the Dialogs service like this

Step 3: Include <RadzenDialog/> component as global in Shared\MainLayout.razor

Step 4: Create any Razor component and write the code for simple popup window like this

@page "/popup"
@inject DialogService DialogService

<RadzenButton ButtonType="ButtonType.Submit" Text="Test Popup" TextTransform="None" 
Click=@(args => DialogService.Confirm("Confirm Action?", "Test Popup", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" })) />

Now we will create cascading popup window

@page "/SimplePopup"
@inject DialogService DialogService
<RadzenButton Text="Show dialog with inline Blazor content" Click=@ShowInlineDialog />

@code {
    async Task ShowInlineDialog()
    {
        var result = await DialogService.OpenAsync("Login Popup", ds =>
    @<div>
        <div class="row">
            <fieldset class="border p-2">
                <legend class="w-auto">
                    <div class="col-md-6">
                        <RadzenButton Text="Login as User" Click="() => LoginAsUser()"
                                  Style="margin-bottom: 10px; width: 250px" />
                        <RadzenButton Text="Login as Guest" Click="() => LoginAsGuest()"
                                  Style="margin-bottom: 10px; width: 250px" />
                        <RadzenButton Text="Login as Admin" Click="() => LoginAsAdmin()"
                                  Style="margin-bottom: 10px; width: 250px" />
                    </div>
                </legend>
            </fieldset>
        </div>
    </div>
    );

        Console.WriteLine($"Dialog result: {result}");
    }

    async Task ShowInlineDialog1()
    {
        var result = await DialogService.OpenAsync("Login Popup", ds =>
    @<div>
        <div class="row">
            <fieldset class="border p-2">
                <legend class="w-auto">
                    <div class="col-md-12">
                        <p>Testing</p>
                    </div>
                </legend>
            </fieldset>
        </div>
    </div>
    );

        Console.WriteLine($"Dialog result: {result}");
    }
    private void LoginAsUser()
    {
        ShowInlineDialog1();
    }
    private void LoginAsGuest()
    {

    }
    private void LoginAsAdmin()
    {

    }
}

Summary: In above post we saw that it is very straight forward to create model popup in Blazor using Radzen Controls.

Thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.