C#•2y ago

Blazor Server, Bootstrap modal, dismiss after validation

In my Blazor Server app, I have a page that's used to add/edit database records (using EF, of course). I would like to add a modal for add/edit actions, but I need it to only dismiss (close) after all validations have passed. By default, buttons in modal don't dismiss it automatically unless you add data-bs-dismiss="modal" to them, so my question is - how would I perform certain action on button click and only dismiss the modal after all validations have passed?

2 Replies

SuperBrain•2y ago

Could it be that none is actually using Blazor Server and Bootstrap? 👀 Or is this something that people rarely need so not many know about it? Solutions I found suggest using JS, but I'd like to avoid that if at all possible. I'm not running away from JS, but I'm hoping that something like this can be done with C# only.

blinkbat•2y ago

you can attach a method to the @onclick event on your button the best way to show/hide something like a modal in blazor is to use a local boolean, like

@if (ShowModal)
{
  <div class="modal">...
}

@code
{
  private bool ShowModal { get; set; }
}

@if (ShowModal)
{
  <div class="modal">...
}

@code
{
  private bool ShowModal { get; set; }
}

Gaming

Programming

Blazor Server, Bootstrap modal, dismiss after validation