asp.net-mvc
Plantillas de visualización y editor

Introducción

Plantilla de pantalla

Modelo:

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

Si queremos mostrar a los usuarios en diferentes Vistas, sería mejor crear un diseño estandarizado para estos usuarios donde sea necesario. Podemos lograr esto utilizando plantillas de pantalla.

Una plantilla de visualización es simplemente una vista parcial que está vinculada con el modelo al objeto que desea mostrar y existe en la carpeta Views/Shared/DisplayTemplates (aunque también puede ponerla en Views/ControllerName/DisplayTemplates ). Además, el nombre de la vista (de forma predeterminada) debe ser el nombre del objeto para el que desea utilizarlo como plantilla .

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

Ahora, si queremos mostrar a todos los usuarios de la base de datos y mostrarlos en diferentes Vistas, simplemente podemos enviar la lista de usuarios a la Vista y usar la Plantilla de Visualización para mostrarlos. Podemos usar uno de los dos métodos para hacerlo:

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor llama a la plantilla de pantalla para el tipo de propiedad seleccionada (por ejemplo, Html.DisplayFor(x => x.PropertyName) . DisplayForModel llama a la plantilla de pantalla para el @model de la vista

Ver

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

<h2>Users</h2>

@Html.DisplayForModel()

Plantilla de editor

Las Plantillas de visualización se pueden usar para estandarizar el diseño de un objeto, así que ahora veamos cómo podemos hacer lo mismo para estos objetos al editarlos. Al igual que las plantillas de visualización, hay dos formas de llamar a las plantillas de editor para un tipo dado:

Html.EditorFor()
Html.EditorForModel()

Las plantillas de editor, al igual que las plantillas de visualización, deben existir en Views / Shared / EditorTemplates o Views / ControllerName / EditorTemplates . Para esta demostración, los crearemos en la carpeta Compartida. Nuevamente, el nombre de la vista (de manera predeterminada) debe ser el nombre del objeto para el que desea usarla como plantilla.

Modelo

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

Digamos que queremos poder editar cualquier usuario desde la base de datos en múltiples vistas. Usaremos un ViewModel para este propósito.

ViewModel

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

Usando este ViewModel , crearemos una plantilla de editor

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

Obtendremos el usuario deseado y la lista de roles disponibles y los vincularemos en viewModel UserEditorViewModel en Controller Action y enviaremos el viewModel a la vista. Para simplificar, estoy iniciando el viewModel desde la Acción.

Acción

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

Podemos usar la plantilla de editor creada en cualquier vista que deseemos.

Ver

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