2.4 設定元素屬性

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

當你需要設定input元素的其它各種屬性-例如 id 或是 class ,必須選用其它多載的版本,以文字方塊為例,考慮以下的設定:

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

觀察其輸出的結果:

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

在預設的情形下,第一個參數msg同時被用以設定 id 與 name 屬性,如果要改變這種預設行為,需調用另外一個多載的版本:

@Html.TextBox("msg","Hello Helper",new{id="textBox1"} )

這裏加入第三個參數物件,內容以key=value的形式設定所需的參數值,這裏設定一組 id屬性,最後得到以下的輸出結果:

<input id="textBox1" name="msg" type="text" value="Hello Helper" />

如你所見,其中的id已經被設定為 textBox1 了。當然,在一般的情形下,id與name設定為相同值對於文字方塊不是問題,但是某些特定的情境-例如於網頁上配置一個以上的 radiobutton ,每個radiobutton 都必須具有相同的name屬性以支援彼此互的點選行為,但是不能有相同的id,在這種情形下你必須進一步調整id的屬性值。現在配置兩個radiobutton,內容如下:

@Html.RadioButton("rb", "rbvalue1",  new { id = "rba" })
@Html.RadioButton("rb", "rbvalue2", new { id = "rbb" })     

以下為輸出結果:

<input id="rb" name="rb" type="radio" value="rbvalue1" />
<input id="rb" name="rb" type="radio" value="rbvalue2" />

如你所見,其中出現兩個重複的id值,現在調整如下:

@Html.RadioButton("rb", "rbvalue1",  new { id = "rba" })
@Html.RadioButton("rb", "rbvalue2", new { id = "rbb" })     

最後輸出我們想要的結果:

<input id="rba" name="rb" type="radio" value="rbvalue1" />
<input id="rbb" name="rb" type="radio" value="rbvalue2" />

其中的id屬性已經根據我們的設定完成調整。你可以進一步設定其它的屬性,例如class等等。

@Html.TextBox("msg", "Hello Helper", new { id = "textBox1" ,@class="csa"})

在第三個物件參數中,增加了class設定並且與id以逗號區隔,由於class是關鍵字,因此必須配置@字首,這個參數會在網頁上輸出以下的結果:

<input class="csa" id="textBox1" name="msg" type="text" value="Hello Helper" />

瞭解原理之後,現在你可以根據需求,進行更多的參數設定。


沒有留言: