編輯模板

顯示模板可用於標準化物件的佈局,現在讓我們看看在編輯這些物件時我們如何為這些物件做同樣的事情。就像顯示模板一樣,有兩種方法可以為給定型別呼叫編輯器模板:

Html.EditorFor()
Html.EditorForModel()

編輯器模板與顯示模板類似,需要存在於 Views / Shared / EditorTemplatesViews / 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 來實現此目的。

檢視模型

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 傳送到檢視。為簡單起見,我從 Action 啟動 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" />
}