topcat 姍舞之間的極度凝聚

緣起

剛好小喵想要一個共用的元件，使用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顯示與隱藏

筆記提供未來自己參考

^_^

 

---

以下是簽名：

• 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
• 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
  • http://converter.telerik.com/
  • http://www.carlosag.net/tools/codetranslator/
  • http://www.developerfusion.com/tools/convert/vb-to-csharp/

---

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

topcat Blog:http://www.dotblogs.com.tw/topcat