[Blazor][筆記][Bootstrap][Modal] 寫個【對話訊息視窗】元件(Component)

我們這一篇想來點共用的元件(Component),用 Bootstrap 的對話視窗(Modal) 來顯示指定的訊息。

緣起

剛好小喵想要一個共用的元件,使用Bootstrap的Modal來顯示指定的訊息,所以測試了一下相關的撰寫方式,並筆記下來,以供後來有需要時參考。

Data

我們建立一個類別,用來存放該視窗需要的一些屬性,相關程式碼如下:

    public class MsgInfo
    {
        /// <summary>
        /// 訊息標題
        /// </summary>
        public string Title { get; set; } = "";

        /// <summary>
        /// 訊息內容
        /// </summary>
        public string Msg { get; set; } = "";

        /// <summary>
        /// 是否顯示訊息
        /// </summary>
        public bool showMsg { get; set; } = false;

    }

 

元件(Component):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; } = "";


    private void CloseMsg()
    {
        showMsg = false;
    }
}

 

測試使用

我們在 Index.razor 裡面,撰寫測試的相關程式碼如下:

@page "/"
@using BlazorComponentParameter.Data;

<h1>Hello, world!</h1>

Welcome to your new app.
<ShowMsg Title="@oMsg.Title" Msg="@oMsg.Msg" showMsg="@oMsg.showMsg"></ShowMsg>
    
<button @onclick="testMsg">顯示訊息</button>


<SurveyPrompt Title="How is Blazor working for you?" />
@code{
    private MsgInfo oMsg = new MsgInfo();

    private void testMsg()
    {
        string NowTime = DateTime.Now.ToString("HH:mm:ss");
        oMsg.Title = "測試標題-" + NowTime;
        oMsg.Msg = "測試內容-<br>" + NowTime;
        oMsg.showMsg = true;
    }
}

測試運行相關畫面如下:

末記

整理一下本篇用到的一些技巧,包括:

  • 元件(Component)使用參數(Parameter)
  • 套用元件,使用參數結合變數
  • Code中設定變數,連動參數
  • Bootstrap Modal直接顯示
  • 透過Code變數控制Modal顯示與隱藏

筆記提供未來自己參考

^_^

 

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)