Blazor應(yīng)用中, 是使用組件來構(gòu)建用戶界面, 例如頁(yè)面、窗口、對(duì)話框等。

組件

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

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

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

2.關(guān)于.razor 頁(yè)面

對(duì)于每個(gè) .razor頁(yè)面來說, 包含了兩個(gè)部分:

1. Html標(biāo)記的UI

2. C#編寫的代碼塊

如下所示,該頁(yè)面中定義了一個(gè)HTML的標(biāo)題, 通過C#代碼, 給標(biāo)簽定義了一個(gè)內(nèi)容以及標(biāo)題的斜體樣式:

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

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

實(shí)際的效果,如下所示:

通過在Html標(biāo)簽中, 通過使用在字段名稱前添加@前綴, 即可呈現(xiàn)C#字段。

注意: @code{ } 括號(hào)中, 允許我們使用C#定義我們熟悉的屬性、字段、方法、以及各類處理事件等。

組件參數(shù)

做過客戶端開發(fā)(WPF/Winform)我們都應(yīng)該清楚, 我們經(jīng)常用到的一些控件元素, 例如 Button、TextBox、她們都有自己的Name、Text等公共屬性,我們可以自由的定義它。

那么在razor中, 組件更加類似于我們的自定義控件(UserControl)或者模板(Template), 我們可以在其中定義公開屬性, 當(dāng)外部使用這個(gè)組件(.razor)文件時(shí), 即可為其設(shè)置綁定值。例:

1.首先, 定義一個(gè)名為 SurveyPrompt.razor 組件, 代碼為顯示一個(gè)標(biāo)題:

在@code { } 中, 定義了一個(gè)具有[Parameter]的公共屬性Title , 這種參數(shù)就稱之為 組件參數(shù)

    <h1>@Title</h1>

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

2.接著, 在定義Index.razor 中, 即可使用上面的組件, 并且為其設(shè)置Title 屬性:

最終界面顯示如下所示:

組件多參數(shù) @attributes

組件多參數(shù), 支持多個(gè)參數(shù)定義到一個(gè)對(duì)象字典當(dāng)中, 如下所示 ,第二個(gè)Input使用 @attributes語(yǔ)法關(guān)聯(lián)字段進(jìn)行綁定操作:

<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" } ,
    };
}

組件方法

定義組件方法

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

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

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

使用組件方法

引用該組件, 通過OnClickCallBack為TestComponent組件中的按鈕綁定一個(gè)回調(diào)函數(shù)。

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

到此這篇關(guān)于Blazor頁(yè)面組件用法的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論