【MVC】基本的なビュー構造

takachaa commented 7 years ago

scafoldで作成された index.cshtml

@model IEnumerable<MVCBasic3.Models.Member>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Birth)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Married)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Memo)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Birth)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Married)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Memo)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

takachaa commented 7 years ago

上記で重要な点について

以下のようにビューヘルパーを使えばモデルプロパティの [DisplayName("名前")] の「名前」が表示される

 @Html.DisplayNameFor(model => model.Name)

takachaa commented 7 years ago

以下のようにビューヘルパーを使ってリンクを生成

 @Html.ActionLink("Edit", "Edit", new { id=item.Id })

takachaa commented 7 years ago

以下のようにビューヘルパーを使えばプロパティ値を最適な形で出力することができる。最適とはEmailなどはリンクとか、boolはチェックボックスでとか。。。

@Html.DisplayFor(modelItem => item.Name)

takachaa commented 7 years ago

create.cshtml

@model MVCBasic3.Models.Member

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Member</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Birth, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Birth, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Birth, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Married, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.Married)
                    @Html.ValidationMessageFor(model => model.Married, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Memo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Memo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Memo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

takachaa commented 7 years ago

上記で重要な点をとりあげる

入力フォームを生成するBeginFormメソッド

@using (Html.BeginForm()) 
{

}

つまり以下が生成される

<from action="/Members/Create" method="post" >
</form>

takachaa commented 7 years ago

ラベル要素を生成するLabelForメソッド DisplayNameForメソッドがそのまま出力するのに対して、ラベル要素として出力する

  @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

つまり以下

  <label class="control-label col-md-2" for="Name">名前</label>

takachaa commented 7 years ago

編集するための適切な入力要素を出力

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

つまり以下が生成される

 <input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />

takachaa commented 7 years ago

レイアウトの適用について

基本はViews/Sharedフォルダー配下の_Layout.cshtmlで定義される。コンテンツは@RenderBody()に反映されて最終的にブラウザで表示される

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("アプリケーション名", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("ホーム", "Index", "Home")</li>
                    <li>@Html.ActionLink("詳細", "About", "Home")</li>
                    <li>@Html.ActionLink("連絡先", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

takachaa commented 7 years ago

Razorフォーム関連のビューヘルパー

メソッド	概要
BeginForm	フォームを生成（タグ）
BeginRouteForm	フォームを生成（タグ。ルートパラメーターで指定可能）
EndForm	フォームを終了（閉じタグ）
LabelFor／Label	ラベルを生成
TextBoxFor／TextBox	テキストボックスを生成
TextAreaFor／TextArea	テキストエリア（複数行テキストボックス）を生成
PasswordFor／Password	パスワード入力ボックスを生成
HiddenFor／Hidden	隠しフィールドを生成
RadioButtonFor／RadioButton	ラジオボタンを生成
CheckBoxFor／CheckBox	チェックボックスを生成
DropDownListFor／DropDownList	選択ボックスを生成
EnumDropDownListFor	Enum型をもとに選択ボックスを生成
ListBoxFor／ListBox	リストボックスを生成

XxxxxForメソッドを用いることでモデル（プロパティ）におけるデータ型、値などの情報に基づいてテキストボックス、ラジオボタンなどの要素を生成できます。

TextBoxFor

@Html.TextBoxFor(
    model => model.Name,
    new { @readonly = "readonly", size = 30, maxlength = 40 }
)

PasswordFor

@Html.PasswordFor(
    model => model.Name,
    new {  size = 30, maxlength = 40 }
)

CheckBoxFor ※CheckBoxForメソッドは2つのタグを出力します。チェックボックスがチェックされなかったときにも値をPOSTするためです。

@Html.CheckBoxFor(
    model => model.Married,
    new { tabIndex = 1}
    )

RadioButtonFor

<label>
    @Html.RadioButtonFor(
    model => model.Name,
    "名無しの権瓶",
    new { tabindex = 1 }
    )
    名無しの権瓶</label>
<label>
    @Html.RadioButtonFor(
    model => model.Name,
    "明日のかかし",
    new { tabindex = 2 }
    )
    明日のかかし
</label>

HiddenFor

@Html.HiddenFor(
    model => model.Email
    )

**TextAreaFor***

@Html.TextAreaFor(
    model => model.Memo,
    5,      //行数
    80,    //桁数
    new { @class = "desc" }
    )

参考 http://www.buildinsider.net/web/bookaspmvc5/040201

takachaa / .net-Framework

【MVC】基本的なビュー構造 #2

レイアウトの適用について

Razorフォーム関連のビューヘルパー