Pizza form gönderimini Işle

7 dakika

Bu birimde, pizza Razor sayfa formu IÇIN BIR http post sayfası işleyicisi ekleyeceksiniz. Son olarak, Pizza hem istemci tarafı hem de sunucu tarafı doğrulamayı destekleyen model ve onun veri açıklamalarını adım adım ilerleyebilirsiniz.

Razor Pages sınıfının yapısını İnceleme `PageModel`

Pages/pizza. cshtml. cs PageModel sınıf dosyasını açın. Pizza adlı yeni bir Razor sayfası oluşturduğunuzda, PageModel pizza. cshtml. cs adlı sınıf dosyasının oluşturulduğunu unutmayın. İçeriği inceleyin. Aşağıdaki C# kodunu içerir:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesPizza.Pages
{
    public class PizzaModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Pizzas listesini göstermek için HTTP Get sayfa işleyicisini güncelleştirme

Şu anda, PizzaModel sınıfı boş bir sayfa IŞLEYICISIYLE http get isteğini işler OnGet . Bunu, öğesinden bir Pizzas listesini görüntüleyecek şekilde güncelleştirelim PizzaService .

`OnGet`Sayfa işleyicisini güncelleştirme

OnGetYöntemi aşağıdaki gibi güncelleştirin:

public void OnGet()
{
    pizzas = PizzaService.GetAll();
}

List<Pizza>Sınıfına adlı bir değişken ekleyin pizzas PizzaModel :

public List<Pizza> pizzas;

OnGetYöntemi çağrıldığında, PizzaService.GetAll() yöntemin sonuçlarını değişkenine atar pizzas . Bu değişkene, kullanılabilir Pizzas 'in listelendiği tabloya yazılacağı Razor sayfası şablonu tarafından erişilebilecektir.

Listedeki daha fazla boş bilgiyi biçimlendirmek için yardımcı program yöntemini kullanın

IsGlutenFreeÖzelliği bir Boole değeridir. Boole değerini bir dize olarak biçimlendirmek için yardımcı program yöntemi kullanabiliriz. Aşağıdaki yardımcı program yöntemini PizzaModel sınıfına ekleyin:

public string GlutenFreeText(Pizza pizza)
{
    if (pizza.IsGlutenFree)
        return "Gluten Free";
    return "Not Gluten Free";
}

Öğesine bir HTTP POST sayfası işleyicisi ekleyin `PageModel`

Aşağıdaki yöntemi Pages/pizza. cshtml. cs PageModel sınıfına ekleyin. Yaptığınız değişiklikleri kaydedin.

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }
    PizzaService.Add(NewPizza);
    return RedirectToAction("Get");
}

PizzaModelSınıf artık zaman uyumsuz bir OnPost sayfa işleyicisine sahiptir. OnPost Kullanıcı, pizza sayfasının formunu gönderdiğinde yürütülür. İsteğe bağlı zaman uyumsuz adlandırma sonekini da kullanabilirsiniz OnPostAsync .

OnPostSayfa işleyicisinin bu uygulama için aşağıdaki görevleri gerçekleştirmesi gerekir:

PageModel öğesine kullanıcı tarafından gönderilen verileri doğrulayın.
Denenen PageModel değişiklikler geçersizse, pizza sayfası kullanıcıya yeniden sunulur. Giriş gereksinimlerini açıklığa kavuşturan bir ileti görüntülenir.
PageModel güncelleştirmesi geçerliyse, veri değişiklikleri PizzaService adlı bir hizmete geçirilir. PizzaService HTTP isteklerinin ve Web API’sine yapılan yanıtların konusunu işler.

Modeli bağlama

PizzaModel sınıfının Pizza modeline erişmesi gerekir. PizzaÖzniteliği kullanılarak, pizza formundaki girişleri doğrular ve geçer [BindProperty] . Sınıfınıza aşağıdaki kodu ekleyin PizzaModel :

[BindProperty]
public Pizza NewPizza { get; set; }

Silme düğmeleri için HTTP POST işleyicisi ekleme

Razor sayfası birden çok form içerebilir. Pizzas listemize ait silme düğmeleri verileri değiştirdiği için, HTTP GET olması yerine bir HTTP GÖNDERISI gerekir.

OnPostDeleteSınıfına aşağıdaki yöntemi ekleyin PizzaModel :

public IActionResult OnPostDelete(int id)
{
    PizzaService.Delete(id);
    return RedirectToAction("Get");
}

Pizza sayfasına bağlantı

Pizza sayfası oluşturuldu ve uygulandı. Kullanıcıların buna gidebilmesini sağlayalım.

Dizin sayfasına bir tutturucu etiketi Yardımcısı ekleyin

Sayfalar/paylaşılan/Layout. cshtml' de, <nav> ve bağlantıları arasındaki bölüme aşağıdaki kodu ekleyin Home Privacy :

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/Pizza">Pizza List</a>
</li>

Sonuç şu şekilde görünür:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RazorPagesPizza</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesPizza</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Pizza">Pizza List</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - RazorPagesPizza - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Yaptığınız değişiklikleri kaydedin.

Önceki vurgulanmış kod bir tutturucu etiketi Yardımcısı kullanır. Etiket Yardımcısı:

Kullanıcıyı, Dizin sayfasıyla aynı dizinde bulunan sayfa/Pizzas/Create. cshtml Razor sayfasına yönlendirir.
<a>, Gibi özel HTML öznitelikleri ekleyerek standart HTML Tutturucu () etiketini geliştirir asp-page-handler .

Özniteliği, asp-page-handler özniteliğinde tanımlanan Razor sayfasına yönelik belirli bir sayfa işleyicisine yönlendirmek için kullanılır asp-page . asp-pageÖzniteliği, bir tutturucu etiketinin href öznitelik değerini belirli bir Razor sayfasına ayarla kullanılır.

Devam et

Razor Pages sınıfının yapısını İnceleme PageModel