[英]Blazor bootstrap 5 modal: how to not bind a property to value?
In blazor I created a modal component like:在 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;">
So when CanCloseWithoutAction is true, in the browser I get:所以当 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">
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.但即使
data-bs-backdrop="" data-bs-keyboard=""
它仍然不允许用户在 esc 键上关闭它或单击其他地方。
So how to bind in blazor so that when this parameter is true then I get那么如何在 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">
without these two properties?没有这两个属性?
The default option value for both backdrop
and keyboard
is true
. backdrop
和keyboard
的默认选项值为true
。 In JavaScript though, the empty string is a falsy value and treated as false
in a boolean expression.但是在 JavaScript 中,空字符串是一个假值,在 boolean 表达式中被视为
false
。
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;">
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" />
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.