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
- Choose Blazor App as project temple and click 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
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.
- Browser for BlazoredModal and Install the package.
- Once after the successful installation, you will get messages as shown in the below image (Fig.7)
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,
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.
Learn With Sundar 