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