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
Fig.1 Choose to Create a new project option from Visual Studio
- Choose Blazor App as project temple and click the 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,
- 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.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>
- Run our application and here is how the Modal Popup Window looks like,
Fig.8 Demo – Modal Popup Window
GitHub Code
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