Razor 類庫#

這里只對 RCL 創建和使用的做一些簡單的概述，詳細內容參考官方文檔使用 Razor 類庫 (RCL) 中的 ASP.NET Core Razor 組件。

創建#

創建 Razor 類庫跟創建普通類庫步驟一樣，關鍵步驟如下：

從 ASP.NET Core 項目模板列表中選擇“Razor 類庫”
在“其他信息”對話框中，請勿選擇“支持頁面和視圖”

使用#

在項目中使用 RCL 中組件的方法跟使用普通類庫的方法一樣：

使用包含 RCL 命名空間的完整組件類型名稱
如果 Razor 的 @using 指令聲明了 RCL 的命名空間，則可以使用不含 RCL 命名空間的名稱添加各個組件。使用以下方法：

在頂級 _Imports.razor 文件中包含 @using 指令，使庫的組件可用于整個項目。
將指令添加到任何級別的 _Imports.razor 文件，將命名空間應用于文件夾中的單個組件或一組組件。
將 @using 指令添加到各個組件；
將 @using 指令添加到 _Imports.razor 文件：

使可路由組件可從 RCL 獲取#

若要使 RCL 中的可路由組件可用于直接請求，必須向應用的路由器公開 RCL 的程序集。打開服務器項目的 Program.cs 文件，并添加以下代碼：

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MyComponents.Client._Imports).Assembly)
    //添加以下代碼，引入RCL的程序集
    .AddAdditionalAssemblies(typeof(RazorClassLibrary1._Imports).Assembly);

靜態資源#

RCL 的靜態資產可用于任何使用該庫的應用，將靜態資產放在 RCL 的 wwwroot 文件夾中，并在應用中使用以下路徑引用靜態資產：

_content/{PACKAGE ID}/{PATH AND FILE NAME}

{PACKAGE ID} ：庫的包 ID ，如果沒有指定則包 ID 默認為項目的程序集名稱。
{PATH AND FILE NAME} ： wwwroot 下的路徑和文件名。

此路徑格式還用于應用中由添加到 RCL 的 NuGet 包提供的靜態資產。

表單#

組件呈現的是標準的 HTML 元素，實際上可以使用標準的 HTML 表單元素。但還是建議使用各種 Blazor 輸入控件，因為它們帶有額外的功能。關于組件更詳細的內容，請參考官方文檔ASP.NET Core Blazor表單概述。

EditForm#

Blazor 中提供了一個可用的輸入組件的標準集合，所有組件都派自基類 InputBase<T> :

標準輸入組件#

下面是一個標準輸入組件使用示例，都比較簡單就不再單獨介紹：

@page "/demo"
@rendermode InteractiveAuto


<h3>Demo</h3>
<EditForm Model="FormData"> 
    <label>輸入復選框 Boolean:</label> 
    <InputCheckbox @bind-Value=FormData.Boolean /> <br />


    <label>輸入日期 DateTime:</label> 
    <InputDate @bind-Value=FormData.DateTime ParsingErrorMessage="必須是日期" /> <br />


    <label>輸入數:</label>
    <label>輸入整數 Integer:</label><br />
    <InputNumber @bind-Value=FormData.Integer ParsingErrorMessage="必須是整數值" /> <br />
    <label>輸入十進制 Decimal:</label> <br />    
    <InputNumber @bind-Value=FormData.Decimal ParsingErrorMessage="必須是十進制值" /> <br />


    <label>輸入選擇 Select:</label>
    <InputSelect @bind-Value=FormData.Select>
        @foreach (var item in Enum.GetValues(typeof(State)))
        {
            <option value=@item>@item.ToString()</option>
        }
    </InputSelect><br />


    <label>輸入單選 Radio:</label> <br />
    <InputRadioGroup @bind-Value=FormData.Radio>
        @foreach (var item in Enum.GetValues(typeof(State)))
        {
            <InputRadio Value=@item />
            @item.ToString()
            <br />
        }
    </InputRadioGroup>


    <label>輸入文本 String:</label> <br />
    <InputText @bind-Value=FormData.String /> <br />


    <label>輸入多行文本 String:</label> <br />
    <InputTextArea @bind-Value=FormData.MultiLineStr /> <br />       
</EditForm>

@code
{
    //指示應從表單數據中提供關聯屬性的值
    [SupplyParameterFromForm]
    private TestModel FormData  { get; set; } = new TestModel();


    class TestModel
    {
        public bool Boolean { get; set; }
        public DateTime? DateTime { get; set; }
        public int Integer { get; set; }
        public decimal Decimal { get; set; }
        public string String { get; set; }
        public string MultiLineStr { get; set; }
        public State Select { get; set; } = State.Active;
        public State Radio { get; set; }= State.Active;
    }


    public enum State
    {
        Pending,
        Active,
        Suspended
    }
}

運行效果如下：

驗證#

表單驗證需要注意兩點：

必須在EditForm內添加一個驗證組件 DataAnnotationsValidatorEditForm
可以通過兩種方式向用戶顯示驗證錯誤消息，兩者互不沖突可以同時使用：

ValidationSummary：顯示表單中所有錯誤的完整列表
ValidationMessage：顯示特定輸入的錯誤消息

下面是一個簡單的示例，注意要使用OnValidSubmit事件，否則驗證不會生效：

@page "/demo"
@rendermode InteractiveAuto
@using System.ComponentModel.DataAnnotations


<h3>Demo</h3>
<EditForm Model=@Person FormName="personForm" OnValidSubmit=@SubmitForm>
    @* 必須指定一個驗證機制 *@
    <DataAnnotationsValidator />
    @* 顯示表單中所有錯誤的完整列表 *@
    <ValidationSummary />


    <div class="form-group">
        <label for="Name">Name</label>
        <InputText @bind-Value=Person.Name/>
        @* 顯示單個字段的錯誤消息 *@         
        <ValidationMessage For="() => Person.Name" />
    </div>


    <div class="form-group">
        <label for="Age">Age</label>
        <InputNumber @bind-Value=Person.Age/>
        @* 引用"" 和 Razor 表達式@(...) 兩種形式都是等效的
        1.引用的表格更易于閱讀，
        2.Razor 表達式可以清楚地知道定義的是表達式而不是字符串 *@
        <ValidationMessage For=@(() => Person.Age) />
    </div>
    <input type="submit" class="btn btn-primary" value="保存" />
</EditForm>

@code {
    //驗證需要引入命名空間 System.ComponentModel.DataAnnotations
    public class PersonModel
    {
        //指定屬性不能為 null 或為空
        [Required(ErrorMessage = "姓名不能為空。")]
        public string Name { get; set; }


        //指定屬性的有效值范圍（從 18 到 80），還提供適合向用戶顯示的錯誤消息
        [Range(18, 80, ErrorMessage = "年齡必須在18歲到80歲之間。")]
        public int Age { get; set; }
    }


    [SupplyParameterFromForm]
    private PersonModel Person { get; set; } = new PersonModel();
}

運行效果如下：

HTML 表單#

使用常規 HTML <form> 標簽創建表單，并指定用于處理提交的表單請求的 @onsubmit 處理程序：

@* 必須提供表名 *@
<form @formname="htmlForm" @onsubmit="SubmitForm">
    @* 為了安全起見，必須提供 AntiforgeryToken *@
    <AntiforgeryToken />    
    <div class="form-group">
        <label for="Name">Name</label>
        <InputText @bind-Value=Person.Name class="form-control" />
    </div>
    <div class="form-group">
        <label for="Age">Age</label>
        <InputNumber @bind-Value=Person.Age class="form-control" />
    </div>
    <input type="submit" class="btn btn-primary" value="保存" />
</form>