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: ">")
⇒
>