asp.net-mvc
Modelli di visualizzazione e editor

introduzione

Visualizza modello

Modello:

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

Se vogliamo mostrare gli utenti in diverse viste, sarebbe meglio creare un layout standard per questi utenti, ovunque essi debbano essere visualizzati. Possiamo farlo usando i modelli di visualizzazione.

Un modello di visualizzazione è semplicemente una vista parziale legata al modello dell'oggetto che desidera visualizzare ed esiste nella cartella Views/Shared/DisplayTemplates (sebbene sia possibile inserirla anche in Views/ControllerName/DisplayTemplates ). Inoltre, il nome della vista (di default) dovrebbe essere il nome dell'oggetto per il quale si desidera utilizzarlo come modello .

Vista / comune / 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/>

Ora, se vogliamo mostrare tutti gli utenti dal database e mostrarli in diverse viste, possiamo semplicemente inviare l'elenco degli utenti alla vista e utilizzare il modello di visualizzazione per mostrarli. Possiamo usare uno dei due metodi per farlo:

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor chiamare il modello di visualizzazione per il tipo di proprietà selezionata (ad es. Html.DisplayFor(x => x.PropertyName) . DisplayForModel chiama il modello di visualizzazione per @model della vista

vista

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

<h2>Users</h2>

@Html.DisplayForModel()

Modello di editor

I modelli di visualizzazione possono essere utilizzati per standardizzare il layout di un oggetto, quindi vediamo ora come possiamo fare la stessa cosa per questi oggetti durante la modifica. Proprio come i modelli di visualizzazione, ci sono due modi per chiamare i modelli di editor per un determinato tipo:

Html.EditorFor()
Html.EditorForModel()

I modelli di editor, in modo simile ai modelli di visualizzazione, devono esistere in Views / Shared / EditorTemplates o Views / ControllerName / EditorTemplates . Per questa demo, li creeremo nella cartella condivisa. Ancora una volta, il nome della vista (di default) dovrebbe essere il nome dell'oggetto per il quale si desidera utilizzarlo come modello.

Modello

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

Diciamo che vogliamo essere in grado di modificare qualsiasi utente dal database in più viste. Useremo un ViewModel per questo scopo.

ViewModel

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

Usando questo ViewModel , creeremo un modello di editor

Vista / comune / 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>

Otterremo l'utente desiderato e l'elenco dei ruoli disponibili e li assoceremo a viewModel UserEditorViewModel nell'azione Controller e invieremo viewModel alla vista. Per semplicità, sto avviando viewModel dall'azione

Azione

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

Possiamo utilizzare il modello di editor creato in qualsiasi visualizzazione desideriamo

vista

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