Modal Popup Window in Blazor WebAssembly

Introduction

Sometime in our web application 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 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 its VS 2019.
  • Choose Create a new project option
Fig.1 Choose Create a new project option from Visual Studio
  • Choose Blazor App as project temple and click Next button.
Fig.2 Choose Project Template
  • Save the project in the location by giving a meaningful name and click Create button.
Fig.3. Choose Project Location to Save
  • 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 as,

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.
Fig.5 Choose Manage NuGet Packages for Solution option to Install NuGet Package
  • Browser for BlazoredModal and Install the package.
Fig.6 Install Blazored.Modal NuGet 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.Main method.

 builder.Services.AddBlazoredModal();
Add Imports

Add the following to our _Imports.razor

@using Blazored
@using Blazored.Modal
@using Blazored.Modal.Services
Add CascadingBlazoredModal Component

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

<CascadingBlazoredModal>
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingBlazoredModal>
Add reference to style sheet and JavaScript reference

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

<link href="_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.

<script src="_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 this button 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,
Fig.8 Demo – Modal Popup Window
GitHub Code

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

Conclusion

This is article, We have discussed how simply we can implement the modal popup window, I assume this is was helpful. We can customize our modal popup window as well and It’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.

Other Article of Mine on Blazor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Built with WordPress.com.

Up ↑

%d bloggers like this: