2.3 HtmlHelper 與 Input元素

ASP.NET MVC 實務精要|第二章 表單

System.Web.Mvc 命名空間中的 HtmlHelper 類別,提供協助開發人員於伺服器端建立HTML表單input元素的相關內容,到目前為止我們已經看到了Form、Text以及Label的實際應用,其它的表單元素同樣可以透過相對應的方法調用完成配置,這一節緊接著我們來看看表單中最重要的input元素,下表列舉建立相關元素的方法。

HtmlHelper方法
說明
CheckBox
建立核取方塊標籤。
RadioButton
建立選項按鈕。
Hidden
建立隱藏式表單欄位。
Password
建立支援密碼輸入的文字方塊。
TextArea
建立多行文字方塊。
TextBox
建立文字方塊。

表列的HTML Helper 可以直接整合伺服器端語法與相關物件,並且建立常見的表單輸入元素,每一個方法均有數種多載版本,而其中均包含了兩個參數的版本,分別用以設定相關標籤的 id、name以及value屬性,現在回到稍早介紹表單時提及的TextBox,我們從這個最常見的輸入元素進行討論。考慮以下的配置:

Html.TextBox("tb")

這會在網頁上建立一個input 標籤,其中參數值tb成為 name 與 id 屬性值,並且其 type 屬性為 text ,輸出結果如下:

<input id="tb" name="tb" type="text" value="" />

如果要指定其中的value屬性值,則指定第二個參數如下:

Html.TextBox("msg","hello")

則最後輸出的input元素如下:
第一個參數 msg 成為id與name 屬性,第二個參數 hello 則是value屬性,呈現在文字方塊上面。其它幾個input方法原理相同,以下逐一進行說明。

<input id="msg" name="msg" type="text" value="hello" />

第一個參數 msg 成為id與name 屬性,第二個參數 hello 則是value屬性,呈現在文字方塊上面。其它幾個input方法原理相同,以下逐一進行說明。

CheckBox與 RadioButton

CheckBox呈現一個核取方塊,語法如下:

@Html.CheckBox(cname)


其中的cnam是 checkbox標籤的 id 與 name 屬性名稱,你可以指定第二個參數,以決定輸出的CheckBox 是否已勾選,預設是未勾選,考慮以下的配置:

@Html.CheckBox("cb")

這一行形成HTML內容如下:

<input id="cb" name="cb" type="checkbox" value="true" />
<input name="cb" type="hidden" value="false" />

當使用者未勾選 checkbox 的狀態下不會有回傳值,因此MVC另外配置一個隱藏性的欄位以儲存其值。現在另外指定布林值參數如下:

@Html.CheckBox("cb", false)
@Html.CheckBox("cb", true)

第一行指定了false,表示方塊未核取,與上述未指定的預設值相同,指定為 true 則是已勾選,會出現以下的結果:

<input checked="checked" id="cb" name="cb" type="checkbox" value="true" />

RadioButton則是建立一個選項按鈕,語法如下:

@Html.RadioButton("rb","rbvalue", true)

這會建立一個已選取的選項按鈕,如果第三個參數值沒有設定,或是設為false,則不會選取,以下為輸出結果:

<input checked="checked" id="rb" name="rb" type="radio" value="rbvalue" />

Hidden

這會建立一個隱藏欄位,語法如下:

@Html.Hidden(hname,hvalue)

第一個hname為 name 屬性與id屬性值,而hvalue為value屬性值,同TextBox,若是沒有指定hvale則為空值。隱藏欄位通常用來儲存避免使用者接觸的資料,不會顯示在網頁上,例如以下的配置:

@Html.Hidden("hd", "hdvalue")

這會在網頁上輸出以下會HTML:

<input id="hd" name="hd" type="hidden" value="hdvalue" />

TextBox/ Password/ TextArea

TextBox、Password與 TextArea均是文字輸入欄位,第一個TextBox會建立最單純的文字輸入方塊,讀者應該已經相當熟悉,如果是 Password ,則是 password類型的input元素,其中的內容則以密碼符號顯示,當你需要一個密碼資料的輸入欄位,可以配置如下的內容:

@Html.Password("pwd", "123456")

這會輸出以下的結果:

<input id="pwd" name="pwd" type="password" value="123456" /> 

其中的第二個參數123456如果省略,則不會有value屬性設定。最後,TextArea會建立一個多行的文字方塊元素textarea,以如下的語法為例:

@Html.TextArea("messagearea", "Hello World")

這一行輸出的文字方塊會顯示 Hello World ,並且預設cols屬性為 20 ,rows 屬性為 2 ,輸出結果如下:

<textarea cols="20" id="messagearea" name="messagearea" rows="2">
Hello World
</textarea>

其中的第二個參數值「Hello World」可以省略,同樣會得到一個空白的多行文字方塊。你可以調用不同的版本進一步指定欄數與列數,例如以下的配置:

@Html.TextArea("messagearea", "Hello World",6, 42,null)

其中第三個數值6表示所要建立列數,第四個參數值42表示所要建立的欄數,最後一個參數是必要的,請先指定為空值null,後續會有進一步的討論,最後的輸出結果如下:

<textarea cols="42" id="messagearea" name="messagearea" rows="6">
Hello World
</textarea>

以上是最基本的表單輸入元素,支援一般單純的輸入介面,除此之外,Helper方法另外提供了數種不同版本的多載方法,讓你可以進一步設定input元素的各種屬性,當你需要進一步設定這些屬性的時候就必須選用其它多載的版本。

關於 Label

在HTML的表單中,Label元素與前述的input元素不同,它不支援輸入動作,主要是用來標示某個特定的標籤文字,要建立一個Label,需要的語法如下:

@Html.Label("lb")

這一行置輸出結果如下:

<label for="lb">lb</label>

因為label標籤特性,參數lb除了作為for屬性值,同時顯示為label標籤所要呈現的文字內容,如果要分別設定這兩個屬性值,則必須進一步的使用另外一個多載的版本,考慮以下的配置:

@Html.Label("lb","Hello")

其中第二個參數為網頁上所要呈現的內容,以下為輸出結果:

<label for="lb">Hello</label>
如你所見,輸出的label中,字串Hello取代了原來預設的lb。

沒有留言: