How to use Bootstrap modal in Blazor client app?

by

There is likely a better way to do this, but here’s a working example to get you started:

Page:

@page "/modal-test"

<BlazorApp1.Components.Modal @ref="Modal"></BlazorApp1.Components.Modal>

<button @onclick="() => Modal.Open()">Open Modal</button>

@code {
    private BlazorApp1.Components.Modal Modal { get; set; }
}

Component: 

<div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">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">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => Close()">Close</button>
            </div>
        </div>
    </div>
</div>


@if (ShowBackdrop)
{
    <div class="modal-backdrop fade show"></div>
}


@code {


  public Guid Guid = Guid.NewGuid();
    public string ModalDisplay = "none;";
    public string ModalClass = "";
    public bool ShowBackdrop = false;

    public void Open()
    {
        ModalDisplay = "block;";
        ModalClass = "Show";
        ShowBackdrop = true;
        StateHasChanged();
    }

    public void Close()
    {
        ModalDisplay = "none";
        ModalClass = "";
        ShowBackdrop = false;
        StateHasChanged();
    }
}

Another option to go about this, would be to use JSInterop to call $('#modalId').modal()

You could have each version of the component have a unique id by doing something like this:
<div id="bootstrap-modal-@Guid" then use the saved ID to call .modal() with jQuery.

More Related Contents:

  1. Best way to share data between two child components in Blazor
  2. ASP.NET MVC 4 – for loop posts model collection properties but foreach does not
  3. Return View as String in .NET Core
  4. How to use ternary operator in razor (specifically on HTML attributes)?
  5. Pass parameter to controller from @Html.ActionLink MVC 4
  6. Using Razor outside of MVC in .NET Core
  7. How can I trigger/refresh my main .RAZOR page from all of its sub-components within that main .RAZOR page when an API call is complete?
  8. IntelliSense in Razor files (.cshtml) stopped working
  9. Can we use Razor syntax in ASP.NET Webforms (*.aspx pages)?
  10. Replacement for @helper in ASP.NET Core
  11. Embedding a Leaflet map on a Blazor SPA
  12. Is there any hot reload for blazor server-side?
  13. Failed to find a valid digest in the ‘integrity’ attribute for resource in Blazor app
  14. Razor intellisense not working in VS 2015
  15. ASP MVC Razor encode special characters in input placeholder
  16. asp.net conditionally disable a tag helper (textarea)
  17. What is the difference between .NET Core and .NET Standard Class Library project types?
  18. ASP.NET MVC 3 Razor – Adding class to EditorFor
  19. ASP.NET MVC implement custom validator use IClientValidatable
  20. Converting ASP.NET MVC Razor @helper function into a method of a helper class
  21. The default XML namespace of the project must be the MSBuild XML namespace
  22. Adding sub-directory to “View/Shared” folder in ASP.Net MVC and calling the view
  23. System.Text.Json – Deserialize nested object as string
  24. EF Core queries all columns in SQL when mapping to object in Select
  25. Why doesn’t Visual Studio code formatting work properly for Razor markup?
  26. How do I reference a .NET Framework project in a .NET Core project?
  27. Custom JSON serializer for optional property with System.Text.Json
  28. .NET Core app unable to start in IIS due to ErrorCode = ‘0x80004005 : 80008083
  29. Using Razor, how do I render a Boolean to a JavaScript variable?
  30. ASP.NET Core configuration for .NET Core console application

Leave a Comment