Blazor應用中,是使用元件來構建使用者介面,例如頁面、視窗、對話方塊等。

元件

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

1.如下所示,在VisualStudio建立Blazor應用模板後的截圖,展示了Page資料夾中定義的razor檔案。

注意:所有的Blazor元件,都必須大寫字元開頭,否則無效。如上圖所示 &uarrphEJRPYFvp;

2.關於.razor 頁面

對於每個 .razor頁面來說,包含了兩個部分:

1. Html標記的UI

2. C#編寫的程式碼塊

如下所示,該頁面中定義了一個HTML的標題,通過C#程式碼,給標http://www.cppcns.com

    <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 屬性:

最www.cppcns.com終介面顯示如下所示:

元件多引數 @attributes

元件多引數,支援多個引數定義到一http://www.cppcns.com個物件字典當中,如下所示,第二個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>

到此這篇關於Blazor頁面元件用法的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。