How do you invoke a simple dialog from a razor page

Mark Smith 20 Reputation points
2023-03-07T00:31:19.04+00:00

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:
   <h1>Now I want this button to start a modal dialog</h1>
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
       Launch demo modal
   </button>
   
   <!-- Modal -->
   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                   </button>
               </div>
               <div class="modal-body">
                   ...
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                   <button type="button" class="btn btn-primary">Save changes</button>
               </div>
           </div>
       </div>
   </div>

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

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,292 questions
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 59,131 Reputation points
    2023-03-07T16:49:46.4266667+00:00

    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 .

    1 person found this answer helpful.
    0 comments No comments

4 additional answers

Sort by: Most helpful
  1. SurferOnWww 2,171 Reputation points
    2023-03-07T03:40:47.6933333+00:00

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

    Bootstrap

    2 people found this answer helpful.

  2. Farid Uddin Kiron MSFT 456 Reputation points Microsoft Vendor
    2023-03-08T02:16:11.2166667+00:00

    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

    User's image

    <script src="js\bootstrap.js"></script>

    Way: 2:

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

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    

    Full Reference:

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <base href="~/" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link href="css/site.css" rel="stylesheet" />
        <link href="BlazorServerApp.styles.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
    </head>
    

    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

    1 person found this answer helpful.

  3. Mark Smith 20 Reputation points
    2023-03-11T05:19:24.8266667+00:00
    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 <link href="css/site.css
    
    In the <head> Section, add a link.  Start with <link href=" .  Let intellisense help you create the link:
    <link href="~/css/bootstrap/bootstrap.css" />
    
    In the <body> section, add <script src="~/js/bootstrap/bootstrap.js"></script>
    
    The file should now look like this:
    @page "/"
    @using Microsoft.AspNetCore.Components.Web
    @namespace FreshBlazerServerAppWithDialogSupport.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <base href="~/" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link href="~/css/bootstrap/bootstrap.css" />
        <link href="css/site.css" rel="stylesheet" />
        <link href="FreshBlazerServerAppWithDialogSupport.styles.css" rel="stylesheet" />
        <link rel="icon" type="image/png" href="favicon.png"/>
        <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
    </head>
    <body>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    
        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss">🗙</a>
        </div>
    
        <script src="_framework/blazor.server.js"></script>
        <script src="~/js/bootstrap/bootstrap.js"></script>
    </body>
    </html>
    
    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:
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
    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"
    
    <PageTitle>Counter</PageTitle>
    
    <h1>Counter</h1>
    
    <p role="status">Current count: @currentCount</p>
    
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    @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 :<script src="_framework/blazor.server.js"></script>
    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:  
        <script src="/js/bootstrap/bootstrap.js"></script>
    
    Similarly, if this line isn't present your reference to blazor.server.js is probably incorrect
     
    
    
    
    
    
    
    
    0 comments No comments

  4. Guilherme Vieira Dutra 0 Reputation points
    2023-07-01T06:54:45.4133333+00:00

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

    0 comments No comments