Modal Popup In Blazor

In this article, we will learn how we can popup modal in blazor. We will use Blazored.Modal package to popup modal.

If you are new to blazor or follow steps to create a blazor app from here. I assume you have already created a blazor server app. Now you need to follow the below steps.

Install Blazored.Modal. to install this you need to execute below command in Package Manager Console or find Blazored.Modal in Nuget-Solution.

Install-Package Blazored.Modal

you also can install Blazored.Modal using Dotnet CLI

dotnet add package Blazored.Modal

Once you have installed Blazored.Modal package, you need to do the following steps to use Modal.

Register its service in Startup class. Which is available in your blazor server application.

To Register service, you need to include the following namespace.

using Blazored.Modal;

Next, register the service in the ConfigureServices() method of Startup class.

public void ConfigureServices(IServiceCollection services)
{
    services.AddBlazoredModal();
}

Import following lines inside _Imports.razor file. This will allow us to use Blazored.Modal in each component without importing directive for each component.

@using Blazored
@using Blazored.Modal
@using Blazored.Modal.Services

Add the following CSS link inside _Host.cshtml file.

<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />

paste the following content where you want to use Modal, I’ll create a new razor component to use, Let’s create a razor component namely “ModelExample.razor”.

Open ModelExample.razor file from the pages folder and paste the following content.

@page "/modelExample"
@inject IModalService Modal

<button @onclick="@(() => Modal.Show<FetchData>("Modal Popup Example"))" class="btn btn-primary">View </button>

In the above code, FetchData is another razor component that I want to display inside a modal popup.

Following is the FetchData.razor file code.

@page "/fetchdata"

@using BlazorLocalStorage.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

In MainLayout.razor file, put below tag at end of the file.

<BlazoredModal />

And That’s it, now you can use Modal popup. when you run the application and following output will display in a browser.

Recommend articles which you should read once.

1. CRUD Using Blazor, Entity Framework Core And Dapper
2. Sorting Table In Blazor
3. Pagination In Blazor
4. Searching Feature In Blazor
5. Validation In Blazor Application
6. Deploy A Blazor Application On IIS
7. Use LocalStorage In Blazor

hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.

Are you looking for certified Hire .NET developers in India who are willing to work within your project budget? For global clients, our first-time-right offshore.NET engineers build powerful, secure, and scalable web solutions at competitive pricing. We have Dedicated ASP.NET Developers & Programmers. Get engaging, inventive, and user-friendly web app solutions for your company’s needs by hiring expert.NET developers from Vision Infotech on an hourly or full-time (dedicated monthly) basis.