Blazor bootstrap 5 模態：如何不將屬性綁定到值？

Question

在 blazor 我創建了一個模態組件，如：

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;">

所以當 CanCloseWithoutAction 為真時，在瀏覽器中我得到：

<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">

但即使data-bs-backdrop="" data-bs-keyboard=""它仍然不允許用戶在 esc 鍵上關閉它或單擊其他地方。

那么如何在 blazor 中綁定，以便當這個參數為真時我得到

<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">

沒有這兩個屬性？

Answer 1

backdrop和keyboard的默認選項值為true 。 但是在 JavaScript 中，空字符串是一個假值，在 boolean 表達式中被視為false 。

代碼應改為：

<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;">

如果不

<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

嘗試

@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" />
}