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;

1週間でできる会員サイト「Limited」

1週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能