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/>

이제 데이터베이스의 모든 사용자를 표시하고 다른보기에 표시하려면보기 목록에 사용자 목록을 보내고 표시 템플릿을 사용하여 표시하면됩니다. 우리는 두 가지 방법 중 하나를 사용하여이를 수행 할 수 있습니다.

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()

편집기 템플릿

표시 템플릿은 객체의 레이아웃을 표준화하는 데 사용할 수 있으므로 편집 할 때 이러한 객체에 대해 동일한 작업을 수행하는 방법을 살펴 보겠습니다. 디스플레이 템플릿과 마찬가지로 주어진 유형에 대해 편집기 템플릿을 호출하는 두 가지 방법이 있습니다.

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>

원하는 사용자와 사용 가능한 역할 목록을 가져와 Controller Action의 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);
        }

원하는 뷰에서 생성 된 Editor Template 을 사용할 수 있습니다.

전망

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