Modal Popup Window In Blazor with Parameters

  In this article, we are going to discuss, how to add a model popup in a blazer and we will see how to pass the parameters in a popup window.

Create a new Blazor WebAsssembly project

Here we are going to make this application using VS 2022, so open VS 2022 and create a new project

Now let's give the project Name 'BlazorModelPopup' and click Next

Now give some additional info, as per your application, and click on Create.

Installing NuGet Package

 

Once the application is ready to use so now go to the NuGet package manager and install the Blazored.Modal library 

1. Install-Package Blazored.Modal  

Search for the above library and click on install

Now we can see library installed successfully 

Register services

Now we need to register the BlazoredModal service in Program class like below.

1. builder.Services.AddBlazoredModal();   

Add Imports

 

Add the following in _Imports.razor file

1. @using Blazored  
2. @using Blazored.Modal  
3. @using Blazored.Modal.Services 
4. 
   

Add CascadingBlazoredModal Component

Add the <CascadingBlazoredModal/> component into our applications App.razor, 

2. <CascadingBlazoredModal> 
3.     <Router AppAssembly="@typeof(App).Assembly">
4.     <Found Context="routeData">
5.         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
6.         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
7.     </Found>
8.     <NotFound>
9.         <PageTitle>Not found</PageTitle>
10.         <LayoutView Layout="@typeof(MainLayout)">
11.             <p role="alert">Sorry, there's nothing at this address.</p>
12.         </LayoutView>
13.     </NotFound>
14. </Router>
15. </CascadingBlazoredModal>    

Add reference to the style sheet and JavaScript reference

Add the following CSS line in the head tag of our index.html (inside the wwwRoot folder)

1. <link href="_content/Blazored.Modal/blazored-modal.css"rel="stylesheet"/>   

Now add the Js reference to the Blazored Modal JavaScript file in the head tag of our index.html (inside the wwwRoot folder).

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

Creating a Component

First, let's create a component called ''userPopUp", and put the code below

2. @page "/userPopUp"
3. 
   
4. <h3>UserPopUp</h3>
5. 
   
6. @code {
7. 
   
8. }

Now utilize FetchData.razor existing component 

When we create a Blazor web assembly project it gives us a couple of pages, and one of them is FetchData.razor

so in the existing page let's add a button called 'Popup', and the FetchData.razor code like below

from this newly added button, we are calling the 'userPopUp' razor component page a popup, with the help of service.Show like below

here service is the object of IModalService 

2. @page "/fetchdata"
3. @inject HttpClient Http
4. @inject IModalService service
5. 
   
6. 
   
7. <PageTitle>Weather forecast</PageTitle>
8. 
   
9. <h1>Weather forecast</h1>
10. 
    
11. <p>This component demonstrates fetching data from the server.</p>
12. 
    
13. @if (forecasts == null)
14. {
15.     <p><em>Loading...</em></p>
16. }
17. else
18. {
19.     <table class="table">
20.         <thead>
21.             <tr>
22.                 <th>Date</th>
23.                 <th>Temp. (C)</th>
24.                 <th>Temp. (F)</th>
25.                 <th>Summary</th>
26.             </tr>
27.         </thead>
28.         <tbody>
29.             @foreach (var forecast in forecasts)
30.             {
31.                 <tr>
32.                     <td>@forecast.Date.ToShortDateString()</td>
33.                     <td>@forecast.TemperatureC</td>
34.                     <td>@forecast.TemperatureF</td>
35.                     <td>@forecast.Summary</td>
36.                     <td>
37.                         <button @onclick="@(()=>service.Show<UserPopUp>("User PopUp"))" class="btn btn-primary">PopUp</button>
38.                     </td>
39.                 </tr>
40.             }
41.         </tbody>
42.     </table>
43. }
44. 
    
45. @code {
46.     private WeatherForecast[]? forecasts;
47. 
    
48.     protected override async Task OnInitializedAsync()
49.     {
50.         forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
51.     }
52. 
    
53.     public class WeatherForecast
54.     {
55.         public DateTime Date { get; set; }
56. 
    
57.         public int TemperatureC { get; set; }
58. 
    
59.         public string? Summary { get; set; }
60. 
    
61.         public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
62.     }
63. }

Now when you will run the application, the output will be like below 

Calling popup component using a Method

let's create a method in Fetch.razor component like below, and call it from the 'popup' button

Below is the function code

2. void CallPopup(int ID)
3. {
4.    
5. service.Show<UserPopUp>("User PopUp");
6. 
   
7. }

Now call the above function on the button click, Below is the code on the button click

1.    <button @onclick="@(() => CallPopup())" class="btn btn-primary">PopUp</button>

The output will be the same as above

Showing a modal popup with passing parameters

Let's pass the ID from a fetch component to Popup Component, 

so let's make changes to the method and call a method from the button click event

2.    <tbody>
3.             @foreach (var forecast in forecasts)
4.             {
5.                 <tr>
6.                     <td>@forecast.Date.ToShortDateString()</td>
7.                     <td>@forecast.TemperatureC</td>
8.                     <td>@forecast.TemperatureF</td>
9.                     <td>@forecast.Summary</td>
10.                     <td>
11.                       @*  <button @onclick="@(()=>service.Show<UserPopUp>("User PopUp"))" class="btn btn-primary">PopUp</button>*@
12.                         <button @onclick="@(() => CallPopup(20))" class="btn btn-primary">PopUp</button>
13. 
    
14.                     </td>
15.                 </tr>
16.             }
17.         </tbody>

below is the code for the function

2.     void CallPopup(int ID)
3.     {
4.         var parameters = new ModalParameters();
5.         parameters.Add("userID", ID);
6. 
   
7. 
   
8.        service.Show<UserPopUp>("User PopUp", parameters);
9. 
   
10.        // we can call like below as well
11.       // service.Show(typeof(UserPopUp), "Edit Movie", parameters);      
12.         
13. 
    
14.     }

 In the above code, we are passing UserID, with the help of ModelParameters function, and then passing it using Show Method.

Below is the code for userPopUp.razor

1.   
2. @page "/userPopUp"
3. 
   
4. 
   
5. <input type="text" @bind="userID" readonly/>
6. 
   
7. @code {
8. 
   
9.     [CascadingParameter]
10.    public ModalParameters? parameters { get; set; }
11. 
    
12.     [Parameter]
13.     public int userID { get; set; }
14. 
    
15.     protected override async void OnInitialized()
16.     {
17.         userID = parameters.Get<int>("userID");
18.        
19. 
    
20.     }
21. 
    
22. }

Now let's run the application, and when we will click on the Popup button, we data ID data we will see in the textbox.

You can find the source code from this GitHub Link

------------------------------------------