在上一篇【[筆記][Blazor][CRUD]Blazor透過WebAPI進行CRUD範例】留下一個懸念,在套用對話視窗元件,第二次呼叫時卻沒有任何動靜,這一篇來記錄一下小喵測試的可能問題,以及解決的方式。
緣起
在上一篇【[筆記][Blazor][CRUD]Blazor透過WebAPI進行CRUD範例】留下一個懸念,在套用對話視窗元件,第二次呼叫時卻沒有任何動靜,這一篇來記錄一下小喵測試的可能問題,以及解決的方式。
與上次相同參數傳入,導致沒反應
小喵從操作的行為來猜測,是否因為元件的參數,第二次之後傳入的與第一次都一模一樣,所以不會有動作。
為了證實這個猜測,小喵就嘗試著,傳入的參數 Title ,嘗試加上年月日時分秒,讓每次的內容都可以不一樣。
經過這麼一測試,果然對話訊息可以如預期的,每次點選每次顯示了。
但是如果每次的顯示都多了年月日時分秒,好像也不太好,那麼是否可以多一個參數,傳入的時候每次不同,但是這參數不顯示呢?
元件(Component)增加參數NowTime
我們在元件中新增一個NowTime的參數,每次抓當下的時間傳入,讓每次的參數都有改變,於是將 ShowMsg.razor 調整如下:
@if (showMsg)
{
<!-- Modal -->
<div class="modal fade show" id="exampleModal" tabindex="-1" style="display:block" role="dialog" aria-modal="true" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">@Title</h5>
<button type="button" class="close" aria-label="Close" @onclick="CloseMsg">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@((MarkupString)Msg)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" @onclick="CloseMsg">關閉</button>
</div>
</div>
</div>
</div>
<!--End Modal-->
}
@code {
[Parameter]
public bool showMsg { get; set; } = false;
[Parameter]
public string Title { get; set; } = "";
[Parameter]
public string Msg { get; set; } = "";
[Parameter]
public string NowTime { get; set; } = "";
public override async Task SetParametersAsync(ParameterView parameters)
{
await base.SetParametersAsync(parameters);
}
private void CloseMsg()
{
showMsg = false;
Title = "";
Msg = "";
}
}
使用端,當然要對應的調整
<ShowMsg Title="@oMsg.Title" Msg="@oMsg.Msg" showMsg="@oMsg.showMsg" NowTime="@oMsg.NowTime"></ShowMsg>
呼叫的時候,多個動作傳遞 NowTime
oMsg.Title = "訊息:";
oMsg.Msg = ErrMsg;
oMsg.showMsg = true;
oMsg.NowTime = NowTime;
StateHasChanged();
就醬子,測試下來,就可以如預期的把內容顯示出來。
末記
其實這方式應該不是正統的作法,算是一個特別的作法。如果網友有正確的做法,懇請您留言告訴小喵。
以下是簽名:
- 歡迎轉貼本站的文章,不過請在貼文主旨上加上【轉貼】,並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】,感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫,如果您需要C#的Code,也許您可以試著用線上的工具進行轉換,這裡提供幾個參考
Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |