asp.net-mvc
Weergave- en editorsjablonen

Invoering

Sjabloon weergeven

Model:

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

Als we de gebruikers in verschillende weergaven willen weergeven, is het beter om een gestandaardiseerde lay-out voor deze gebruikers te maken waar ze moeten worden weergegeven. We kunnen dit bereiken met behulp van displaysjablonen.

Een weergavesjabloon is gewoon een gedeeltelijke weergave die is gebonden aan het model dat het wil weergeven en bestaat in de map Views/Shared/DisplayTemplates (hoewel u deze ook kunt plaatsen in Views/ControllerName/DisplayTemplates ). Verder moet de naam van de weergave (standaard) de naam zijn van het object waarvoor u het wilt gebruiken als sjabloon .

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

Als we nu alle gebruikers uit de database willen weergeven en ze in verschillende weergaven willen tonen, kunnen we eenvoudig de lijst met gebruikers naar de weergave sturen en de weergavesjabloon gebruiken om ze te tonen. We kunnen een van twee methoden gebruiken om dat te doen:

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor roept de weergavesjabloon op voor het type geselecteerde eigenschap (bijv. Html.DisplayFor(x => x.PropertyName) . DisplayForModel roept de weergavesjabloon op voor het @model van de weergave

Visie

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

<h2>Users</h2>

@Html.DisplayForModel()

Editor-sjabloon

Weergavesjablonen kunnen worden gebruikt om de lay-out van een object te standaardiseren, dus laten we nu kijken hoe we hetzelfde kunnen doen voor deze objecten bij het bewerken ervan. Net als weergavesjablonen, zijn er twee manieren om editorsjablonen voor een bepaald type aan te roepen:

Html.EditorFor()
Html.EditorForModel()

Editor-sjablonen moeten, net als weergavesjablonen, bestaan in Views / Shared / EditorTemplates of Views / ControllerName / EditorTemplates . Voor deze demo maken we ze in de gedeelde map. Nogmaals, de naam van de weergave (standaard) moet de naam zijn van het object waarvoor u het wilt gebruiken als sjabloon.

Model

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; }
    }

Stel dat we elke gebruiker uit de database in meerdere weergaven willen kunnen bewerken. We zullen hiervoor een ViewModel gebruiken.

ViewModel

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

Met dit ViewModel maken we een Editor-sjabloon

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

We krijgen de gewenste gebruiker en de lijst met beschikbare rollen en binden deze in de viewModel UserEditorViewModel in de controlleractie en sturen de viewModel naar de view. Voor de eenvoud initieer ik het viewModel vanuit de actie

Actie

 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);
        }

We kunnen de gemaakte Editor-sjabloon gebruiken in elke gewenste weergave

Visie

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