asp.net-mvc
Display- och redigeringsmallar

Introduktion

Visa mall

Modell:

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

Om vi vill visa användarna i olika vyer, skulle det vara bättre att skapa en standardiserad layout för dessa användare varhelst de behöver visas. Vi kan uppnå detta med hjälp av visningsmallar.

En visningsmall är helt enkelt en partiell vy som är modellbunden till det objekt som den vill visa och finns i mappen Views/Shared/DisplayTemplates (även om du också kan lägga den i Views/ControllerName/DisplayTemplates ). Vidare bör namnet på vyn (som standard) vara namnet på objektet du vill använda det som mall för .

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

Om vi nu vill visa alla användare från databasen och visa dem i olika vyer kan vi helt enkelt skicka listan med användare till vyn och använda displaymallen för att visa dem. Vi kan använda en av två metoder för att göra det:

Html.DisplayFor()
Html.DisplayForModel()

DisplayFor ringa visningsmallen för typen av vald egenskap (t.ex. Html.DisplayFor(x => x.PropertyName) . DisplayForModel kallar visningsmallen för @model i vyn

Se

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

<h2>Users</h2>

@Html.DisplayForModel()

Redaktörsmall

Displaymallar kan användas för att standardisera layouten för ett objekt, så låt oss nu se hur vi kan göra samma sak för dessa objekt när vi redigerar dem. Precis som visningsmallar finns det två sätt att ringa redigeringsmallar för en viss typ:

Html.EditorFor()
Html.EditorForModel()

Redigeringsmallar, på samma sätt som visningsmallar, måste finnas i antingen Visningar / Delat / EditorTemplates eller Views / ControllerName / EditorTemplates . För den här demonstrationen skapar vi dem i mappen Delad. Återigen bör namnet på vyn (som standard) vara namnet på objektet du vill använda det som mall för.

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

Säg att vi vill kunna redigera alla användare från databasen i flera vyer. Vi kommer att använda en ViewModel för detta ändamål.

Viewmodel

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

Med hjälp av denna ViewModel skapar vi ett redigeringsmall

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

Vi kommer att få önskad användare och listan över tillgängliga roller och binda dem i viewModel UserEditorViewModel i Controller Action och skicka viewModel till vyn. För enkelhets skull initierar jag viewModel från åtgärden

Verkan

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

Vi kan använda den skapade redigeringsmallen i vilken vy vi önskar

Se

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