asp.net-mvc
표시 및 편집기 템플릿
수색…
소개
MVC 앱에서 객체를 처리 할 때 어떤 형식의 객체를 여러 위치에 표시해야한다면 표준화 된 레이아웃이 필요합니다. 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" />
}