Modal Popup Window In Blazor WebAssembly

Introduction

Sometimes in our web applications, we may need to display contents in Popup Window. A popup window is a web browser window that is smaller than standard windows and without some of the standard features such as toolbars or status bars. Popups are one of the trickiest effects in web development, but in Blazor WebAssembly we can create it in a simple way. All we need to Install a NuGet Package called, BlazoredModal. A BlazoredModal is a powerful and customizable modal implementation for Blazor applications.

Getting Started – Initial Setup

Creating a new Project

Start and navigate to Visual Studio, in my case, it's VS 2019.
Choose to Create a new project option

Choose Blazor App as project temple and click the Next button.

Save the project in the location by giving a meaningful name and click Create button.

Choose the .NET framework and Choose Blazor WebAssembly App

Fig.4 Choose Blazor WebAssembly App option

Installing NuGet Package

We can install via PowerShell using the following command,

Install-Package Blazored.Modal

Or we can install the package using the NuGet package manager.

Go to Tools, Choose Manage NuGet Packages for Solution from NuGet Package Manager option.

Browser for BlazoredModal and Install the package.

Once after the successful installation, you will get messages as shown in the below image (Fig.7)

Fig.7 Successfully Installed the Package

Implementation

Register Services

We will need to add the following using statement and add a call to register the Blazored Modal services in our applications Program.Mainmethod.

builder.Services.AddBlazoredModal();

Add Imports

Add the following to our _Imports.razor

@usingBlazored
@usingBlazored.Modal
@usingBlazored.Modal.Services

Add CascadingBlazoredModal Component

Add the <CascadingBlazoredModal /> component into our applications App.razor, wrapping the Router as per the example below.

<CascadingBlazoredModal>
<RouterAppAssembly="@typeof(Program).Assembly"PreferExactMatches="@true">
<FoundContext="routeData">
<RouteViewRouteData="@routeData"DefaultLayout="@typeof(MainLayout)"/>
</Found>
<NotFound>
<LayoutViewLayout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingBlazoredModal>

Add reference to the style sheet and JavaScript reference

Add the following line to the head tag of our index.html

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

Then add a reference to the Blazored Modal JavaScript file at the bottom of the respective page after the reference to the Blazor file.

<scriptsrc="_content/Blazored.Modal/blazored.modal.js"></script>

Creating a Component

In order to show a modal, we need to inject the IModalService into the component or service we want to invoke the modal. You can then call the Show method passing in the title for the modal and the type of the component we want the modal to display.

In my example, I have created a new component called PopupDemo.razor and Injected the IModalService in this. We have a button, and whenever the button is clicked, the Popup Modal Window will be displayed. I have a component called FetchData which I want to display in the modal and I have called it on a button click. Below is the code of PopupDemo.razor.

@page "/popupdemo"
@inject IModalService modal
<h5>Click thisbutton Show Modal Popup</h5>
<button @onclick="@(()=>modal.Show<FetchData>("Modal Popup Example"))"class="btn btn-primary">View</button>

Demo

Run our application and here is how the Modal Popup Window looks like,

GitHub Code

This Demo application is available in the GitHub repo, please feel free to refer to the project Modal Popup Window Blazor WASM

Conclusion

In this is an article, we have discussed how we can simply implement the modal popup window. I hope this was helpful. We can customize our modal popup window as well and iedit t’s possible to have multiple active modal instances at a time, which we will discuss in our upcoming article. Please share your feedback in the comment section.