ASP.NET MVC HTMLヘルパー

Modelと関連付けられるヘルパー(For系)

@Html.Displar(model => model.Name);
等、実在のモデルクラスが参照され、自動的に初期値が与えられる。

type属性

※html5対応：Type属性に応じて自動で入力が規制される最適な<input>要素を生成する。
例：
@Html.EditorFor(～ type="search"; />
<input～ type="search" >
@Html.EditorFor(～ type="email"; />⇒検索テキスト
@Html.EditorFor(～ type="url"; />⇒メールアドレス
@Html.EditorFor(～ type="tel"; />⇒電話番号
@Html.EditorFor(～ type="number"; />⇒数値
@Html.EditorFor(～ type="date"; />⇒日付
@Html.EditorFor(～ type="datetime"; />⇒世界標準日時
@Html.EditorFor(～ type="datetime-local"; />⇒ローカル日時
@Html.EditorFor(～ type="month"; />⇒月
@Html.EditorFor(～ type="week"; />⇒週
@Html.EditorFor(～ type="time"; />⇒時刻
@Html.EditorFor(～ type="range"; />⇒数値範囲(スライダー)
@Html.EditorFor(～ type="color"; />⇒色

@Html.EditorFor()

@Html.EditorFor(model => model.Field1)
⇒<input
　　data-val=～ data-val-number=～ 等DBに応じた属性
　　id="Field1" name="Field1" type="text" value="0" />

@Html.LabelFor()

@Html.LabelFor(model => model.Field1)
⇒<label for="Field1">Field1</label>

@Html.DisplayFor()

※モデル属性に応じて最適なhtmlを生成する。
※Model:name
public bool name { get; set; };
⇒チェックボックス
[DataType(DataType.URL)]
public string name { get; set; };
⇒ハイパーリンク
@Html.DisplayFor(model => model.Field1)
⇒
Field1

@Html.DisplayNameFor()

コンテキストのDisplayName属性を表示する
@Html.DisplayNameFor(model => model.Field1)
⇒
設定名
public class MyModel
　　{
　　　　[DisplayName(“設定名”)]
　　　　public string Field1 { get; set; }
　　}

Modelと関連付けられないヘルパー

Modelと関連付けない、初期値を与えない場合に使用。

@Html.Display()

※モデル属性に応じて最適なhtmlを生成する。
※Model:name
public bool name { get; set; };
⇒チェックボックス
[DataType(DataType.URL)]
public string name { get; set; };
⇒ハイパーリンク
@Html.Display(expression: "name")
⇒
name

@Html.TextBox()

@Html.TextBox(name:"txtTest",value:"aaa")
⇒
<input id="txtTest" name="txtTest" type="text" value="aaa" />

@Html.Editor()

@Html.Editor("name")
⇒
<input class="text-box single-line" id="name" name="name" type="text" value="" />

@Html.CheckBox()

@Html.CheckBox(name:"chkTest",isChecked:true)
@Html.CheckBox(name:"chkTest", isChecked: false)
⇒
<input checked="checked" id="chkTest" name="chkTest" type="checkbox" value="true" />
<input name="chkTest" type="hidden" value="false" />
<input id="chkTest" name="chkTest" type="checkbox" value="true" />
<input name="chkTest" type="hidden" value="false" />

@Html.RadioButton

@Html.RadioButton(name:"rdoTest", value:true)
@Html.RadioButton(name:"rdoTest", value: false)
⇒
<input id="rdoTest" name="rdoTest" type="radio" value="True" />
<input id="rdoTest" name="rdoTest" type="radio" value="False" />

@Html.Label()

@Html.Label(expression: "name")
⇒
<label for="name">name</label>

@Html.DropDownList()

@{
　　Dictionary<int, string> myDic = new Dictionary<int, string>
　　{
　　　　{3,"長嶋"},
　　　　{1,"王"},
　　　　{18,"堀内"}
　　};
　　
　　SelectList mySelectList1 = new SelectList(items: myDic);
}
@Html.DropDownList(name: "name", selectList: mySelectList1)
⇒
<select id="name" name="name">
　　<option>[3, 長嶋]</option>
　　<option>[1, 王]</option>
　　<option>[18, 堀内]</option>
</select>

@{
　　List<int> myList = new List<int> { 1, 2, 3, 4, 5 };
　　SelectList mySelectList2 = new SelectList(items: myList);
}
@Html.DropDownList(name: "name", selectList: mySelectList2)
⇒
<select id="name" name="name">
　　<option>1</option>
　　<option>2</option>
　　<option>3</option>
　　<option>4</option>
　　<option>5</option>
</select>

@Html.ListBox()

@Html.ListBox(name:"name",selectList:mySelectList1)
⇒
<select id="name" multiple="multiple" name="name">
　　<option>[3, 長嶋]</option>
　　<option>[1, 王]</option>
　　<option>[18, 堀内]</option>
</select>
@Html.ListBox(name:"name",selectList:mySelectList2)
⇒
<select id="name" multiple="multiple" name="name">
　　<option>1</option>
　　<option>2</option>
　　<option>3</option>
　　<option>4</option>
　　<option>5</option>
</select>

@Html.Password()

@Html.Password(name: "name")
⇒
<input id="name" name="name" type="password" />

Form関連

@Html.BeginForm()

@using (Html.BeginForm()){～}
⇒
<form action="/～/～" method="post">
　～
</form>
↓の書き方も可
@Html.BeginForm()
　～
@Html.EndForm()

@using(Html.BeginForm(
　　actionName: "Index",
　　controllerName: "Next",
　　routeValues: new { id = "5", charset = "utf8" },　※
　　method: FormMethod.Post,
　　htmlAttributes: new { tabindex = "1" }))
{
　　<input type="submit" value="送信"/>
}
⇒
<form action="/Next/Index/5?charset=utf8" method="post" tabindex="1">
　　<input type="submit" value="送信"/>
</form>
※複数のパラメーターをサーバーに渡す場合は匿名クラス(「「LINQtoEntity」参照」を利用する。

@Html.Hidden()

@Html.Hidden(name: "name",value:"aaa")
⇒
<input id="name" name="name" type="hidden" value="aaa" />

リンク/エンコード関連

@Html.ActionLink()

@Html.ActionLink(linkText: "次ページ", actionName: "Next")
⇒
<a href="/Test/Next">次ページ</a>
@Html.ActionLink(
　　linkText: "次ページ",
　　actionName: "Index",
　　controllerName: "Next",
　　protocol: "https",
　　hostName: "www.～",
　　fragment: "memo",
　　routeValues: new { id = "5", charset = "utf8" },
　　htmlAttributes: new { tabindex = 1 }
)
⇒<a href="https://www.～/Next/Index/5?charset=utf8#memo" tabindex="1">次ページ</a>

@Html.RouteLink()

※@Html.ActionLinkとほぼ同じ
@Html.RouteLink(
　　linkText: "次ページ",
　　routeValues: new {
　　　　Controller = "Next",
　　　　Action = "Index",
　　　　id = "5",
　　　　charset = "utf8"
　　},
　　htmlAttributes: new { tabindex = 1 }
)
⇒<a href="/Next/Index/5?charset=utf8" tabindex="1">次ページ</a>

その他

@Html.ValidationSummary()

@Html.ValidationSummary(excludePropertyErrors: true)
⇒無し

@Html.ValidationMessageFor()

@Html.ValidationMessageFor(model => model.Field1, validationMessage: "*")
⇒<span
　　data-valmsg-for="Field1"
　　data-valmsg-replace="false">*</span>

@Html.Encode()

@Html.Encode(value: "<")
⇒
&lt;
@Html.Encode(value: ">")
⇒
&gt;