[筆記][Blazor]使用對話視窗Component無法動作與解決方式

在上一篇【[筆記][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">&times;</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();

就醬子,測試下來,就可以如預期的把內容顯示出來。

末記

其實這方式應該不是正統的作法,算是一個特別的作法。如果網友有正確的做法,懇請您留言告訴小喵。


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat