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;

Follow me!