Blazor bootstrap 5 modal: how to not bind a property to value?

Question

In blazor I created a modal component like:

public bool CanCloseWithoutAction { get; set; } = false;

<div class="modal fade @modalClass" 
     data-bs-backdrop="@(CanCloseWithoutAction ? "":"static")" 
     data-bs-keyboard ="@(CanCloseWithoutAction ? "" : "false")" 
     aria-modal="true" tabindex="-1" role="dialog" 
     style="display:@modalDisplay; overflow-y: auto;">

So when CanCloseWithoutAction is true, in the browser I get:

<div class="modal fade show" data-bs-backdrop="" data-bs-keyboard="" 
     aria-modal="true" tabindex="-1" role="dialog" 
     style="display:block;; overflow-y: auto;">
     <div class="modal-dialog modal-dialog-scrollable 
          modal-dialog-centered modal-xl " role="document">

but even when data-bs-backdrop="" data-bs-keyboard="" it still does not allow the user to close it on esc key or click elsewhere.

So how to bind in blazor so that when this parameter is true then I get

<div class="modal fade show" aria-modal="true" tabindex="-1" role="dialog" 
     style="display:block;; overflow-y: auto;">
     <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl " 
          role="document">

without these two properties?

Answer 1

The default option value for both backdrop and keyboard is true . In JavaScript though, the empty string is a falsy value and treated as false in a boolean expression.

The code should be changed to:

<div class="modal fade @modalClass" 
     data-bs-backdrop="@(CanCloseWithoutAction ? "true":"static")" 
     data-bs-keyboard ="@(CanCloseWithoutAction ? "true" : "false")" 
     aria-modal="true" tabindex="-1" role="dialog" 
     style="display:@modalDisplay; overflow-y: auto;">

if not

<div class="modal fade @modalClass" 
     data-bs-backdrop="@(CanCloseWithoutAction ? "true":"static")" 
     data-bs-keyboard ="@CanCloseWithoutAction" 
     aria-modal="true" tabindex="-1" role="dialog" 
     style="display:@modalDisplay; overflow-y: auto;">

Answer 2

Try

@if (CanCloseWithoutAction) {
  // markup for can close
<div class="modal fade show" data-bs-backdrop="static" data-bs-keyboard="false" 
     aria-modal="true" tabindex="-1" role="dialog" 
     style="display:block;; overflow-y: auto;">
     <div class="modal-dialog modal-dialog-scrollable 
          modal-dialog-centered modal-xl " role="document">
}
else {
   // markup for can't close
<div class="modal fade show" aria-modal="true" tabindex="-1" role="dialog" 
     style="display:block;; overflow-y: auto;">
     <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl " 
          role="document" />
}