Blazor Popup - Add Content Dynamically

This example creates a service to generate Popup content dynamically.

To incorporate this capability in your DevExpress-powered Blazor app:

1. Create a service to display/close the pop-up window. This service allows you to declare the DxPopup component in your application once. Refer to the following folder for implementation details: Services.

2. Register the service in the Program.cs file:

   builder.Services.AddScoped<IDxModalPopupService, DxModalPopupService>();

3. Create a Popup model (used to generate custom popup content). Refer to the following file for implementation details: DxPopupModel.cs.

4. Create a Razor component (DxModalPopup.razor) that injects the service.

5. Optional. If you wish to display multiple pop-up windows on a single page, create a corresponding number of DxPopup instances. Wrap the Popup's markup in a @foreach loop:

   @foreach (var model in DxModalPopupService.Modals) {
       <DxPopup @key="@model" ShowCloseButton="true" Closed="() => OnClosed(model)" Visible="true">
           @* ... *@
       </DxPopup>
   }

6. Declare the DxModalPopup component in the App.razor file. This is the only component declaration in the application.

   <Router AppAssembly="@typeof(App).Assembly">
       <Found Context="routeData">
           <DxModalPopup />
           <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
       </Found>
   </Router>

7. Create a .cs file that implements content generation and display/close operations. Refer to the following file for the full implementation: DxModalPopup.cs.

8. Create a Razor file (ComponentWithCloseButton.razor) that accepts parameters and uses the model to render content:

   @inject IDxModalPopupService Modal
   
   <h3>A Component with a Close Button</h3>
   
   <p>Passed value: @DemoText</p>
   
   <DxButton Click="async () => await Modal!.CloseModal(PopupModel)">Close</DxButton>
   
   @code {
       [CascadingParameter]
       DxPopupModel PopupModel { get; set; }
   
       [Parameter]
       public string DemoText { get; set; } = String.Empty;
   }

9. Create a button (in the Index.razor file) to open your custom pop-up using the service and pass corresponding parameters to the button's Click event handler:

   @inject IDxModalPopupService Modal
   
   <h2 class="pt-2">@text</h2>
   
   <DxButton Text="Show modal with parameter"
             Click="@(async () => {
                 text = "Modal with parameter button is open!";
                 await Modal.ShowModal<ComponentWithCloseButton>(new() {
                     { nameof(ComponentWithCloseButton.DemoText), "Modal Content" }
                 });
                 text = "Modal with parameter is closed!";
             })">
   </DxButton>
   
   @code {
       string text = "Modal Popup";
   }

Files to Review

• DxModalService.cs
• DxModalPopup.razor
• DxModalPopup.cs
• ComponentWithCloseButton.razor

Documentation

• DxPopup

More Examples

• Popup for Blazor - How to implement a confirmation dialog

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)