Blazor 頁面組件(2)

Blazor應用中, 是使用組件來構建用戶界面, 例如頁面、窗口、對話框等。

點擊觀看視頻教程

組件

使用C#和HTML標記的組合, Blazor組件稱之為Razor組件, 文件名以 (.razor)結尾的文件。

1.如下所示, 在VisualStudio創建Blazor應用模板后的截圖, 展示了Page文件夾中定義的razor文件。

注意:所有的Blazor組件, 都必須大寫字符開頭, 否則無效。如上圖所示 ↑

2.關於.razor 頁面
對於每個 .razor頁面來說, 包含了兩個部分:
1. Html標記的UI
2. C#編寫的代碼塊
如下所示,該頁面中定義了一個HTML的標題, 通過C#代碼, 給標簽定義了一個內容以及標題的斜體樣式:

    <h1 style="font-style:@_headingFontStyle">@_headingText</h1>

@code {
    private string _headingFontStyle = "italic";
    private string _headingText = "你好,世界!";
}

實際的效果,如下所示:

通過在Html標簽中, 通過使用在字段名稱前添加@前綴, 即可呈現C#字段。
注意: @code{ } 括號中, 允許我們使用C#定義我們熟悉的屬性、字段、方法、以及各類處理事件等。

組件參數

做過客戶端開發(WPF/Winform)我們都應該清楚, 我們經常用到的一些控件元素, 例如 Button、TextBox、她們都有自己的Name、Text等公共屬性,我們可以自由的定義它。
那么在razor中, 組件更加類似於我們的自定義控件(UserControl)或者模板(Template), 我們可以在其中定義公開屬性, 當外部使用這個組件(.razor)文件時, 即可為其設置綁定值。例:

1.首先, 定義一個名為 SurveyPrompt.razor 組件, 代碼為顯示一個標題:
在@code { } 中, 定義了一個具有[Parameter]的公共屬性Title , 這種參數就稱之為 組件參數

    <h1>@Title</h1>

@code {
    [Parameter]
    public string Title { get; set; }
}

2.接着, 在定義Index.razor 中, 即可使用上面的組件, 並且為其設置Title 屬性:

最終界面顯示如下所示:

組件多參數 @attributes

組件多參數, 支持多個參數定義到一個對象字典當中, 如下所示 ,第二個Input使用 @attributes語法關聯字段進行綁定操作:

<input title="@Title" value="@Value"  />

<input @attributes="ButtonAttributes" />


@code {
    [Parameter]
    public string Title { get; set; } = "Hello";

    [Parameter]
    public string Value { get; set; } = "10";

    [Parameter]
    public Dictionary<string, object> ButtonAttributes { get; set; } = new Dictionary<string, object>()
{
        { "title","Hello" } ,
        { "value","10" } ,
    };
}

組件方法

定義組件方法

與組件參數相同, 如果我們需要為組件公開一個事件, 我們同樣的在 @code {} 定義方法, 如下所示, 給組件中的按鈕定義了一個按鈕方法,並且標識 [Parameter]特性:

    <button @onclick="OnClickCallback">
       Click
    </button>
</div>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

使用組件方法

引用該組件, 通過OnClickCallBack為TestComponent組件中的按鈕綁定一個回調函數。

<TestComponent 
                OnClickCallback="@ShowMessage">
</TestComponent>