ASP.NET MVC 12_HTMLヘルパー ～その３～

VisualStuidioCommunity2015/Fw4.5.2/C#

前回に続いて基本的なHTMLヘルパーのうち、今回は下記のヘルパー見ていきます。

• RadioButton/ RadioButtonFor
• CheckBox/ CheckBoxFor

入力要素のレンダリング

RadioButton/ RadioButtonFor

ラジオボタンのテキストは<label>タグで設定し、<label>タグでRadioButtonまたはRadioButtonForを囲みます。
ラジオボタンの選択肢の数だけ、<label>タグとRadioButtonまたはRadioButtonForを用意します。
RadioButtonメソッドは第一引数nameに指定するフィールド名をすべて同じ値にします。
RadioButtonForメソッドは第一引数に指定するモデルのプロパティをすべて同じにします。

RadioButton:
@Html.RadioButton("RadioButtonID", "RadioValueA", false) RadioA
@Html.RadioButton("RadioButtonID", "RadioValueB", true) RadioB

RadioButtonFor:
@Html.RadioButtonFor(mdl => mdl.RadioValue, "RadioValueA") RadioA
@Html.RadioButtonFor(mdl => mdl.RadioValue, "RadioValueB") RadioB

RadioButtonの出力:
<label><input id="RadioButtonID" name="RadioButtonID" type="radio" value="RadioValueA" /> RadioA</label>
<label><input checked="checked" id="RadioButtonID" name="RadioButtonID" type="radio" value="RadioValueB" /> RadioB</label>

RadioButtonForの出力:
<label><input id="RadioValue" name="RadioValue" type="radio" value="RadioValueA" /> RadioA</label>
<label><input checked="checked" id="RadioValue" name="RadioValue" type="radio" value="RadioValueB" /> RadioB</label>

出力されたhtmlを見るとname属性とid属性がすべて同じ値になっています。
idを分けたい場合は属性で指定します。

RadioButton:
@Html.RadioButton( "RadioButtonID", "RadioValueA", false, new { id="radioButtonId_A"}) RadioA
@Html.RadioButton( "RadioButtonID", "RadioValueB", false, new { id="radioButtonId_B"}) RadioB

RadioButtonFor:
@Html.RadioButtonFor(mdl => mdl.RadioValue, "RadioValueA", new { id = "radioButtonId_A" }) RadioA
@Html.RadioButtonFor(mdl => mdl.RadioValue, "RadioValueB", new { id = "radioButtonId_B" }) RadioB

CheckBox/ CheckBoxFor

チェックボックスのテキストは<label>タグで設定し、<label>タグでCheckBoxまたはCheckBoxForを囲みます。
チェックボックスの選択肢の数だけ、<label>タグとCheckBoxまたはCheckBoxForを用意します。
ラジオボタンと異なり、 CheckBoxメソッドは第一引数nameに指定するフィールド名をそれぞれ別の値にします。
CheckBoxForメソッドは第一引数に指定するモデルのプロパティはそれぞれのチェック状態を表すモデルのプロパティにします。

CheckBox:
@Html.CheckBox("CheckBoxID_A", true) CheckA
@Html.CheckBox("CheckBoxID_B", true) CheckB
@Html.CheckBox("CheckBoxID_C", false) CheckC

CheckBoxFor:
@Html.CheckBoxFor(mdl => mdl.CheckBoxValueA) CheckA
@Html.CheckBoxFor(mdl => mdl.CheckBoxValueB) CheckB
@Html.CheckBoxFor(mdl => mdl.CheckBoxValueC) CheckC

CheckBoxの出力(Aだけ記載):
<label>
<input checked="checked" id="CheckBoxID_A" name="CheckBoxID_A" type="checkbox" value="true" />
<input name="CheckBoxID_A" type="hidden" value="false" />
 CheckA</label>

CheckBoxForの出力(Aだけ記載):
<label>
<input checked="checked" data-val="true" data-val-required="CheckBoxValueA フィールドが必要です。" 
id="CheckBoxValueA" name="CheckBoxValueA" type="checkbox" value="true" />
<input name="CheckBoxValueA" type="hidden" value="false" />
 CheckA</label>

出力内容を確認すると<input type="checked">と<input type="hidden">の2つの要素が出力されています。
チェックボックスがチェックされなかった時にも、チェックされなかったというfalse値をサーバーに送信するためです。
※CheckBoxForには「data-val-required」属性が出力されていますが、今は無視します。


ラジオボタンやチェックボックスの選択肢が多い場合、選択肢の数だけタグを書くのはﾒﾝﾄﾞｸｻｲですね。
Asp Web Form にあったCheckBoxListやRadioButtonListが欲しいところです。
毎回RadioButtonのidを属性で指定しなければいけないのもﾒﾝﾄﾞｸｻｲです。
そんなときは自作のHｔｍｌヘルパーを作って対応します。
いずれ自作してみたいと思いますが、今は無視します。