Alıştırma - Yeni pizza formu ekleme

  • 10 dakika

Bu ünitede, yeni pizzalar oluşturmak için bir form ekleyerek Pizza Listesi sayfasını tamamlayacaksınız. Ayrıca, pizzaların form gönderimini ve silinmesini işlemek için sayfa işleyicileri de ekleyeceksiniz.

Yeni pizzalar oluşturmak için form ekleme

Kullanıcının girişini temsil etmek için sınıfına PizzaListModel özellikler ekleyerek başlayalım. Uygun sayfa işleyicisini de ekleyeceksiniz.

  1. Pages\PizzaList.cshtml.cs dosyasını açın ve sınıfına PizzaListModel aşağıdaki özelliği ekleyin:

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

    Yukarıdaki kodda:

    • adlı NewPizza bir özellik sınıfına PizzaListModel eklenir.
      • NewPizza bir Pizza nesnedir.
    • BindProperty özniteliği NewPizza özelliğine uygulanır.
      • BindProperty özniteliği, özelliğini Razor sayfasına bağlamak NewPizza için kullanılır. HTTP POST isteği yapıldığında, NewPizza özelliği kullanıcının girişiyle doldurulur.
    • NewPizza özelliği olarak default!başlatılır.
      • default! anahtar sözcüğü, özelliğini olarak başlatmak NewPizza için nullkullanılır. Bu, derleyicinin özelliğin NewPizza başlatılmamış olduğu hakkında bir uyarı oluşturmasını engeller.

  2. Şimdi HTTP POST için sayfa işleyicisini ekleyin. Aynı dosyada sınıfına aşağıdaki yöntemi PizzaListModel ekleyin:

    public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}

    Yukarıdaki kodda:

    • ModelState.IsValid özelliği, kullanıcının girişinin geçerli olup olmadığını belirlemek için kullanılır.
      • Doğrulama kuralları Models\Pizza.cs dosyasındaki sınıftaki Pizza özniteliklerden (ve gibi RequiredRange) çıkarılır.
      • Kullanıcının girişi geçersizse, sayfayı Page yeniden işlemek için yöntemi çağrılır.
    • NewPizza özelliği, nesnesine yeni bir pizza eklemek için _service kullanılır.
    • RedirectToAction yöntemi, kullanıcıyı sayfa işleyicisine yönlendirmek için Get kullanılır ve bu da sayfayı güncelleştirilmiş pizza listesiyle yeniden işler.

  3. Dosyayı kaydedin. GitHub Codespaces kullanıyorsanız dosya otomatik olarak kaydedilir.

  4. Çalışan dotnet watch terminale dönün ve uygulamayı yeniden yüklemek için Ctrl+R tuşlarına basın.

Artık form gönderimini işlemek için bir sayfa işleyicisi olduğuna göre, formu Razor Sayfasına ekleyelim.

  1. Pages\PizzaList.cshtml dosyasını açın ve öğesini <!-- New Pizza form will go here --> aşağıdaki kodla değiştirin:

    <form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="NewPizza.Name" class="control-label"></label>
    <input asp-for="NewPizza.Name" class="form-control" />
    <span asp-validation-for="NewPizza.Name" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Size" class="control-label"></label>
    <select asp-for="NewPizza.Size" class="form-control" id="PizzaSize">
        <option value="">-- Select Size --</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
    </select>
    <span asp-validation-for="NewPizza.Size" class="text-danger"></span>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
        <input class="form-check-input" asp-for="NewPizza.IsGlutenFree" /> @Html.DisplayNameFor(model => model.NewPizza.IsGlutenFree)
    </label>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Price" class="control-label"></label>
    <input asp-for="NewPizza.Price" class="form-control" />
    <span asp-validation-for="NewPizza.Price" class="text-danger"></span>
</div>
<div class="form-group">
    <input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>

    Yukarıdaki kodda:

    • özniteliği, modelin asp-validation-summary tamamı için doğrulama hatalarını görüntülemek için kullanılır.
    • Her form alanı (<input>ve <select> öğeleri) ve her <label> biri özniteliği kullanılarak asp-for ilgili NewPizza özelliğe bağlıdır.
    • asp-validation-for özniteliği, her form alanı için doğrulama hatalarını görüntülemek için kullanılır.
    • @Html.DisplayNameFor yöntemi özelliğin görünen adını görüntülemek için IsGlutenFree kullanılır. Bu, bir özelliğin görünen adını görüntülemek için kullanılan bir Razor yardımcı yöntemidir. Etiketin bu şekilde yapılması, kullanıcı etikete tıkladığında onay kutusunun seçili olmasını sağlar.
    • Form verilerini sunucuya göndermek için forma etiketli Create bir gönder düğmesi eklenir. Çalışma zamanında, kullanıcı bu Oluştur düğmesini seçtiğinde tarayıcı formu sunucuya HTTP POST isteği olarak gönderir.

  2. Sayfanın en altına aşağıdaki kodu ekleyin:

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

    Bu, istemci tarafı doğrulama betiklerini sayfaya ekler. İstemci tarafı doğrulama betikleri, form sunucuya gönderilmeden önce kullanıcının girişini doğrulamak için kullanılır.

  3. Dosyayı kaydedin. Tarayıcıda Pizza Listesi sayfası yeni formla yenilenir. GitHub Codespaces kullanıyorsanız dosya otomatik olarak kaydedilir, ancak tarayıcı sekmesini el ile yenilemeniz gerekir.

    Yeni pizza formunu içeren PizzaList sayfasının ekran görüntüsü.

  4. Yeni bir pizza girin ve Oluştur düğmesini seçin. Sayfa yenilenmeli ve yeni pizzayı listede göstermelidir.

Pizzaları silmek için sayfa işleyicisi ekleme

Pizza Listesi sayfasına eklenecek son bir parça vardır: pizzaları silmek için bir sayfa işleyici. Pizzaları silme düğmeleri zaten sayfadadır, ancak henüz bir şey yapmazlar.

  1. Pages\PizzaList.cshtml.cs dosyasına geri dönüp sınıfına PizzaListModel aşağıdaki yöntemi ekleyin:

    public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}

    Yukarıdaki kodda:

    • Kullanıcı OnPostDelete pizza için Sil düğmesine tıkladığında yöntemi çağrılır.
      • Pages\PizzaList.cshtml içindeki Sil düğmesindeki öznitelik olarak Deleteayarlandığından, sayfa bu yöntemi asp-page-handler kullanmayı bilir.
    • id parametresi silinecek pizzayı tanımlamak için kullanılır.
      • id parametresi URL'deki id yol değerine bağlıdır. Bu, Pages\PizzaList.cshtml içindeki Sil düğmesindeki özniteliğiyle asp-route-id gerçekleştirilir.
    • DeletePizza yöntemi, pizzayı _service silmek için nesnesinde çağrılır.
    • RedirectToAction yöntemi, kullanıcıyı sayfa işleyicisine yönlendirmek için Get kullanılır ve bu da sayfayı güncelleştirilmiş pizza listesiyle yeniden işler.

  2. Dosyayı kaydedin. GitHub Codespaces kullanıyorsanız dosya otomatik olarak kaydedilir.

  3. Pizza için Sil düğmesini test edin. Sayfa yenilenmeli ve seçilen pizza listeden kaldırılmalıdır.

Tebrikler! Pizza listesini görüntüleyen, kullanıcının yeni pizza eklemesine ve ayrıca kullanıcının pizzaları silmesine izin veren bir Razor Sayfasını başarıyla oluşturdunuz.

Bilginizi ölçün

1.

Bir içinde form gönderimini PageModelişlemek için hangi yöntemi kullanırsınız?