.NET core mvc の razorテンプレート

● Razorテンプレートへの値のセットとテンプレートでの表示

1. 値のセット

HogeController.cs

        public IActionResult Fuga()
        {
            ViewData["Message"] = "メッセージの表示テストです";
            return View();
        }

2. テンプレートでの表示

Fuga.cshtml

<h2>@ViewData["Title"]</h2>

3. ブラウザでの表示

デバッグを実行してブラウザのアドレス欄に http://localhost:50914/Hoge/Fuga と入力して移動すると

<h2>メッセージの表示テストです</h2>

が出力されます。

● RazorテンプレートからコントローラーへフォームのPOSTデータを渡す方法(1.ベタなやり方)

「Input」で渡した値を「Confirm」で受け取ってみます

Input.cshtml (入力画面)

    <form asp-controller="Hoge" asp-action="Confirm" method="post">
        @Html.AntiForgeryToken()
        <input type="text" name="Email" >
        <input type="text" name="Url" >
        <input type="submit" value="送信する">
    </form>

HogeController.cs (確認画面 - コントローラ)

        // POST: Hoge/Confirm
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Confirm(string Email, string Url)
        {
            ViewData["Email"] = Email;
            ViewData["Url"] = Url;
            return View();
        }

Confirm.cshtml(確認画面 - ビュー)

        <table>
            <tr>
                <td>Email</td>
                <td>@ViewData["Email"]</td>
            </tr>
            <tr>
                <td>Url</td>
                <td>@ViewData["Url"]</td>
            </tr>
        </table>

● RazorテンプレートからコントローラーへフォームのPOSTデータを渡す方法(2.スマートなやり方)

(1.)と同じく「Input」で渡した値を「Confirm」で受け取ってみます。
この時モデルを定義してモデルを受け渡します。

Input.cshtml (入力画面)

    <form asp-controller="Toukous" asp-action="Confirm" method="post">
        @Html.AntiForgeryToken()
        <input type="text" name="Email" >
        <input type="text" name="Url" >
        <input type="submit" value="送信する">
    </form>

Models/Hoge.cs(モデル)

namespace Hoge.Models
{
    public class Toukou
    {
        public int ID { get; set; }
        public string Email { get; set; }
        public string Url { get; set; }
    }
}

HogeController.cs (確認画面 - コントローラ) view()の引数で「テンプレートファイル」「モデル」を渡しています

        // POST: Hoge/Confirm
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Confirm(Toukou model)
        {
            return View("Confirm", model);
        }

Confirm.cshtml(確認画面 - ビュー) テンプレート cshtml の一番上でモデルのクラスを指定します。

@model <プロジェクト名>.Models.<モデルのクラス名>

@model Myapp.Models.Entry
        <table>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Email)</th>
                <td>@Html.DisplayFor(model => model.Email)</td>
            </tr>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Url)</th>
                <td>@Html.DisplayFor(model => model.Url)</td>
            </tr>
        </table>

● テンプレートのレイアウトファイル(継承元)

デフォルトではレイアウト(継承元)のテンプレートファイルは

Views/Shared/_Layout.cshtml

にあります。

これは /Views/_ViewStart.cshtml に次のように定義されているので

@{
    Layout = "_Layout";
}

レイアウトファイルを変えたい場合はここを変更します。
レイアウトを使用しない場合は null をセットします。

● ドキュメントルートの参照

チルダ ~ でドキュメントルートを参照できます。

<img src="~/Content/hoge.gif" alt="サンプル画像" />

参考 : http://blog.mamemaki.com/entry/2015/06/30/142450

関連エントリー

No.1224
12/23 13:21

edit

razor