隨着技術的發展，ASP.NET Core MVC也推出了好長時間，經過不斷的版本更新迭代，已經越來越完善，本系列文章主要講解ASP.NET Core MVC開發B/S系統過程中所涉及到的相關內容，適用於初學者，在校畢業生，或其他想從事ASP.NET Core MVC 系統開發的人員。
經過前幾篇文章的講解，初步瞭解ASP.NET Core MVC項目創建，啓動運行，以及命名約定，創建控制器，視圖，模型，接收參數，傳遞數據ViewData，ViewBag，路由，頁面佈局，wwwroot和客戶端庫，Razor語法，EnityFrameworkCore與數據庫，HttpContext，Request，Response，Session，序列化，文件上傳，自動映射等內容，今天繼續講解ASP.NET Core MVC 中Html輔助標籤等相關內容，僅供學習分享使用。
概述
ASP.NET Core MVC不僅支持原生的Html標籤，還支持自帶的Html輔助標籤，而且所有的Html輔助標籤都是通過IHtmlHelper的擴展方法來實現的。在大多數情況下，HTML 輔助標籤僅僅是一個返回字符串的方法。通過 MVC，您可以創建您自己的輔助標籤，或者直接使用內建的 HTML 輔助標籤。
使用輔助標籤，具有以下好處：
- 通知Html輔助標籤，可以保持統一風格。
- 可以進行模型校驗。
超鏈接
超鏈接在Html中是a標籤，在ASP.NET Core MVC 可以通過@Html.ActionLink 或者 @Html.RouteLink實現。
ActionLink方法具有7個重載，各個參數的含義如下：
- linkText：超鏈接顯示文本，不可以爲空。
- actionName：鏈接的目標方法名稱ActionName。
- controllerName：鏈接的控制器名稱，可跨控制器跳轉。
- routeValues：object類型的路由數據，可以接收匿名對象，如：new {id=1,name="公子小六"}。
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new {style="color:red;width=100px",@class="link"}。
- protocol：協議，如：http，https等。
- hostname：主機服務器名稱。
- fragment：URL 片段名稱（定位點名稱）。
超鏈接示例：
1 @* 2 <a class="link" href="/Student/Index/1?name=%E5%85%AC%E5%AD%90%E5%B0%8F%E5%85%AD" style="color:red;width=100px">點擊跳轉</a> 3 等價於 4 *@ 5 @Html.ActionLink("點擊跳轉","Index","Student",new {id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"})
注意：因爲class是C#關鍵字，所以如果需要表示樣式，需要添加@前綴
RouteLink不支持如ActionLink中指定actionName，controllerName那種，只支持指定路由名稱。RouteLink具有5個重載參數，具體如下所示：
- linkText：超鏈接顯示文本，不可以爲空。
- routeName：路由名稱。
- routeValues：object類型的路由數據，可以接收匿名對象，如：new {id=1,name="公子小六"}。
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new {style="color:red;width=100px",@class="link"}。
RouteLink示例：
1 <!--以下RouteLink和ActionLink輸出結果一致--> 2 @Html.RouteLink("點擊跳轉","Default",new {controller="Student",action="Index", id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"})
form標籤
form標籤主要用於表單的提交，form輔助標籤用@Html.BeginForm或者@Html.BeginRouteForm表示，且用@using包裹，用於表示form表單的起始和結束。
空的表單如下所示：
1 <form action="/User/Save" method="post"> 2 3 </form>
用Html輔助標籤，如下所示：
1 @using (Html.BeginForm("Save","User",FormMethod.Post)) 2 { 3 4 }
@Html.BeginForm重載參數如下所示：
- actionName：鏈接的目標方法名稱ActionName。
- controllerName：鏈接的控制器名稱，可跨控制器跳轉。
- method：是form請求傳遞參數的方式，是一個枚舉類型FormMethod，有Get和Post兩種方式。
- routeValues：object類型的路由數據，可以接收匿名對象，如：new {id=1,name="公子小六"}。
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new {style="color:red;width=100px",@class="link"}。
- antiforgery：是否將身份驗證令牌添加到表單中有助於防止請求僞造。
@Html.BeginRouteForm和@Html.BeginForm一致，主要是接收路由參數，不接收字符串格式的action和controller，此處不再演示。
文本框與Label
文本框通過@Html.TextBox方法實現，並且在form表單標籤之內，@Html.TextBox共有5個重載，主要參數如下所示：
- expression：表達式名稱，一般用於表示文本框的name。
- value：文本框中的值，可以綁定模型中的值。
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new {style="color:red;width=100px",@class="link"}。
- format：格式
Label主要用於顯示只讀文本。共有3個重載，主要參數如下所示：
- expression：表達式名稱，一般用於表示當時顯示的文本是對應於哪個控件。
- labelText：要顯示的 文本內容。
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new {style="color:red;width=100px",@class="link"}。
文本框和Label示例，如下所示：
1 @Html.Label("Id","User Id",new { style="width:90px;"}); 2 @Html.TextBox("Id",Model.Id) 3 <br /> 4 <br /> 5 @Html.Label("Name","User Name",new { style="width:90px;"}) 6 @Html.TextBox("Name",Model.Name) 7 <br /> 8 <br /> 9 @Html.Label("Mail","E-Mail",new { style="width:90px;"}) 10 @Html.TextBox("Mail",Model.Email)
注意：以上@Html.Text三個地方都一致，但是在生成的原生Html中，前兩個有data-val="true" data-val-required="the field is required"屬性，在Mail中並沒有這兩個屬性，這又是爲什麼呢？
密碼框
密碼框，主要用於輸入密碼，相當於input type="password"，用@Html.Password輔助標籤實現，主要有2個重載，主要參數有以下三個：
- expression：表達式名稱，一般用於表示文本框的name。
- value：密碼框中的值，可以綁定模型中的值，也可以爲空
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new { placeHolder="請輸入密碼"}。
密碼框示例：
1 @Html.Label("Pwd","Password",new { style="width:90px;"}) 2 @Html.Password("Pwd",null,new {placeHolder="請輸入密碼"})
單選框和複選框
單選框主要用於從多個選項中選擇一個，各個選項之間是互斥的。單選框用@Html.RadioButton表示，主要有3個重載，各個參數說明如下：
- expression：表達式名稱，一般用於表示文本框的name。
- value：單選框的值
- isChecked：是否默認選中
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new { placeHolder="請輸入密碼"}。
單選框示例如下所示：
1 @Html.Label("Sex","性別",new { style="width:90px;"}) 2 @Html.RadioButton("Sex","Male",false) <span>男</span> 3 @Html.RadioButton("Sex", "FeMale", false) <span>女</span>
複選框主要用於多個選項中選擇一個或多個，各個選項之間是兼容的。複選框用@Html.CheckBox表示，主要有3個重載，各個參數說明如下：
- expression：表達式名稱，一般用於表示文本框的name。
- isChecked：是否默認選中
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象，如：new { value="pingpang" }
複選框示例，如下所示：
1 @Html.Label("Hobby","愛好",new { style="width:90px;"}) 2 @Html.CheckBox("Hobby",false,new { value="football" }) <span>足球</span> 3 @Html.CheckBox("Hobby",false,new { value="basketball" }) <span>籃球</span> 4 @Html.CheckBox("Hobby",false,new { value="pingpang" }) <span>乒乓球</span>
文本域
文本域主要用於輸入大量文本內容，一般顯示爲多行多列的文本輸入框。共有4個重載，各個參數說明如下所示：
- expression：表達式名稱，一般用於表示文本框的name。
- value：文本域內容
- rows：行數
- columns：列數
- htmlAttributes：超鏈接Html屬性，如：style，class，width，height等，可以接收匿名對象。
文本域示例，如下所示：
1 @Html.Label("Description","簡介",new { style="width:90px;"}) 2 @Html.TextArea("Description",null,5,20,new {})
完整示例
上述介紹了form , label，textbox，passord，radio，checkbox，textarea，actionlink等輔助標籤，完整代碼如下所示：
1 @model DemoCoreMVC.Models.User; 2 @* 3 <a class="link" href="/Student/Index/1?name=%E5%85%AC%E5%AD%90%E5%B0%8F%E5%85%AD" style="color:red;width=100px">點擊跳轉</a> 4 等價於 5 *@ 6 @Html.ActionLink("點擊跳轉","Index","Student",new {id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"}) 7 <br /> 8 @Html.RouteLink("點擊跳轉","Default",new {controller="Student",action="Index", id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"}) 9 @using (Html.BeginForm("Save","User",FormMethod.Post)) 10 { 11 @Html.Label("Id","User Id",new { style="width:90px;"}); 12 @Html.TextBox("Id",Model.Id) 13 <br /> 14 <br /> 15 @Html.Label("Name","User Name",new { style="width:90px;"}) 16 @Html.TextBox("Name",Model.Name) 17 <br /> 18 <br /> 19 @Html.Label("Mail","E-Mail",new { style="width:90px;"}) 20 @Html.TextBox("Mail",Model.Email) 21 22 <br /> 23 <br /> 24 @Html.Label("Pwd","Password",new { style="width:90px;"}) 25 @Html.Password("Pwd",null,new {placeHolder="請輸入密碼"}) 26 <br /> 27 <br /> 28 @Html.Label("Sex","性別",new { style="width:90px;"}) 29 @Html.RadioButton("Sex","Male",false) <span>男</span> 30 @Html.RadioButton("Sex", "FeMale", false) <span>女</span> 31 <br /> 32 <br /> 33 @Html.Label("Hobby","愛好",new { style="width:90px;"}) 34 @Html.CheckBox("Hobby",false,new { value="football" }) <span>足球</span> 35 @Html.CheckBox("Hobby",false,new { value="basketball" }) <span>籃球</span> 36 @Html.CheckBox("Hobby",false,new { value="pingpang" }) <span>乒乓球</span> 37 <br /> 38 <br /> 39 @Html.Label("Description","簡介",new { style="width:90px;vertical-align:top;"}) 40 @Html.TextArea("Description",null,3,20,new {}) 41 }
與上述輔助標籤對應的Html原生代碼，如下所示：
1 <a class="link" href="/Student/Index/1?name=%E5%85%AC%E5%AD%90%E5%B0%8F%E5%85%AD" style="color:red;width:100px">點擊跳轉</a> 2 <br> 3 <a class="link" href="/Student/Index/1?name=%E5%85%AC%E5%AD%90%E5%B0%8F%E5%85%AD" style="color:red;width:100px">點擊跳轉</a> 4 <form action="/User/Save" method="post"> 5 <label for="Id" style="width:90px;">User Id</label> 6 <input data-val="true" data-val-required="The Id field is required." id="Id" name="Id" type="text" value="1"> <br> 7 <br> 8 <label for="Name" style="width:90px;">User Name</label> 9 <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="公子小六"> <br> 10 <br> 11 <label for="Mail" style="width:90px;">E-Mail</label> 12 <input id="Mail" name="Mail" type="text" value="[email protected]"> 13 <br> 14 <br> 15 <label for="Pwd" style="width:90px;">Password</label> 16 <input id="Pwd" name="Pwd" placeholder="請輸入密碼" type="password"> 17 <br> 18 <br> 19 <label for="Sex" style="width:90px;">性別</label> 20 <input id="Sex" name="Sex" type="radio" value="Male"> <span>男</span> 21 <input id="Sex" name="Sex" type="radio" value="FeMale"> <span>女</span> 22 <br> 23 <br> 24 <label for="Hobby" style="width:90px;">愛好</label> 25 <input id="Hobby" name="Hobby" type="checkbox" value="football"> <span>足球</span> 26 <input id="Hobby" name="Hobby" type="checkbox" value="basketball"> <span>籃球</span> 27 <input id="Hobby" name="Hobby" type="checkbox" value="pingpang"> <span>乒乓球</span> 28 <br> 29 <br> 30 <label for="Description" style="width:90px;vertical-align:top;">簡介</label><textarea cols="20" id="Description" name="Description" rows="3"></textarea><input name="__RequestVerificationToken" type="hidden" value="CfDJ8BFjNYa4u1JEvSFtRevYkrqryxwT0_r_eRNKsK4VToEBDTdl_uU7Qt7Z3_2Eu8xd0eiz_eMhzkSssfX-kTgLnui_qq7uXql9na9LwfkmvViszQE499vE9vrap83T6vhV16A9nEK6PPY6gzpPMlnWiVc"><input name="Hobby" type="hidden" value="false"><input name="Hobby" type="hidden" value="false"><input name="Hobby" type="hidden" value="false"> 31 </form>
對應的生成的頁面，如下所示：
以上就是ASP.NET Core MVC 從入門到精通之Html輔助標籤第一部分內容。