3. rész, előre elkészített Razor lapok az ASP.NET Core-ban

Készítette: Rick Anderson

Ez az oktatóanyag az Razorelőző oktatóanyagban állványzatokkal létrehozott oldalakat vizsgálja.

A Lapok létrehozása, törlése, részletei és szerkesztése

Vizsgálja meg az oldalmodellt Pages/Movies/Index.cshtml.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Data;
using RazorPagesMovie.Models;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace RazorPagesMovie.Pages.Movies
{
    public class IndexModel : PageModel
    {
        private readonly RazorPagesMovie.Data.RazorPagesMovieContext _context;

        public IndexModel(RazorPagesMovie.Data.RazorPagesMovieContext context)
        {
            _context = context;
        }

        public IList<Movie> Movie { get;set; } = default!;

        public async Task OnGetAsync()
        {
            Movie = await _context.Movie.ToListAsync();
        }
    }
}

Razor A lapok a következőből PageModelszármaznak: . Konvenció szerint a PageModel származtatott osztály neve PageNameModel. Az Index lap neve például .IndexModel

A konstruktor függőséginjektálás használatával adja hozzá a RazorPagesMovieContext lapot:

public class IndexModel : PageModel
{
    private readonly RazorPagesMovie.Data.RazorPagesMovieContext _context;

    public IndexModel(RazorPagesMovie.Data.RazorPagesMovieContext context)
    {
        _context = context;
    }

Az Entity Framework aszinkron programozásával kapcsolatos további információkért tekintse meg az aszinkron kódot .

GET Amikor a lapra vonatkozó kérést intéznek, a OnGetAsync metódus visszaadja a filmek listáját a Razor lapra. Razor Egy lapon, OnGetAsync vagy OnGet az oldal állapotának inicializálására van meghívva. Ebben az esetben a OnGetAsync lekéri a filmek listáját, és megjeleníti őket.

Ha OnGet visszaadja void vagy OnGetAsync visszaadja Task, a rendszer nem használ visszatérési utasítást. Vizsgálja meg például a Privacy lapot:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesMovie.Pages
{
    public class PrivacyModel : PageModel
    {
        private readonly ILogger<PrivacyModel> _logger;

        public PrivacyModel(ILogger<PrivacyModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {
        }
    }

}

Ha a visszatérési típus IActionResult vagy Task<IActionResult>, egy visszatérési utasítást kell megadni. Például a Pages/Movies/Create.cshtml.cs OnPostAsync metódus:

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    _context.Movie.Add(Movie);
    await _context.SaveChangesAsync();

    return RedirectToPage("./Index");
}

Vizsgálja meg a Pages/Movies/Index.cshtmlRazor lapot:

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Genre)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Movie) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

Razor HTML nyelvről C# nyelvre vagy Razor-specifikus jelölésnyelvre válthat. Ha egy @ szimbólumot Razor egy fenntartott kulcsszó követ, akkor -specifikus korrektúra Razorlesz, ellenkező esetben C#-ra vált át.

Az @page irányelv

Az @pageRazor irányelv MVC-műveletként kezeli a fájlt, ami azt jelenti, hogy képes kezelni a kéréseket. @page kell lennie az első Razor irányelvnek egy lapon. @page és @model a Razor-specifikus markupra való áttérés példái. További Razor információt a szintaxisban talál.

Az @model irányelv

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

Az @model irányelv meghatározza a lapnak Razor átadott modell típusát. Az előző példában a @model sor elérhetővé teszi a PageModel származtatott osztályt a Razor Lap számára. A modell az oldalon található @Html.DisplayNameFor@Html.DisplayForHTML-súgókban van használatban.

Vizsgálja meg a következő HTML-segédben használt lambda kifejezést:

@Html.DisplayNameFor(model => model.Movie[0].Title)

A DisplayNameFor HTML-segéd a Title lambda kifejezésben hivatkozott tulajdonságot vizsgálja meg a megjelenítendő név meghatározásához. A lambda kifejezést nem kiértékeljük, hanem ellenőrizzük. Ez azt jelenti, hogy nincs hozzáférés-megsértés, ha a model, model.Movie vagy model.Movie[0] üres vagy null. A lambda kifejezés kiértékelésekor például @Html.DisplayFor(modelItem => item.Title)a modell tulajdonságértékei lesznek kiértékelve.

Az elrendezési oldal

Válassza ki a RazorPagesMovie, Home és Privacy menüpontokat. Minden oldalon ugyanaz a menüelrendezés látható. A menü elrendezése a fájlban Pages/Shared/_Layout.cshtml van implementálva.

Nyissa meg és vizsgálja meg a Pages/Shared/_Layout.cshtml fájlt.

Az elrendezéssablonok lehetővé teszik, hogy a HTML-tároló elrendezése a következő legyen:

• Egy helyen van meghatározva.
• A webhely több lapján alkalmazva.

Keresse meg a @RenderBody() vonalat. RenderBody egy helyőrző, ahol az összes oldalspecifikus nézet megjelenik, az elrendezési lapba burkolva . Válassza ki például a Privacy hivatkozást, és a Pages/Privacy.cshtml nézet a RenderBody metóduson belül jelenik meg.

ViewData és elrendezés

Vegye figyelembe a következő jelölést a Pages/Movies/Index.cshtml fájlból:

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

@{
    ViewData["Title"] = "Index";
}

Az előző kiemelt jelölés egy példa arra, hogyan történik az áttérés Razor C#-ra. A { karakterek C } #-kódblokkot tartalmaznak.

Az PageModel alaposztály tartalmaz egy ViewData szótártulajdonságot, amellyel adatokat továbbíthat egy nézetnek. A rendszer egy ViewData használatával adja hozzá az objektumokat a szótárhoz. Az előző példában a Title tulajdonság hozzáadódik a ViewData szótárhoz.

A Title tulajdonságot a Pages/Shared/_Layout.cshtml fájl használja. Az alábbi jelölés a _Layout.cshtml fájl első néhány sorát jeleníti meg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RazorPagesMovie</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/RazorPagesMovie.styles.css" asp-append-version="true" />

Az elrendezés frissítése

1. Módosítsa a <title> fájl elemét úgy, hogy a Pages/Shared/_Layout.cshtmlRazorPagesMovie helyett a Mozgókép jelenjen meg.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>@ViewData["Title"] - Movie</title>
   

2. Keresse meg a következő horgonyelemet a Pages/Shared/_Layout.cshtml fájlban.

   <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesMovie</a>
   

3. Cserélje le az előző elemet a következő jelölésre:

   <a class="navbar-brand" asp-page="/Movies/Index">RpMovie</a>
   

   Az előző horgonyelem egy Tag Helper. Ebben az esetben a Anchor Tag Helper-ről van szó. A asp-page="/Movies/Index" Címke segéd attribútum és érték létrehoz egy hivatkozást a /Movies/IndexRazor lapra. Az asp-area attribútum értéke üres, ezért a terület nem szerepel a hivatkozásban. További információkért tekintse meg a Területek című témakört .

4. Mentse a módosításokat, és tesztelje az alkalmazást az RpMovie hivatkozásra kattintva. Ha problémái vannak, tekintse meg a _Layout.cshtml fájlt a GitHubon.

5. Tesztelje a Home, RpMovie, Létrehozás, Szerkesztés és Törlés hivatkozásokat. Minden oldal megadja a címet, amelyet a böngészőlapon láthat. Ha könyvjelzővel jelöl meg egy lapot, a cím a könyvjelzőhöz lesz használva.

Megjegyzés:

Előfordulhat, hogy nem tud tizedesvesszőt beírni a Price mezőbe. Az alkalmazás globalizálása érdekében, a vesszőt (",") tizedes jelként használó, nem angol területi beállítások jQuery-érvényesítésének támogatásához, illetve a nem US-English dátumformátumok kezeléséhez, lépéseket kell tenni. A decimális vessző hozzáadására vonatkozó utasításokért tekintse meg a GitHub 4076-os problémáját .

A Layout tulajdonság a fájlban Pages/_ViewStart.cshtml van beállítva:

@{
    Layout = "_Layout";
}

Az előző korrektúra az elrendezésfájlt Pages/Shared/_Layout.cshtml a Razor mappában lévő összes fájlra állítja be. További információt az Elrendezés című témakörben talál.

A Lapmodell létrehozása

Vizsgálja meg az oldalmodellt Pages/Movies/Create.cshtml.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using RazorPagesMovie.Data;
using RazorPagesMovie.Models;

namespace RazorPagesMovie.Pages.Movies
{
    public class CreateModel : PageModel
    {
        private readonly RazorPagesMovie.Data.RazorPagesMovieContext _context;

        public CreateModel(RazorPagesMovie.Data.RazorPagesMovieContext context)
        {
            _context = context;
        }

        public IActionResult OnGet()
        {
            return Page();
        }

        [BindProperty]
        public Movie Movie { get; set; } = default!;

        // To protect from overposting attacks, see https://aka.ms/RazorPagesCRUD
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.Movie.Add(Movie);
            await _context.SaveChangesAsync();

            return RedirectToPage("./Index");
        }
    }
}

A OnGet metódus inicializálja az oldalhoz szükséges állapotokat. A Létrehozás lapnak nincs inicializálandó állapota, ezért Page visszaadásra kerül. Az oktatóanyag későbbi részében megjelenik egy példa az állapot inicializálására OnGet . A Page metódus létrehoz egy PageResult objektumot, amely megjeleníti a Create.cshtml lapot.

A Movie tulajdonság a [BindProperty] attribútumot használja a modellkötésre való bejelentkezéshez. Amikor a Create űrlap elküldi az űrlapértékeket, az ASP.NET Core futtatókörnyezet hozzárendeli a küldött értékeket a Movie modellhez.

A OnPostAsync metódus akkor fut, ha az oldal bejegyzései űrlapadatokat adnak meg:

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    _context.Movie.Add(Movie);
    await _context.SaveChangesAsync();

    return RedirectToPage("./Index");
}

Modellhibák esetén az űrlap vissza lesz adva a közzétett űrlapadatokkal együtt. A legtöbb modellhibát az ügyféloldalon észlelheti az űrlap közzététele előtt. Modellhiba például a dátummező olyan értékének közzététele, amely nem konvertálható dátummá. Az ügyféloldali érvényesítést és a modellérvényesítést az oktatóanyag későbbi részében tárgyaljuk.

Ha nincsenek modellhibák:

• Az adatok mentése megtörtént.
• A böngésző az Index lapra lesz átirányítva.

A Lap létrehozása Razor

Vizsgálja meg a Pages/Movies/Create.cshtmlRazor lapfájlt:

@page
@model RazorPagesMovie.Pages.Movies.CreateModel

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Movie</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Movie.Title" class="control-label"></label>
                <input asp-for="Movie.Title" class="form-control" />
                <span asp-validation-for="Movie.Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.ReleaseDate" class="control-label"></label>
                <input asp-for="Movie.ReleaseDate" class="form-control" />
                <span asp-validation-for="Movie.ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Genre" class="control-label"></label>
                <input asp-for="Movie.Genre" class="form-control" />
                <span asp-validation-for="Movie.Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Price" class="control-label"></label>
                <input asp-for="Movie.Price" class="form-control" />
                <span asp-validation-for="Movie.Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Visual Studio

A Visual Studio a következő címkéket jeleníti meg a Címkesegítőkhöz használt megkülönböztető félkövér betűtípussal:

• <form method="post">
• <div asp-validation-summary="ModelOnly" class="text-danger"></div>
• <label asp-for="Movie.Title" class="control-label"></label>
• <input asp-for="Movie.Title" class="form-control" />
• <span asp-validation-for="Movie.Title" class="text-danger"></span>

Az <form method="post"> elem egy Form Tag Helper. Az Űrlap-tag segédlete automatikusan tartalmaz egy hamisítás elleni tokent.

Az állványgenerátor jelöléseket hoz létre Razor a modell minden mezőjéhez, kivéve az azonosítót, hasonlóan az alábbiakhoz:

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="Movie.Title" class="control-label"></label>
    <input asp-for="Movie.Title" class="form-control" />
    <span asp-validation-for="Movie.Title" class="text-danger"></span>
</div>

Az érvényesítési címke súgói (<div asp-validation-summary és <span asp-validation-for) érvényesítési hibákat jelenítenek meg. Az ellenőrzésről részletesebben a sorozat későbbi részében olvashat.

A Címkecímke segédprogram (<label asp-for="Movie.Title" class="control-label"></label>) létrehozza a címkefeliratot és a [for] attribútumot a(z) Title tulajdonsághoz.

A beviteli címke segédje (<input asp-for="Movie.Title" class="form-control">) a DataAnnotations attribútumokat használja, és az ügyféloldali jQuery-ellenőrzéshez szükséges HTML-attribútumokat hoz létre.

További információ a címkesegítőkről, például <form method="post">: Címkesegítők a ASP.NET Core-ban.

Következő lépések

Előző: Modell hozzáadásaTovább: Adatbázissal végzett munka