[英]Wrap bootstrap modal in blazor with IJSRuntime
Is it possible to get a reference to a Bootstrap 5 bootstrap.Modal
via IJSRuntime and save a reference to that instance to later use it?是否可以通过 IJSRuntime 获取对 Bootstrap 5
bootstrap.Modal
的引用并保存对该实例的引用以供以后使用?
Example:例子:
I can show a modal with this method:我可以用这种方法显示一个模态:
await _jsRuntime.InvokeVoidAsync("eval", $"new bootstrap.Modal(document.getElementById('myId')).show()");
But I can't hide it the same way because I need to store a reference to the new bootstrap.Modal
creation.但我不能以同样的方式隐藏它,因为我需要存储对
new bootstrap.Modal
创建的引用。 How can I do this dynamically (I have a bootstrap modal component) without having to write javascript?我怎样才能动态地做到这一点(我有一个引导模式组件)而不必编写 javascript? Is there some way we can save variables and reference them later through the IJSRuntime?
有什么方法可以保存变量并稍后通过 IJSRuntime 引用它们?
After a lot of searching I found that eval
is never the solution.经过大量搜索,我发现
eval
永远不是解决方案。 I am not a JavaScript dev but I got this together:我不是 JavaScript 开发人员,但我得到了这个:
BootstrapModal.razor BootstrapModal.razor
@inject IJSRuntime _jsRuntime;
<div class="modal fade" id="@Id" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
@ChildContent
</div>
</div>
</div>
@code {
[Parameter]
public string Id { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
public dynamic Parameter { get; private set; }
protected override void OnInitialized()
{
if (string.IsNullOrEmpty(Id))
{
Id = Guid.NewGuid().ToString();
}
}
public async Task Show(dynamic parameter = null)
{
Parameter = parameter;
await _jsRuntime.InvokeVoidAsync("BootstrapModal.ShowModal", Id);
}
public async Task Hide()
{
await _jsRuntime.InvokeVoidAsync("BootstrapModal.HideModal");
}
}
BootstrapModalInterop.js BootstrapModalInterop.js
window.BootstrapModal = {};
window.BootstrapModal.OpenedModal = null;
window.BootstrapModal.ShowModal = (id) => {
if (window.BootstrapModal.OpenedModal != null) {
window.BootstrapModal.HideModal();
}
window.BootstrapModal.OpenedModal = new bootstrap.Modal(document.getElementById(id));
window.BootstrapModal.OpenedModal.show();
}
window.BootstrapModal.HideModal = () => {
if (window.BootstrapModal.OpenedModal == null) {
return;
}
window.BootstrapModal.OpenedModal.hide();
window.BootstrapModal.OpenedModal = null;
}
Make sure you reference the BootstrapModalInterop.js
file from your hosts file.确保从 hosts 文件中引用
BootstrapModalInterop.js
文件。
You can now natively open and close the modal from blazor code.您现在可以从 blazor 代码本机打开和关闭模态。
Example usage:示例用法:
...
<button class="btn btn-danger" @onclick="async () => await _deleteModal.Show(discountCode.Id)"><i class="fas fa-trash"></i></button>
...
<BootstrapModal @ref="_deleteModal">
<div class="modal-header">
<h5 class="modal-title">
Delete Discount Code
</h5>
</div>
<div class="modal-body">
<p>
Are you sure that you want to delete this discount code? This cannot be undone!
</p>
</div>
<div class="modal-footer">
<button @onclick="async () => await _deleteModal.Hide()" class="btn btn-secondary">Close</button>
<button @onclick="async () => await Delete((int)_deleteModal.Parameter)" class="btn btn-outline-danger">Delete</button>
</div>
</BootstrapModal>
@code
{
private BootstrapModal _deleteModal;
}
The parameter attribute is optional but I used it to parse the ID of the item I want to delete with it.参数属性是可选的,但我用它来解析我想用它删除的项目的 ID。 Later I can get this ID using
(int)_deleteModal.Parameter
.稍后我可以使用
(int)_deleteModal.Parameter
获取此 ID。 I chose a dynamic
type so I can parse in whatever.我选择了一个
dynamic
类型,所以我可以解析任何东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.