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: "<")
⇒
<
@Html.Encode(value: ">")
⇒
>
Follow me!
