2016年12月10日土曜日

ASP.NET MVC 12_HTMLヘルパー ~その3~

VisualStuidioCommunity2015/Fw4.5.2/C#


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

入力要素のレンダリング


RadioButton/ RadioButtonFor

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



RadioButtonFor:


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:



RadioButtonFor:



CheckBox/ CheckBoxFor

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




CheckBoxFor:



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を属性で指定しなければいけないのもメンドクサイです。
そんなときは自作のHtmlヘルパーを作って対応します。
いずれ自作してみたいと思いますが、今は無視します。

0 件のコメント: