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.

23 Comments

  1. DA

    I’d like to put a Form inside a modal popup. Upon ‘submit’, I want the modal window to close. How can I do that?

    0
    0
    Reply
  2. Steve

    Before I try and download this package, does anyone know whether this is a truly modal popup component?
    For example, in my partial class code I have a need to prompt the user whether they are sure they want to perform some action, such as deleting a record, etc. I want to be able to make the call to show the modal popup Modal.Show and I want the processing to completely stop and wait for the user to dismiss the modal popup with a Yes or No response, then I could check their response and then branch my logic accordingly. I don’t want to have to write a seperate event callback function for every single one of these popups that I’ll need to create, as it splits my logic up into a bunch of pieces. I know it’s just the nature of the web browser environment -vs- desktop applications, but I just thought I would check to see how this particular component works.

    0
    0
    Reply
    1. walter e watkins

      Create a test Blazor Server Project then follow the steps here. Doing that did not work for me.
      To see the Blazored.Modal GitHub go to https://github.com/Blazored/Modal.

      0
      0
      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories