asp.net-mvc
Szablony wyświetlania i edytora

Wprowadzenie

Wyświetl szablon

Model:

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

Jeśli chcemy wyświetlać użytkowników w różnych widokach, lepiej byłoby utworzyć znormalizowany układ dla tych użytkowników, gdziekolwiek będą musieli być wyświetlani. Możemy to osiągnąć za pomocą szablonów wyświetlania.

Szablon wyświetlania jest po prostu widokiem częściowym, który jest powiązany z modelem obiektu, który chce wyświetlić, i istnieje w folderze Views/Shared/DisplayTemplates (chociaż można go również umieścić w Views/ControllerName/DisplayTemplates ). Ponadto nazwa widoku (domyślnie) powinna być nazwą obiektu, którego chcesz użyć jako szablonu .

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

Teraz, jeśli chcemy wyświetlić wszystkich użytkowników z bazy danych i pokazać ich w różnych widokach, możemy po prostu wysłać listę użytkowników do widoku i użyć szablonu wyświetlania, aby je wyświetlić. Możemy to zrobić za pomocą jednej z dwóch metod:

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor wywołuje szablon wyświetlania dla typu wybranej właściwości (np. Html.DisplayFor(x => x.PropertyName) . DisplayForModel wywołuje szablon wyświetlania dla @model widoku

Widok

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

<h2>Users</h2>

@Html.DisplayForModel()

Szablon edytora

Szablony wyświetlania można wykorzystać do ustandaryzowania układu obiektu, więc zobaczmy teraz, jak możemy zrobić to samo dla tych obiektów podczas ich edycji. Podobnie jak szablony wyświetlania, istnieją dwa sposoby wywoływania szablonów edytora dla danego typu:

Html.EditorFor()
Html.EditorForModel()

Szablony edytora, podobnie jak szablony wyświetlania, muszą istnieć w widokach / Shared / EditorTemplates lub Views / ControllerName / EditorTemplates . Na potrzeby tego dema będziemy tworzyć je w folderze współdzielonym. Ponownie nazwa widoku (domyślnie) powinna być nazwą obiektu, którego chcesz użyć jako szablonu.

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

Powiedzmy, że chcemy móc edytować dowolnego użytkownika z bazy danych w wielu widokach. W tym celu wykorzystamy ViewModel .

ViewModel

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

Za pomocą tego ViewModel utworzymy szablon edytora

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

Otrzymamy pożądanego użytkownika i listę dostępnych ról i powiążmy je w viewModel UserEditorViewModel w akcji kontrolera i wyślemy viewModel do widoku. Dla uproszczenia inicjuję viewModel z Akcji

Akcja

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

Możemy użyć utworzonego szablonu edytora w dowolnym widoku

Widok

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