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
Modal Popup Window in Blazor WebAssembly
Fig.1 Choose to Create a new project option from Visual Studio
  • Choose Blazor App as project temple and click the Next button.
Modal Popup Window in Blazor WebAssembly
Fig.2 Choose Project Template
  • Save the project in the location by giving a meaningful name and click Create button.
Modal Popup Window in Blazor WebAssembly
Fig.3. Choose Project Location to Save
  • Choose the .NET framework and Choose Blazor WebAssembly App
Modal Popup Window in Blazor WebAssembly
Fig.4 Choose Blazor WebAssembly App option
 

Installing NuGet Package

 
We can install via PowerShell using the following command,
  1. 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.
Modal Popup Window in Blazor WebAssembly
Fig.5 Choose Manage NuGet Packages for Solution option to Install NuGet Package
  • Browser for BlazoredModal and Install the package.
Modal Popup Window in Blazor WebAssembly
Fig.6 Install Blazored.Modal NuGet Package
  • Once after the successful installation, you will get messages as shown in the below image (Fig.7)
Modal Popup Window in Blazor WebAssembly
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.
  1. builder.Services.AddBlazoredModal();   
Add Imports
 
Add the following to our _Imports.razor
  1. @usingBlazored  
  2. @usingBlazored.Modal  
  3. @usingBlazored.Modal.Services   
Add CascadingBlazoredModal Component
 
Add the <CascadingBlazoredModal /> component into our applications App.razor, wrapping the Router as per the example below.
  1. <CascadingBlazoredModal>  
  2.    <RouterAppAssembly="@typeof(Program).Assembly"PreferExactMatches="@true">  
  3.       <FoundContext="routeData">  
  4.       <RouteViewRouteData="@routeData"DefaultLayout="@typeof(MainLayout)"/>  
  5.    </Found>  
  6.    <NotFound>  
  7.       <LayoutViewLayout="@typeof(MainLayout)">  
  8.          <p>Sorry, there's nothing at this address.</p>  
  9.       </LayoutView>  
  10.    </NotFound>  
  11. </Router>  
  12. </CascadingBlazoredModal>   
Add reference to the style sheet and JavaScript reference
 
Add the following line to the head tag of our index.html
  1. <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.
  1. <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.
  1. @page "/popupdemo"  
  2.    @inject IModalService modal  
  3.    <h5>Click thisbutton Show Modal Popup</h5>  
  4. <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,
Modal Popup Window in Blazor WebAssembly
Fig.8 Demo – Modal Popup Window
 
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.
 
Other Article of Mine on Blazor