我試圖找到一種方法來從 blazor webassembly 組件中的 C# 方法關閉引導模式。
貝婁是我想出的一個解決方案。它涉及使用 IJSRuntime 呼叫 javascript 方法來操作引導模式。我敢肯定還有其他方法可以解決這個問題。
uj5u.com熱心網友回復：
引導模式可以通過 javascript 關閉：
使用以下代碼創建一個 javascript wwwroot/js/site.js檔案：
export function CloseModal(modalId) {
$(modalId).modal('hide');
}
在正文末尾的index.html中包含腳本：
...
<script src="js/site.js"></script>
</body>
存在呼叫模態的父組件：
父組件.razor
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<ModalComponent />
@code {
}
然后是一個包含模態的模態組件：（我們正在利用 IJSRuntime 從 C# 代碼中呼叫 js）
模態組件.razor
@inject IJSRuntime js
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@code {
IJSObjectReference JsObjectRef { get; set; }
protected override async Task OnAfterRenderAsync(bool first)
{
JsObjectRef = await js.InvokeAsync<IJSObjectReference>("import", "/js/site.js");
}
async Task SomeMethod(){
//some logic
//call the js function to close the modal
await JsObjectRef.InvokeVoidAsync("CloseModal", "#exampleModal");
}
}
現在可以從 c# 代碼中關閉模式，例如在呼叫提交方法時。
這個邏輯對我有用。我敢肯定還有其他更好的解決方案，但我真的希望它可以幫助有需要的人。
和平
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437647.html
上一篇：Bootstrap5模態未關閉
下一篇：為什么我的搜索欄沒有向右對齊？