How do you invoke a simple dialog from a razor page

Question

I am new to ASP, trying to learn how to develop a Razor Server application that contains a simple modal dialog within a razor page. I have taken the following steps from Visual Studio 2022 with ASP.NET Core installed:

Create new Project
Select Blazer Server App
Modify the Counter.Razor file with the following:

   Now I want this button to start a modal dialog
   
   
   
   
   
       
           
               
                   Modal title
                   
               
               
                   ...

The button "Launch Demo Modal" is displayed, however a dialog is not produced.

What am I doing wrong, or need to add to my project?

Thank You

Accepted Answer

you code would work fine in a razor page application, but when you use a virtual dom framework like blazor or react, you need to be careful of modifying the dom with javascript, or the virtual dom will overwrite the changes.

in blazor you need to wrap the javascript component, and control render logic so the javascript changes are not overridden.

a better approach in your case, is to not use the bootstrap javascript, but blazor events and code to display the modal. on the button click, change the class to "fade show" to show and "fade" to hide. you will also need to manage the [x] close event ('hide.bs.modal') via js interop .

Answer

You will have to add both the boorstrap.css and bootstrap.js, as shown below:

Bootstrap

Answer

The button "Launch Demo Modal" is displayed, however a dialog is not produced. What am I doing wrong, or need to add to my project?

Modal requires JavaScript reference within the project which usually doesn't linked by default. More specifically, within Blazor app in _Layout.cshtml we need to include that reference to render modal by ourself.

Solution:

This issue can be resolve by two ways as following:

Way: 1:

One is by using internal JavaScript file references installing script file from NuGet package or manually adding script file and finally link within _Layout.cshtml as following:

User's image

Way: 2:

Another way can be by using CDN reference. In this scenario you could include within your _Layout.cshtml` on ` section as following:

Full Reference:

Output:

BootstraModal

Note:

Make sure you don't have any script error while loading the page or clicking on the modal dialog. Please check following error and ensure you have resolve that.

User's image

Answer

My first solution:  To summarize, new Razor Server Applications require references to js/bootstrap and css/bootstrap code to execute the type of modal dialog I was wanting.
Please be aware that I am very new to asp.net / Razor so feel free to comment or correct this solution:

From Dev Studio – New Project, Select “Blazer Server App”:
 
Enter a name, Next
Take the defaults – currently .NET 7, select "Create".
 
In Solution Explorer, create a "js" folder – should be at a peer level with css just under the wwwroot folder
 
Go into the js folder, create a new folder called "bootstrap"
 
In a browser go to https://getbootstrap.com/
In the middle of the page you will find a download link– I used 5.3.0-Alpha

Click on the "Compiled CSS and JS" button
 
Go to the folder where the downloaded zip resides and open the zip file.
Navigate to the css folder and copy all of the files

Go back to Dev Studio, navigate to the css/bootstrap folder in solution explorer, right click and select open explorer folder.  Paste the files into the folder.  Replace files if prompted to do so.  Close the file explorer windows

Go back to the zip file and navigate to the js directory.  Copy all of the files.
Go back to Dev Studio, navigate to the js/bootstrap folder, right click and select open explorer folder.  Paste all of the files into the folder, then close the explorer folder.

Use solution explorer to find _Host.cshtml.  It will be under wwwroot/pages.  If not found do a find-in-files for 

In the  section, add 

The file should now look like this:
@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace FreshBlazerServerAppWithDialogSupport.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers




    
    
    
    
    
    
    
    
    


    

    
        
            An error has occurred. This application may no longer respond until reloaded.
        
        
            An unhandled exception has occurred. See browser dev tools for details.
        
        Reload
        🗙
    

    
    



Go back to your browser and navigate to https://getbootstrap.com/docs/5.3/components/modal/
Find the dialog characteristics you prefer by clicking on the “Live Demo” buttons.
Copy the associated source – for example:





  
    
      
        Modal title
        
      
      
        ...
      
      
        
        
      
    
  


In solution explorer, open Counter.razor under the pages folder.
Paste in the modal dialog code right above the @code{ section
It should look like this:
@page "/counter"

Counter

Counter

Current count: @currentCount







    
        
            
                Modal title
                
            
            
                ...
            
            
                
                
            
        
    

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Rebuild the solution and run it.
Navigate to the Counter page and click on the “Launch Demo Modal” button.
You should see this:
 
Debugging:
If you are using Chrome select “…” in the upper-right, then select more tools, Developer tools.
You should see the following :
If you don't your reference to blazor.server.js is probably incorrect
 

If you are using Edge, right click on the page and select “View Source”.  It should look like this:  
    

Similarly, if this line isn't present your reference to blazor.server.js is probably incorrect

Answer

It seems you missed the "bs" on data-bs-toggle and data-bs-target.

Share via

How do you invoke a simple dialog from a razor page

4 additional answers