ASP.NET MVC 11_HTMLヘルパー ～その２～

VisualStuidioCommunity2015/Fw4.5.2/C#

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

• Label / LabelFor
• TextBox / TextBoxFor
• TextArea / TextAreaFor
• Password / PasswordFor
• Hidden/ HiddenFor

入力要素のレンダリング

TextBodForやLabelForなどの「For付き」メソッドはモデル関連付いたフォーム要素を生成します。
TextBoxやLabelなどの「Forなし」メソッドはモデルに関連付かないフォーム要素を生成します。

属性にreadonlyやclassなどのC#の予約語を使用する場合は、「@」を付けます。

Label / LabelFor

Labelメソッドは引数に指定した文字列を出力します。
LabelForは引数に指定したモデルのプロパティ名を表示します。
モデルのプロパティの値を表示するわけではありませんので注意してください。

コントローラー

public ActionResult Index()
{
　　　　Models.HtmlHelperViewModels mdl = new Models.HtmlHelperViewModels();
　　　　mdl.LabelText = "LabelTextValue";
　　　　return View(mdl);        
}

ビュー

Label:
@Html.Label("LabelTextValue")

LabelFor:
@Html.LabelFor(mdl => mdl.LabelText)

Labelの出力:
<label for="LabelTextValue">LabelTextValue</label>

LabelForの出力：
値「LabelTextValue」ではなくプロパティ名「Labeltext」が出力されている
<label for="LabelText">LabelText</label>

LabelForで表示するプロパティ名はDisplay属性やDisplayName属性を使用してカスタマイズすることができます。

//DisplayName属性を使用する場合にインポートする
using System.ComponentModel;
//Display属性を使用する場合にインポートする
using System.ComponentModel.DataAnnotations;

namespace Practice.Models
{
　　　　public class HtmlHelperViewModels
　　　　{
    　　　　[DisplayName("表示名１")]
    　　　　public string LabelText1{ get; set; }

　　　　    [Display(Name = "表示名")]
　　　　    public string LabelText2{ get; set; }
　　　　}
}

モデルのプロパティの値をラベルで出力したい場合は、Labelメソッドを使用します。

Label:
@Html.Label(Model.LabelText)

TextBox / TextBoxFor

TextBox:
@Html.TextBox("TextBoxID", "TextBoxValue", new { @readonly = "readonly", size = "20", maxlength = 40 })

TextBoxFor:
@Html.TextBoxFor(mdl => mdl.TextBoxText, new { @readonly = "readonly", size = "20", maxlength = 40 })

TextBoxの出力:
<input id="TextBoxID" maxlength="40" name="TextBoxID" readonly="readonly" size="20" type="text" value="TextBoxValue" />

TextBoxForの出力:
<input id="TextBoxText" maxlength="40" name="TextBoxText" readonly="readonly" size="20" type="text" value="TextBoxTextValue" />

TextArea / TextAreaFor

TextArea:
@Html.TextArea("TextAreaID",                    //要素名
                "TextAreaValue",                //値
                5,                              //行数
                50,                             //桁数
                new { @class = "multiline" }    //属性
                )

TextAreaFor:
@Html.TextAreaFor(mdl => mdl.TextAreaText, 5, 50, new { @class = "multiline" })

TextAreaの出力：
<textarea class="multiline" cols="50" id="TextAreaID" name="TextAreaID" rows="5">
TextAreaValue</textarea>

TextAreaForの出力:
<textarea class="multiline" cols="50" id="TextAreaText" name="TextAreaText" rows="5">
TextAreaTextValue</textarea>

Password / PasswordFor

Password:
@Html.Password("PasswordID", "PasswordText", new { size = 10, maxlength = 20 })

PasswordFor:
@Html.PasswordFor(mdl => mdl.PasswordText, new { size = 10, maxlength = 20 })

Passwordの出力:
<input id="PasswordID" maxlength="20" name="PasswordID" size="10" type="password" value="PasswordText" />

PasswordForの出力:
<input id="PasswordText" maxlength="20" name="PasswordText" size="10" type="password" />

PasswordForの出力を見るとValueプロパティが設定されていません。
ASP.NET Web Formでも同様でしたがPasswordテキストボックスには値が表示できません。
値を表示させるにはvalue属性を使用しますが、ソースの表示でパスワードの値が丸見えになることに注意してください。

@Html.PasswordFor(mdl => mdl.PasswordText, new { size = 10, maxlength = 20, value = Model.PasswordText })

<input id="PasswordText" maxlength="20" name="PasswordText" size="10" type="password" value="PasswordTextValue" />

Hidden / HiddenFor

Hidden:
@Html.Hidden("HiddenID", "HiddenValue")

HiddenFor:
@Html.HiddenFor(mdl => mdl.HiddenValue)

Hiddenの出力:
<input id="HiddenID" name="HiddenID" type="hidden" value="HiddenValue" />

HiddenForの出力:
<input id="HiddenValue" name="HiddenValue" type="hidden" value="HiddenValue" />