Bölüm 3, ASP.NET Core yapı iskelesi Razor olan sayfalar

Gönderen Rick Anderson

Bu öğreticide Razor , önceki öğreticideyapı iskelesi tarafından oluşturulan sayfalar incelenir.

Oluşturma, silme, Ayrıntılar ve düzenleme sayfaları

Pages/filmler/ Index . cshtml. cs sayfa modelini inceleyin:

// Unused usings removed.
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

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

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

Razor Sayfalar öğesinden türetilir PageModel . Kural gereği, PageModel -türetilmiş sınıf adlandırılır <PageName>Model . Oluşturucu, sayfasına eklemek için bağımlılık ekleme işlemini kullanır RazorPagesMovieContext :

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

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

Entity Framework zaman uyumsuz programlama hakkında daha fazla bilgi için bkz. zaman uyumsuz kod .

Sayfa için bir istek yapıldığında, OnGetAsync yöntemi sayfaya bir film listesi döndürür Razor . Sayfasında Razor , OnGetAsync veya OnGet sayfanın durumunu başlatmak için çağırılır. Bu durumda, OnGetAsync filmlerin bir listesini alır ve görüntüler.

Döndürüldüğünde OnGet void veya OnGetAsync döndüğünde Task , Return deyimleri kullanılmaz. Örneğin, Privacy sayfa:

public class PrivacyModel : PageModel
{
    private readonly ILogger<PrivacyModel> _logger;

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

    public void OnGet()
    {
    }
}

Dönüş türü IActionResult veya olduğunda Task<IActionResult> , bir return ifadesinin sağlanması gerekir. Örneğin, Pages/filmler/Create. cshtml. cs OnPostAsync yöntemi:

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

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

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

Pages/filmler/ Index . cshtml Razor sayfasını inceleyin:

@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 'den C# veya belirli bir biçimlendirmeye geçiş yapabilir Razor . Bir @ simgenin arkasından Razor ayrılmış bir anahtar sözcükgeldiğinde, bu, belirli bir Razor BIÇIMLENDIRMEYI geçirir, aksi halde HTML 'e geçirir.

@pageYönergesi

@page Razor Yönergesi, dosyayı bir MVC eylemi yapar, bu da istekleri işleyebileceği anlamına gelir. @page sayfadaki ilk yönerge olmalıdır Razor . @page ve @model belirli biçimlendirme örneklerine örnek olarak verilebilir Razor . Daha fazla bilgi için bkz. Razor sözdizimi .

@modelYönergesi

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

@modelYönergesi, sayfaya geçirilen modelin türünü belirtir Razor . Yukarıdaki örnekte, @model satır PageModel türetilen sınıfı sayfa için kullanılabilir hale getirir Razor . Model, @Html.DisplayNameFor sayfadaki ve @Html.DisplayFor HTML yardımcılarını sayfasında kullanılır.

Aşağıdaki HTML Yardımcısı 'nda kullanılan lambda ifadesini inceleyin:

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

DisplayNameExtensions.DisplayNameForHTML Yardımcısı, Title görünen adı belirlemede lambda ifadesinde başvurulan özelliği inceler. Lambda ifadesi değerlendirilmek yerine incelenir. Bu,,, veya boş olduğunda bir erişim ihlali olmadığı anlamına gelir model model.Movie model.Movie[0] null . Lambda ifadesi değerlendirildiğinde, örneğin ile, @Html.DisplayFor(modelItem => item.Title) modelin özellik değerleri değerlendirilir.

Düzen sayfası

Razor Pagesfilmi, ve ' menü bağlantılarını seçin Home Privacy . Her sayfada aynı menü düzeni gösterilir. Menü düzeni sayfa/paylaşılan/_Layout. cshtml dosyasında uygulanır.

Sayfalar/paylaşılan/_Layout. cshtml dosyasını açın ve inceleyin.

Düzen ŞABLONLARı, HTML kapsayıcı düzeninin şu şekilde olmasını sağlar:

  • Tek bir yerde belirtildi.
  • Sitede birden çok sayfada uygulandı.

Satırı bulun @RenderBody() . RenderBody , sayfaya özgü tüm görünümlerin, Düzen sayfasında kaydırılan bir yer tutucudur. Örneğin, Privacy bağlantıyı seçin ve Sayfalar/ Privacy . cshtml görünümü yöntemin içinde işlenir RenderBody .

ViewData ve Layout

Sayfalar/filmler/ Index . cshtml dosyasından aşağıdaki biçimlendirmeyi göz önünde bulundurun:

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

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

Önceki vurgulanan biçimlendirme C# ' ye geçme örneğidir Razor . {Ve } karakterleri bir C# kodu bloğunu kapsar.

PageModelTemel sınıf, ViewData verileri bir görünüme geçirmek için kullanılabilecek bir Dictionary özelliği içerir. Nesneler, ViewData anahtar değer bir model kullanılarak sözlüğe eklenir. Yukarıdaki örnekte, Title özelliği ViewData sözlüğe eklenir.

TitleÖzelliği Pages/Shared/_Layout. cshtml dosyasında kullanılır. Aşağıdaki biçimlendirme _Layout. cshtml dosyasının ilk birkaç satırını gösterir.

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

    @*Markup removed for brevity.*@

Satır @*Markup removed for brevity.*@ bir Razor açıklamadır. HTML yorumlarından farklı olarak <!-- --> , Razor açıklamalar istemciye gönderilmez. Daha fazla bilgi için bkz. MDN Web belgeleri: HTML ile çalışmaya başlama.

Düzeni güncelleştirme

  1. <title> Pages/Shared/_Layout. cshtml dosyasındaki öğeyi Razor pagesmovie yerine filmi görüntüleyecek şekilde değiştirin.

    <!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. Sayfa/paylaşılan/_Layout. cshtml dosyasında aşağıdaki tutturucu öğeyi bulun.

    <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesMovie</a>
    
  3. Önceki öğeyi aşağıdaki biçimlendirmeyle değiştirin:

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

    Önceki tutturucu öğesi bir etiket yardımcıdır. Bu durumda, bağlantı etiketi yardımcısınınolması gerekir. asp-page="/Movies/Index"Etiket Yardımcısı özniteliği ve değeri sayfaya bir bağlantı oluşturur /Movies/Index Razor . asp-areaÖznitelik değeri boş olduğundan, alan bağlantıda kullanılmaz. Daha fazla bilgi için bkz. alanlara bakın.

  4. Rpmovie bağlantısını seçerek değişiklikleri kaydedin ve uygulamayı test edin. herhangi bir sorununuz varsa GitHub _Layout. cshtml dosyasına bakın.

  5. Home, Rpmovie, oluşturma, düzenleme ve silme bağlantılarını test edin. Her sayfada, tarayıcı sekmesinde görebileceğiniz başlık ayarlanır. Bir sayfada yer işareti eklediğinizde başlık, yer işareti için kullanılır.

Not

Alana ondalık virgüller giremeyebilirsiniz Price . Ondalık bir nokta ve US-English tarih biçimleri için virgül (",") kullanan Ingilizce olmayan yerel ayarlarda jQuery doğrulamasını desteklemek için, uygulamayı globalize için gerekli adımları uygulamanız gerekir. ondalık virgülden ekleme yönergeleri için bu GitHub 4076 sorun olduğunu inceleyin.

LayoutÖzelliği, Pages/_ViewStart. cshtml dosyasında ayarlanır:

@{
    Layout = "_Layout";
}

Yukarıdaki biçimlendirme, düzen dosyasını sayfalar klasörü altındaki tüm dosyalar için Sayfalar/paylaşılan/_Layout. cshtml olarak ayarlar Razor . Daha fazla bilgi için bkz. Düzen .

Sayfa oluştur modeli

Pages/filmler/Create. cshtml. cs sayfa modelini inceleyin:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesMovie.Models;
using System;
using System.Threading.Tasks;

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

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

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

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

OnGetYöntemi, sayfa için gereken tüm durumları başlatır. Oluşturma sayfasında, başlatılacak durum yoktur, bu nedenle Page döndürülür. Öğreticide daha sonra, OnGet başlatma durumuna bir örnek gösterilir. PageYöntemi PageResult Create. cshtml sayfasını işleyen bir nesne oluşturur.

MovieÖzelliği, model bağlamayıkabul etmek Için [BindProperty] özniteliğini kullanır. oluşturma formu form değerlerini gönderirse, ASP.NET Core çalışma zamanı, gönderilen değerleri Movie modele bağlar.

Bu OnPostAsync Yöntem, sayfa form verileri göndertiğinde çalıştırılır:

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

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

    return RedirectToPage("./Index");
}

Herhangi bir model hatası varsa, form, gönderilen tüm form verileriyle birlikte yeniden görüntülenir. Form gönderilmeden önce çoğu model hatası istemci tarafında yakalanabilir. Bir model hatasına bir örnek, Date alanı için bir tarihe dönüştürülemeyen bir değer gönderme. İstemci tarafı doğrulama ve model doğrulaması Öğreticinin ilerleyen kısımlarında ele alınmıştır.

Model hatası yoksa:

  • Veriler kaydedilir.
  • Tarayıcı Index sayfaya yönlendirilir.

Oluştur Razor sayfası

Sayfalar/filmler/Create. cshtml Razor sayfa dosyasını inceleyin:

@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 etiket yardımcıları için kullanılan farklı kalın yazı tipiyle aşağıdaki etiketleri görüntüler:

  • <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>

Create. cshtml sayfasının VS17 görünümü

<form method="post">Öğesi bir form etiketi yardımcıdır. Form etiketi Yardımcısı, bir antiforgery belirteciniotomatik olarak içerir.

Yapı iskelesi altyapısı, Razor modeldeki her alan için, kimliği dışında, aşağıdakine benzer şekilde biçimlendirme oluşturur:

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

Doğrulama etiketi yardımcıları ( <div asp-validation-summary ve <span asp-validation-for ) doğrulama hatalarını görüntüler. Doğrulama, bu serinin ilerleyen kısımlarında daha ayrıntılı bir şekilde ele alınmıştır.

Etiket etiketi Yardımcısı ( <label asp-for="Movie.Title" class="control-label"></label> ), özelliğin etiket açıklamalı alt yazısını ve [for] özniteliğini oluşturur Title .

Giriş etiketi Yardımcısı ( <input asp-for="Movie.Title" class="form-control"> ), dataaçıklamaların özniteliklerini kullanır ve istemci TARAFıNDA jQuery doğrulaması için gerekli HTML özniteliklerini üretir.

Gibi etiket yardımcıları hakkında daha fazla bilgi için <form method="post"> bkz. ASP.NET Core etiket yardımcıları.

Ek kaynaklar

Oluşturma, silme, Ayrıntılar ve düzenleme sayfaları

Pages/filmler/ Index . cshtml. cs sayfa modelini inceleyin:

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;

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

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

Razor Sayfalar öğesinden türetilir PageModel . Kural gereği, PageModel türetilmiş sınıf adlandırılır PageNameModel . Örneğin, Index sayfanın adı IndexModel .

Oluşturucu, sayfasına eklemek için bağımlılık ekleme işlemini kullanır RazorPagesMovieContext :

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

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

Entity Framework zaman uyumsuz programlama hakkında daha fazla bilgi için bkz. zaman uyumsuz kod .

Sayfa için bir istek yapıldığında, OnGetAsync yöntemi sayfaya bir film listesi döndürür Razor . Sayfasında Razor , OnGetAsync veya OnGet sayfanın durumunu başlatmak için çağırılır. Bu durumda, OnGetAsync filmlerin bir listesini alır ve görüntüler.

Döndürüldüğünde OnGet void veya OnGetAsync döndüğünde Task , Return deyimleri kullanılmaz. Örneğin, Privacy sayfayı inceleyin:

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()
    {
    }
}

Dönüş türü IActionResult veya olduğunda Task<IActionResult> , bir return ifadesinin sağlanması gerekir. Örneğin, Pages/filmler/Create. cshtml. cs OnPostAsync yöntemi:

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

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

    return RedirectToPage("./Index");
}

Pages/filmler/ Index . cshtml Razor sayfasını inceleyin:

@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 'den C# veya belirli bir biçimlendirmeye geçiş yapabilir Razor . Bir @ simgenin arkasından Razor ayrılmış bir anahtar sözcükgeldiğinde, bu, belirli bir Razor biçimlendirmeye geçiş yapar, aksi takdirde C# içine geçiş yapar.

@pageYönergesi

@page Razor Yönergesi, dosyayı bir MVC eylemi yapar, bu da istekleri işleyebileceği anlamına gelir. @page sayfadaki ilk yönerge olmalıdır Razor . @page ve @model belirli biçimlendirme örneklerine örnek olarak verilebilir Razor . Daha fazla bilgi için bkz. Razor sözdizimi .

@modelYönergesi

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

@modelYönergesi, sayfaya geçirilen modelin türünü belirtir Razor . Yukarıdaki örnekte, @model satır PageModel türetilen sınıfı sayfa için kullanılabilir hale getirir Razor . Model, @Html.DisplayNameFor sayfadaki ve @Html.DisplayFor HTML yardımcılarını sayfasında kullanılır.

Aşağıdaki HTML Yardımcısı 'nda kullanılan lambda ifadesini inceleyin:

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

DisplayNameExtensions.DisplayNameForHTML Yardımcısı, Title görünen adı belirlemede lambda ifadesinde başvurulan özelliği inceler. Lambda ifadesi değerlendirilmek yerine incelenir. Bu,,, veya boş olduğunda bir erişim ihlali olmadığı anlamına gelir model model.Movie model.Movie[0] null . Lambda ifadesi değerlendirildiğinde, örneğin ile, @Html.DisplayFor(modelItem => item.Title) modelin özellik değerleri değerlendirilir.

Düzen sayfası

Razor Pagesfilmi, ve ' menü bağlantılarını seçin Home Privacy . Her sayfada aynı menü düzeni gösterilir. Menü düzeni sayfa/paylaşılan/_Layout. cshtml dosyasında uygulanır.

Sayfalar/paylaşılan/_Layout. cshtml dosyasını açın ve inceleyin.

Düzen ŞABLONLARı, HTML kapsayıcı düzeninin şu şekilde olmasını sağlar:

  • Tek bir yerde belirtildi.
  • Sitede birden çok sayfada uygulandı.

Satırı bulun @RenderBody() . RenderBody , sayfaya özgü tüm görünümlerin, Düzen sayfasında kaydırılan bir yer tutucudur. Örneğin, Privacy bağlantıyı seçin ve Sayfalar/ Privacy . cshtml görünümü yöntemin içinde işlenir RenderBody .

ViewData ve Layout

Sayfalar/filmler/ Index . cshtml dosyasından aşağıdaki biçimlendirmeyi göz önünde bulundurun:

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

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

Önceki vurgulanan biçimlendirme C# ' ye geçme örneğidir Razor . {Ve } karakterleri bir C# kodu bloğunu kapsar.

PageModelTemel sınıf, ViewData verileri bir görünüme geçirmek için kullanılabilecek bir Dictionary özelliği içerir. Nesneler, ViewData anahtar değer bir model kullanılarak sözlüğe eklenir. Yukarıdaki örnekte, Title özelliği ViewData sözlüğe eklenir.

TitleÖzelliği Pages/Shared/_Layout. cshtml dosyasında kullanılır. Aşağıdaki biçimlendirme _Layout. cshtml dosyasının ilk birkaç satırını gösterir.

<!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>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

Satır @*Markup removed for brevity.*@ bir Razor açıklamadır. HTML yorumlarından farklı olarak <!-- --> , Razor açıklamalar istemciye gönderilmez. Daha fazla bilgi için bkz. MDN Web belgeleri: HTML ile çalışmaya başlama.

Düzeni güncelleştirme

  1. <title> Pages/Shared/_Layout. cshtml dosyasındaki öğeyi Razor pagesmovie yerine filmi görüntüleyecek şekilde değiştirin.

    <!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. Sayfa/paylaşılan/_Layout. cshtml dosyasında aşağıdaki tutturucu öğeyi bulun.

    <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesMovie</a>
    
  3. Önceki öğeyi aşağıdaki biçimlendirmeyle değiştirin:

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

    Önceki tutturucu öğesi bir etiket yardımcıdır. Bu durumda, bağlantı etiketi yardımcısınınolması gerekir. asp-page="/Movies/Index"Etiket Yardımcısı özniteliği ve değeri sayfaya bir bağlantı oluşturur /Movies/Index Razor . asp-areaÖznitelik değeri boş olduğundan, alan bağlantıda kullanılmaz. Daha fazla bilgi için bkz. alanlara bakın.

  4. Rpmovie bağlantısını seçerek değişiklikleri kaydedin ve uygulamayı test edin. herhangi bir sorununuz varsa GitHub _Layout. cshtml dosyasına bakın.

  5. Home, Rpmovie, oluşturma, düzenleme ve silme bağlantılarını test edin. Her sayfada, tarayıcı sekmesinde görebileceğiniz başlık ayarlanır. Bir sayfada yer işareti eklediğinizde başlık, yer işareti için kullanılır.

Not

Alana ondalık virgüller giremeyebilirsiniz Price . Ondalık bir nokta ve US-English tarih biçimleri için virgül (",") kullanan Ingilizce olmayan yerel ayarlarda jQuery doğrulamasını desteklemek için, uygulamayı globalize için gerekli adımları uygulamanız gerekir. ondalık virgülden ekleme yönergeleri için bu GitHub 4076 sorun olduğunu inceleyin.

LayoutÖzelliği, Pages/_ViewStart. cshtml dosyasında ayarlanır:

@{
    Layout = "_Layout";
}

Yukarıdaki biçimlendirme, düzen dosyasını sayfalar klasörü altındaki tüm dosyalar için Sayfalar/paylaşılan/_Layout. cshtml olarak ayarlar Razor . Daha fazla bilgi için bkz. Düzen .

Sayfa oluştur modeli

Pages/filmler/Create. cshtml. cs sayfa modelini inceleyin:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesMovie.Models;

namespace RazorPagesMovie.Pages.Movies
{
#pragma warning disable CS8618
#pragma warning disable CS8602

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

        // 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");
        }
    }
#pragma warning restore CS8618
#pragma warning restore CS8602
}

OnGetYöntemi, sayfa için gereken tüm durumları başlatır. Oluşturma sayfasında, başlatılacak durum yoktur, bu nedenle Page döndürülür. Öğreticide daha sonra, OnGet başlatma durumuna bir örnek gösterilir. PageYöntemi PageResult Create. cshtml sayfasını işleyen bir nesne oluşturur.

MovieÖzelliği, model bağlamayıkabul etmek Için [BindProperty] özniteliğini kullanır. oluşturma formu form değerlerini gönderirse, ASP.NET Core çalışma zamanı, gönderilen değerleri Movie modele bağlar.

Bu OnPostAsync Yöntem, sayfa form verileri göndertiğinde çalıştırılır:

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

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

    return RedirectToPage("./Index");
}

Herhangi bir model hatası varsa, form, gönderilen tüm form verileriyle birlikte yeniden görüntülenir. Form gönderilmeden önce çoğu model hatası istemci tarafında yakalanabilir. Bir model hatasına bir örnek, Date alanı için bir tarihe dönüştürülemeyen bir değer gönderme. İstemci tarafı doğrulama ve model doğrulaması Öğreticinin ilerleyen kısımlarında ele alınmıştır.

Model hatası yoksa:

  • Veriler kaydedilir.
  • Tarayıcı Index sayfaya yönlendirilir.

Oluştur Razor sayfası

Pages/Movies/Create.cshtml Razor Sayfa dosyasını inceleme:

@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, Etiket Yardımcıları için kullanılan kalın yazı tipiyle aşağıdaki etiketleri görüntüler:

  • <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>

Create.cshtml sayfasının VS17 görünümü

öğesi <form method="post"> bir Form Etiketi Yardımcı öğesidir. Form Etiketi Yardımcı'sı otomatik olarak bir sahtecilik önleme belirteci içerir.

Yapı iskelesi altyapısı, aşağıdakine benzer şekilde kimlik dışında Razor modelde yer alan her alan için işaretleme oluşturur:

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

Doğrulama Etiketi Yardımcıları ( <div asp-validation-summary ve ) doğrulama hatalarını <span asp-validation-for görüntüler. Doğrulama, bu serinin devamlarında daha ayrıntılı olarak ele alır.

Etiket Etiketi Yardımcısı ( <label asp-for="Movie.Title" class="control-label"></label> ) özelliği için etiket açıklamalı alt [for] yazısını ve özniteliğini Title üretir.

Giriş Etiketi Yardımcısı ( <input asp-for="Movie.Title" class="form-control"> ), DataAnnotations özniteliklerini kullanır ve istemci tarafında jQuery Doğrulaması için gereken HTML özniteliklerini üretir.

gibi Etiket Yardımcıları hakkında daha fazla bilgi için <form method="post"> bkz. ASP.NET Core.

Ek kaynaklar