Alıştırma - Formlu Pizza listesi sayfası ekleme - Learn

8 dakika

Bu ünitede, sayfanın mantığını sunumundan ayırmak için Razor Pages kullanarak RazorPagesPizza projesinde bir form oluşturabilirsiniz.

Sayfa oluşturma

RazorPagesPizza proje dizini şu anda Visual Studio Code. Komut kabuğunda aşağıdaki .NET Core CLI komutunu çalıştırın:

dotnet new page --name Pizza --namespace RazorPagesPizza.Pages --output Pages

Yukarıdaki komut:

Ad alanı içinde aşağıdaki dosyaları RazorPagesPizza.Pages oluşturur:
- Pizza.cshtml — Razor sayfası
- Pizza.cshtml.cs — Eşlik eden PageModel sınıf
Her iki dosya da projenin Pages dizininde depolar.

Bu dosyaları oluşturmak için CLI kullanmanın sihirli bir şey olmadığını unutmayın. Dosyaları el ile de oluşturabilirsiniz; CLI komutu yalnızca bunu yapmak için bir kısayol.

Razor sayfasının yapısını inceleme

Yeni Pages/Pizza.cshtml Razor sayfasını açın. Dosyanın işaretlemelerini inceleme:
```
@page
@model RazorPagesPizza.Pages.PizzaModel
@{
}
```
Önceki Razor sayfası ayrılmış Razor anahtar sözcükleri içerir:
- @page yönergesi, sayfayı bir Razor sayfası yapar. Sayfanın HTTP isteklerini işleyebileceğini gösterir. @page dizini bir Razor sayfasındaki ilk dizin olmalıdır.
- @modelyönergesi, Razor sayfası için kullanılabilir yapılan model türünü belirtir. Bu durumda tür türetilen PageModel sınıf adıdır ve ad alanı ön ekini ekler. Hatırlayarak bu sınıf Pages/Pizza.cshtml.cs içinde tanımlanmıştır.

HTML işleme ve C# geçişi

Aşağıdaki biçimlendirme, bir @ sembolü ve ardından C# koduna bir örnektir. Kod, ViewData koleksiyonun anahtar Title değerini olarak Create ayarlar. Razor söz dizimi HTML’den C#’ye geçiş yapmak için @ sembolünü kullanır. @ sembolünü Razor tarafından ayrılmış bir anahtar sözcük takip ediyorsa, Razor’a özel işaretlemeye geçiş yapılır; aksi takdirde C#’ye geçiş yapılır. Razor C# ifadelerini değerlendirir ve bunları HTML çıkışında işler.

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

Razor sayfası, HTML Razor söz dizimi C# ile birlikte kullanılan bir web sayfasını destekler. C# kodu, sunucu sayfasındaki dinamik işleme mantığını tanımlar. Varsayılan Razor dili HTML’dir. Razor işaretlemesinden HTML işlemek, HTML dosyasından HTML işlemekten farklı değildir. .cshtml Razor sayfa dosyalarında HTML işaretlemesi sunucu tarafından değiştirilmeden işlenir. Razor Pages içinde HTML kodlarını normal şekilde kullanabilirsiniz. Aynı zamanda, bunları kullanmayı öğrenirken güçlü ve zaman tasarrufu sağlayan Razor özelliklerinden de faydalanabilirsiniz.

Pizza ve PizzaService sınıfları ekleme

Pizzaları yönetmek için formlarımızı uygulamaya başlamadan önce üzerinde işlem gerçekleştirecek bir veri deposuna sahip olmak gerekir.

Stokta pizzayı temsil etmek için model sınıfı gerekir. Model, bir pizzanın özelliklerini temsil eden özellikler içerir. Model, verileri web uygulamasından geçmek ve pizza seçeneklerini veri deposuna kalıcı olarak saklamak için kullanılır. Bu ünitede, bu veri deposu basit bir yerel bellek içinde önbelleğe alma hizmeti olacak. Gerçek hayattaki bir uygulamada, SQL Server gibi bir veritabanı ve Entity Framework Core.

Pizza modeli oluşturma

Klasör oluşturmak için aşağıdaki komutu Models çalıştırın:
```
mkdir Models
```
içinde Models klasörünü seçin Visual Studio Code adlı yeni bir Dosya Pizza.cs ekleyin.

Proje kökü artık boş bir Pizza.cs dosyası içeren Models dizinini içeriyor. Dizinin adının Models olması bir kuraldır.

Bir pizza tanımlamak için Models/Pizza.cs'ye aşağıdaki kodu ekleyin. Yaptığınız değişiklikleri kaydedin.

namespace RazorPagesPizza.Models
{
    public class Pizza
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }
        public PizzaSize Size { get; set; }
        public bool IsGlutenFree { get; set; }

        [Range(0.01, 9999.99)]
        public decimal Price { get; set; }
    }

    public enum PizzaSize { Small, Medium, Large }
}

İpucu

Aşağıdaki klavye kısayolları Cloud Shell düzenleyicisinin içinde yararlı olur.

Klavye kısayolu	Komut
`Ctrl+V` (Windows) `⌘+V` (macOS)	Yapıştır
`Ctrl+S` (Windows) `⌘+S` (macOS)	Kaydet

Veri hizmeti ekleme

Klasör oluşturmak için aşağıdaki komutu Services çalıştırın:
```
mkdir Services
```
içinde klasörünü seçin Visual Studio Code adlı yeni bir Dosya PizzaService.cs ekleyin.

Bellek içinde bir pizza veri hizmeti oluşturmak için Aşağıdaki kodu Services/PizzaService.cs'ye ekleyin. Yaptığınız değişiklikleri kaydedin.

using RazorPagesPizza.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPagesPizza.Services
{
    public static class PizzaService
    {
        static List<Pizza> Pizzas { get; }
        static int nextId = 3;
        static PizzaService()
        {
            Pizzas = new List<Pizza>
            {
                new Pizza { Id = 1, Name = "Classic Italian", Price=20.00M, Size=PizzaSize.Large, IsGlutenFree = false },
                new Pizza { Id = 2, Name = "Veggie", Price=15.00M, Size=PizzaSize.Small, IsGlutenFree = true }
            };
        }

        public static List<Pizza> GetAll() => Pizzas;

        public static Pizza Get(int id) => Pizzas.FirstOrDefault(p => p.Id == id);

        public static void Add(Pizza pizza)
        {
            pizza.Id = nextId++;
            Pizzas.Add(pizza);
        }

        public static void Delete(int id)
        {
            var pizza = Get(id);
            if (pizza is null)
                return;

            Pizzas.Remove(pizza);
        }

        public static void Update(Pizza pizza)
        {
            var index = Pizzas.FindIndex(p => p.Id == pizza.Id);
            if (index == -1)
                return;

            Pizzas[index] = pizza;

        }
    }
}

Bu hizmet, web uygulamamızın tanıtım amacıyla kullanacağız varsayılan olarak iki pizzaya sahip basit bir bellek içinde veri önbelleğe alma hizmeti sağlar. Web uygulamasını durduracak ve başlatacaksanız, bellek içinde veri önbelleği oluşturucusu tarafından iki varsayılan pizzaya PizzaService sıfırlanır.

Pizza Razor sayfasına form işaretlemesi ekleme

Pages/Pizza.cshtml içeriğini aşağıdaki işaretlemeyle değiştirin. Yaptığınız değişiklikleri kaydedin.

@page
@using RazorPagesPizza.Models
@model RazorPagesPizza.Pages.PizzaModel
@{
    ViewData["Title"] = "Pizza List";
}

<h1>Pizza List 🍕</h1>
<form method="post" class="card p-3">
    <div class="row">
        <div asp-validation-summary="All"></div>
    </div>
    <div class="form-group mb-0 align-middle">
        <label asp-for="NewPizza.Name">Name</label>
        <input type="text" asp-for="NewPizza.Name" class="mr-5">
        <label asp-for="NewPizza.Size">Size</label>
        <select asp-for="NewPizza.Size" asp-items="Html.GetEnumSelectList<PizzaSize>()" class="mr-5"></select>
        <label asp-for="NewPizza.Price"></label>
        <input asp-for="NewPizza.Price" class="mr-5" />
        <label asp-for="NewPizza.IsGlutenFree">Gluten Free</label>
        <input type="checkbox" asp-for="NewPizza.IsGlutenFree" class="mr-5">
        <button class="btn btn-primary">Add</button>
    </div>
</form>
<table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    @foreach (var pizza in Model.pizzas)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@Model.GlutenFreeText(pizza)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
</table>

@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

İpucu

Aşağıdaki klavye kısayolları Cloud Shell düzenleyicisinin içinde yararlı olur.

Klavye kısayolu	Komut
`Ctrl+V` (Windows) `⌘+V` (macOS)	Yapıştır
`Ctrl+S` (Windows) `⌘+S` (macOS)	Kaydet

Pizza Razor sayfası, ürün oluşturma formunu desteklemek için HTML ve Razor kullanır. Form, oluşturulacak ürün için Ad ve Fiyat değerlerini kabul eder. Görece az miktarda yapılan biçimlendirme sayesinde, Razor Etiket Yardımcıları aracılığıyla dinamik özellikler sağlanmıştır. İstemci tarafı form girişi doğrulaması, Sayfalar/Paylaşılan/_ValidationScriptsPartial.cshtml kısmi görünümünün eklenmesiyle etkinleştirilir. Kısmi görünümün içeriği düzen sayfasının bölümüne yer Scripts almaktadır.

Razor Etiket Yardımcılarını Gözden Geçirme

Etiket Yardımcıları, HTML ve C# arasında bağlam değiştirmenin tutarsızlıklarını ele alır. Çoğu ASP.NET Core Etiket Yardımcıları standart HTML öğelerini genişleter. Etiket Yardımcıları, HTML öğeleri için ek sunucu tarafı öznitelikleri sağlar ve bu da öğeleri daha sağlam hale sağlar.

Bu sayfada dört Etiket Yardımcısı vardır:

Kısmi
Etiketle
Giriş
Doğrulama Özeti İletisi

Kısmi Etiket Yardımcısı

Aşağıdaki işaretleme kısmi bir görünümü zaman uyumsuz olarak işlemek için Kısmi Etiket Yardımcı'sı kullanır:

<partial name="_ValidationScriptsPartial" />

Kısmi Etiket Yardımcısı name özniteliği, dosya uzantısı olmadan kısmi görünüm adını kabul eder. Bir görünüm bulma işlemi, projesinde kısmi görünümü bularak.

Bu Etiket Yardımcı söz dizimi, aşağıdaki HTML Yardımcı söz dizimlerinin bir alternatifidir:

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

Etiket Etiketi Yardımcısı

Aşağıdaki işaretleme Etiket Etiketi Yardımcı'sı kullanır:

<label asp-for="NewPizza.Name" class="control-label"></label>

Etiket etiketi Yardımcısı, standart HTML öğesini genişletir <label> . Birçok etiket Yardımcıda yaygın olduğu gibi bir asp-for özniteliği kullanır. Öznitelik belirtilen bir özelliği kabul eder PageModel . Bu durumda, PageModel Name özelliğinin değeri bir HTML <label> öğesi için içerik olarak işlenir. asp-for özniteliği, Razor sayfası için PageModel öğesine kapsamlandırılır, bu nedenle @ sembolü kullanılmaz. Etiket, burada gerekli olduğu gibi dinamiktir, ancak işaretlemenize eklemek daha kompakt ve kolay bir şekilde kalır.

Giriş Etiketi Yardımcısı

Aşağıdaki işaretleme Etiket Yardımcısı’nı kullanır. Standart HTML <input> öğesini genişletir. Ayrıca bir PageModel özelliği belirtmek için bir asp-for özniteliği kullanır.

<input asp-for="NewPizza.Name" class="form-control" />

Giriş etiketi Yardımcısı:

NewPizza.NameEtiket etiketi Yardımcısı gibi özelliği değerlendirir.
id name Bu özelliğe göre bir ve HTML özniteliği ekler.
Giriş türünü uygun şekilde ayarlar. Örneğin, belirtilen özellik türü ise, bool checkbox oluşturulan HTML 'de bir giriş türü kullanılır. Bu durumda, NewPizza.Name özellik türü string . NewPizza.Name özelliği, bu modülün ilerleyen kısımlarında gözden geçirilecek olan modelin veri açıklaması öznitelikleri tarafından ayarlanır.
, İle sağlanan modelin veri ek açıklaması özniteliklerine dayalı olarak jQuery kullanarak istemci tarafı doğrulaması sağlar PageModel .
İstemci tarafı doğrulama başarılı olursa Razor altyapısından ek, daha güçlü sunucu tarafı doğrulama gerçekleştirmesini ister. İstemci tarafı ve sunucu tarafı giriş doğrulamasını içeren pizza Razor SAYFASıNıN http post olay yaşam döngüsü, Bu modülün ilerleyen kısımlarında ele geçirildi.

Aşağıdaki HTML çıktısı, pizza sayfasında bulunan giriş etiketi yardımcısından oluşturulmuştur:

<input name="NewPizza.Name" class="form-control" id="NewPizza_Name" type="text" value="" data-val-required="The Name field is required." data-val="true">

Doğrulama Özeti Etiketi Yardımcısı

Aşağıdaki biçimlendirme doğrulama özeti etiketi yardımcısını kullanır. Modelde tek bir özellik için doğrulama iletisini görüntüler.

<div asp-validation-summary="All"></div>

Giriş etiketi Yardımcısı, data- giriş ÖĞELERINE HTML5 öznitelikleri ekler. Öznitelikler C# model sınıflarındaki özellikleri temel alır. Duyarlı istemci tarafında doğrulama işlemi gerçekleştiğinde, bu işlem aynı zamanda daha güvenli olan sunucuda da gerçekleştirilir.

Aşağıdaki HTML, doğrulama özeti etiketi Yardımcısı tarafından işlenir:

<input name="NewPizza.Price" class="form-control" id="NewPizza_Price" type="text" value="" data-val-required="The Price field is required." data-val="true" data-val-range-min="0.01" data-val-range-max="9999.99" data-val-range="The field Price must be between 0.01 and 9999.99." data-val-number="The field Price must be a number.">

type, data-val-range-min, data-val-range-max ve hata yanıtı, modelin Product.Price özelliği için veri açıklamaları tarafından dinamik olarak ayarlanır.

Ürün oluşturma Razor sayfası oluşturuldu. Form etkileşimlerini işlemek için, PageModel formun http post isteğini işlemek üzere sınıfını değiştirmemiz gerekir. Etkileşimleri ileri keşfetmeye başlayacağız PageModel .

Devam et