asp.net-mvc
表示テンプレートとエディタテンプレート

前書き

テンプレートの表示

モデル：

 public class User  
 {
    public int ID { get; set; }
    public string FirstName { get; set; }
    public DateTime DateOfBirth { get; set; }
 }

ユーザーをさまざまなビューに表示する場合は、表示する必要がある場合はいつでも、これらのユーザーのための標準化されたレイアウトを作成する方がよいでしょう。ディスプレイテンプレートを使用してこれを達成できます。

表示テンプレートは、表示したいオブジェクトにモデルバインドされ、 Views/Shared/DisplayTemplatesフォルダに存在する部分ビューです（ただし、 Views/ControllerName/DisplayTemplates配置することもできます）。さらに、 ビューの名前（デフォルト）は、テンプレートとして使用するオブジェクトの名前でなければなりません 。

ビュー/共有/ DisplayTemplates / User.cshtml

 @model TemplatesDemo.Models.User
    
<div style="padding-bottom: 10px">
    <p><strong>ID:</strong> @Html.DisplayFor(m => m.ID)</p>
    <p><strong>Name:</strong> @Html.DisplayFor(m => m.FirstName)</p>
    <p><strong>Date of Birth:</strong> @Html.DisplayFor(m => m.DateOfBirth)</p>
</div>
<hr/>

今度は、データベースからすべてのユーザーを表示し、それらを異なるビューに表示したい場合は、ユーザーのリストをViewに送信し、表示テンプレートを使用して表示するだけです。これを行うには、次の2つの方法のいずれかを使用できます。

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor選択性（例えばタイプの表示テンプレートを呼び出しHtml.DisplayFor(x => x.PropertyName) DisplayForModelするための表示テンプレートを呼び出し@modelビューの

ビュー

@model IEnumerable<TemplatesDemo.Models.User>
@{
    ViewBag.Title = "Users";
}

<h2>Users</h2>

@Html.DisplayForModel()

エディタテンプレート

表示テンプレートを使用してオブジェクトのレイアウトを標準化することができます。次に、これらのオブジェクトを編集する際に、同じことを行う方法を見ていきましょう。表示テンプレートと同様に、特定のタイプのエディタテンプレートを呼び出すには2つの方法があります。

Html.EditorFor()
Html.EditorForModel()

エディタテンプレートは、表示テンプレートと同様に、 Views / Shared / EditorTemplatesまたはViews / ControllerName / EditorTemplatesのいずれかに存在する必要があります。このデモでは、Sharedフォルダに作成します。ここでも、 ビューの名前（デフォルト）はテンプレートとして使用するオブジェクトの名前にする必要があります。

モデル

public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime DateOfBirth { get; set; }
        public Roles Roles { get; set; }
        public int RoleId { get; set; }
    }

 public class Roles
    {
        public int Id { get; set; }
        public string Role { get; set; }
    }

複数のビューでデータベースから任意のユーザーを編集できるようにしたいとします。この目的のためにViewModelを使用します。

ViewModel

public class UserEditorViewModel
    {
        public User User { get; set; }
        public IEnumerable<Roles> Roles { get; set; }
    }

このViewModelを使用して、 エディタテンプレートを作成します

ビュー/共有/ EditorTemplates / UserEditorViewModel.cshtml

@model TemplatesDemo.Models.UserEditorViewModel

<div class="form-group">
    @Html.DisplayNameFor(m => m.User.Id)
    @Html.EditorFor(m => m.User.Id)
</div>
<div class="form-group">
    @Html.DisplayNameFor(m => m.User.Name)
    @Html.EditorFor(m => m.User.Name)
</div>
<div class="form-group">
    @Html.DisplayNameFor(m => m.User.DateOfBirth)
    @Html.EditorFor(m => m.User.DateOfBirth)
</div>
<div class="form-group">
    @Html.DisplayNameFor(m => m.User.Roles.Role)
    @Html.DropDownListFor(m => m.User.RoleId, new SelectList(Model.Roles,"Id","Role"))
</div>

必要なユーザと使用可能なロールのリストを取得し、コントローラアクション内のviewModel UserEditorViewModelにバインドして、viewModelをビューに送信します。簡単にするために、私はアクションからviewModelを開始しています

アクション

 public ActionResult Editor()
        {
            var viewModel = new UserEditorViewModel
            {
                User = new User
                {
                    Id = 1,
                    Name = "Robert",
                    DateOfBirth = DateTime.Now,
                    RoleId = 1
                },
                Roles = new List<Roles>()
                {
                    new Roles
                    {
                        Id = 1,
                        Role = "Admin"
                    },
                    new Roles
                    {
                        Id = 2,
                        Role = "Manager"
                    },
                    new Roles
                    {
                        Id = 3,
                        Role = "User"
                    }
                }
            };

            return View(viewModel);
        }

作成したエディタテンプレートは、任意のビューで使用できます

ビュー

@model TemplatesDemo.Models.UserEditorViewModel
    
@using (Html.BeginForm("--Your Action--", "--Your Controller--"))
{
    @Html.EditorForModel()
    <input type="submit" value="Save" />
}