ASP.NET MVC第020天_HtmlHelper介紹_用法筆記需要留意的細節

- 11月 16, 2021

在.net mvc 檢視裡面我們可以透過原生的html5來設計網頁表單
但有些時候可能會類似需要由後端來控制

畫面樣式邏輯或者想提高重複使用性

在.net webform中

提供的是WebControl 跟可自訂的User Control , Server Control等等

在MVC中則是透過HtmlHelper的class來更便於View的轉寫設計更快速產生html

HtmlHelper會幫我們在Razor的View 去render出原生html標籤，使用Extension Method來實作。

引用自System.Web.Mvc.Html Namespace之下

https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.html?view=aspnet-mvc-5.2

基本上又有分三種:

1.Inline HTML Helpers

You can create your own HTML Helper with the following syntax.
@helper HelperName(parameters)
{
    // code
}
To use the above-created helper we use the following syntax
@HelperName(parameters)

2.Built-in HTML Helpers

又有再細分三種

2-1.Standard HTML Helpers
2-2.Strongly Typed HTML Helpers
2-3.Templated HTML Helpers

3.Custom HTML Helpers

這裡只先針對Built-in HTML Helpers

先做分享

有黃色標記起來的算是最常使用的

2-1.Standard HTML Helpers

以下為對照表

@Html.ActionLink() - Used to create link on html page

@Html.TextBox() - Used to create text box

@Html.CheckBox() - Used to create check box

@Html.RadioButton() - Used to create Radio Button

@Html.BeginFrom() - Used to start a form

@Html.EndFrom() - Used to end a form

@Html.DropDownList() - Used to create drop down list

@Html.Hidden() - Used to create hidden fields

@Html.label() - Used for creating HTML label is on the browser

@Html.TextArea() - The TextArea Method renders textarea element on browser

@Html.Password() - This method is responsible for creating password input field on browser

@Html.ListBox() - The ListBox helper method creates html ListBox with scrollbar on browser

2-2.Strongly Typed HTML Helpers
傳入參數為lambda表示式而且通常是搭配自訂的Model Entity Class在撰寫

只針對特定的一些Model Objects來搭配render 出 html tag

而非所有View Data資料

@Html.HiddenFor()

@Html.LabelFor()

@Html.TextBoxFor()

@Html.RadioButtonFor()

@Html.DropDownListFor()

@Html.CheckBoxFor()

@Html.TextAreaFor()

@Html.PasswordFor()

@Html.ListBoxFor()

2-3.Templated HTML Helpers

Display

@Html.Display()

@Html.DisplayFor()

@Html.DisplayName()

@Html.DisplayNameFor()

@Html.DisplayText()

@Html.DisplayTextFor()

@Html.DisplayModelFor()

Edit / Input

@Html.Editor()

@Html.EditorFor()

@Html.EditorForModel()

需要留意的細節

在使用

有用到css樣式的記得要使用@class來設置避免跟保留字混淆

一般通常較常用到的html attribute但是又剛好在C#裡面有對應的保留字時候

前面就會多加上@來區別這是for html用的不是Razor C#那邊要用的

所以經常看到類似如下一些網路範本

1
2
3

@Html.TextBoxFor(m => m.ID, new { @readonly = "readonly" })
@Html.TextBoxFor(m => m, new { disabled = "disabled", @readonly = "readonly" })
@Html.EditorFor(m => m.issueDate, new{ @class="inp", @style="width:200px", @MaxLength = "200"})

若要資料不可編輯只能唯讀可這樣子配置

htmlAttributes = new { disabled = "disabled" }

但若要把資料POST到後端不可以這樣子設置

要改採用@readonly=readonly來設置唯讀

htmlAttributes = new { readonly= "readonly" }

如下圖只有readonly的那個才能POST到server端事件

1
2

@Html.EditorFor(model => model.MaterialCode, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
@Html.EditorFor(model => model.ManufactureCode, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })