asp.net-mvc
Modèles d'affichage et d'édition

Introduction

Modèle d'affichage

Modèle:

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

Si nous voulons afficher les utilisateurs dans différentes vues, il serait préférable de créer une présentation standardisée pour ces utilisateurs, quel que soit l'endroit où ils doivent être affichés. Nous pouvons accomplir cela en utilisant des modèles d'affichage.

Un modèle d'affichage est simplement une vue partielle liée à l'objet à afficher et se Views/Shared/DisplayTemplates dossier Views/Shared/DisplayTemplates (même si vous pouvez également la placer dans Views/ControllerName/DisplayTemplates ). De plus, le nom de la vue (par défaut) doit être le nom de l'objet que vous souhaitez utiliser comme modèle .

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

Maintenant, si nous voulons afficher tous les utilisateurs de la base de données et les afficher dans différentes vues, nous pouvons simplement envoyer la liste des utilisateurs à la vue et utiliser le modèle d'affichage pour les afficher. Nous pouvons utiliser l'une des deux méthodes suivantes:

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor appelle le modèle d'affichage pour le type de la propriété sélectionnée (par exemple Html.DisplayFor(x => x.PropertyName) . DisplayForModel appelle le modèle d'affichage pour le modèle @model de la vue

Vue

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

<h2>Users</h2>

@Html.DisplayForModel()

Modèle de l'éditeur

Les modèles d'affichage peuvent être utilisés pour standardiser la disposition d'un objet, voyons maintenant comment nous pouvons faire la même chose pour ces objets lors de leur édition. Tout comme les modèles d'affichage, il existe deux manières d'appeler des modèles d'éditeur pour un type donné:

Html.EditorFor()
Html.EditorForModel()

Les modèles d’éditeur, tout comme les modèles d’affichage, doivent exister dans Views / Shared / EditorTemplates ou Views / ControllerName / EditorTemplates . Pour cette démonstration, nous les créerons dans le dossier Shared. Encore une fois, le nom de la vue (par défaut) doit être le nom de l'objet que vous souhaitez utiliser comme modèle.

Modèle

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

Disons que nous voulons pouvoir éditer n'importe quel utilisateur de la base de données dans plusieurs vues. Nous utiliserons un ViewModel à cette fin.

ViewModel

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

En utilisant ce ViewModel , nous allons créer un modèle d’éditeur

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

Nous allons obtenir l'utilisateur souhaité et la liste des rôles disponibles et les lier dans viewModel UserEditorViewModel dans l'action du contrôleur et envoyer le viewModel à la vue. Pour plus de simplicité, je lance le viewModel à partir de l'action

action

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

Nous pouvons utiliser le modèle de l'éditeur créé dans n'importe quelle vue que nous souhaitons

Vue

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