asp.net-mvc
Anzeige- und Editorvorlagen

Einführung

Vorlage anzeigen

Modell:

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

Wenn wir die Benutzer in verschiedenen Ansichten anzeigen möchten, ist es besser, ein standardisiertes Layout für diese Benutzer zu erstellen, wo immer sie angezeigt werden müssen. Dies können wir mit Display-Vorlagen erreichen.

Eine Anzeigevorlage ist einfach eine Teilansicht, die an das Objekt gebunden ist, das angezeigt werden soll, und ist im Ordner Views/Shared/DisplayTemplates (obwohl Sie sie auch in Views/ControllerName/DisplayTemplates ). Außerdem sollte der Name der Ansicht (standardmäßig) der Name des Objekts sein, für das Sie die Vorlage als Vorlage verwenden möchten .

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

Wenn Sie nun alle Benutzer aus der Datenbank anzeigen und in verschiedenen Ansichten anzeigen möchten, können Sie einfach die Liste der Benutzer an die Ansicht senden und sie mit der Anzeigevorlage anzeigen. Dafür können wir eine von zwei Methoden verwenden:

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor die Anzeigevorlage für den Typ der ausgewählten Eigenschaft Html.DisplayFor(x => x.PropertyName) (z. B. Html.DisplayFor(x => x.PropertyName) . DisplayForModel ruft die Anzeigevorlage für das @model der Ansicht auf

Aussicht

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

<h2>Users</h2>

@Html.DisplayForModel()

Editor-Vorlage

Mit Anzeigevorlagen können Sie das Layout eines Objekts standardisieren. Lassen Sie uns nun sehen, wie wir diese Objekte beim Bearbeiten auf dieselbe Weise ausführen können. Genau wie Anzeigevorlagen gibt es zwei Möglichkeiten, Editorvorlagen für einen bestimmten Typ aufzurufen:

Html.EditorFor()
Html.EditorForModel()

Editorvorlagen müssen, ähnlich wie Anzeigevorlagen, entweder in Views / Shared / EditorTemplates oder Views / ControllerName / EditorTemplates vorhanden sein . Für diese Demo erstellen wir sie im freigegebenen Ordner. Wieder sollte der Name der Ansicht (standardmäßig) der Name des Objekts sein, für das Sie es als Vorlage verwenden möchten.

Modell

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

Angenommen, wir möchten jeden Benutzer aus der Datenbank in mehreren Ansichten bearbeiten können. Wir werden dazu ein ViewModel verwenden.

ViewModel

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

Mit diesem ViewModel erstellen wir eine Editorvorlage

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

Wir erhalten den gewünschten Benutzer und die Liste der verfügbaren Rollen, binden diese im viewModel UserEditorViewModel in der Controller-Aktion und senden das viewModel an die Ansicht. Der Einfachheit halber stelle ich das viewModel aus der Aktion ein

Aktion

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

Wir können die erstellte Editorvorlage in jeder gewünschten Ansicht verwenden

Aussicht

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