Alıştırma - Yeni pizza formu ekleme
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.
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ınaPizzaListModel
eklenir.-
NewPizza
birPizza
nesnedir.
-
-
BindProperty
özniteliğiNewPizza
özelliğine uygulanır.-
BindProperty
özniteliği, özelliğini Razor sayfasına bağlamakNewPizza
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 olarakdefault!
başlatılır.-
default!
anahtar sözcüğü, özelliğini olarak başlatmakNewPizza
içinnull
kullanılır. Bu, derleyicinin özelliğinNewPizza
başlatılmamış olduğu hakkında bir uyarı oluşturmasını engeller.
-
- adlı
Ş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 gibiRequired
Range
) çıkarılır. - Kullanıcının girişi geçersizse, sayfayı
Page
yeniden işlemek için yöntemi çağrılır.
- Doğrulama kuralları Models\Pizza.cs dosyasındaki sınıftaki
-
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çinGet
kullanılır ve bu da sayfayı güncelleştirilmiş pizza listesiyle yeniden işler.
-
Dosyayı kaydedin. GitHub Codespaces kullanıyorsanız dosya otomatik olarak kaydedilir.
Ç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.
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ılarakasp-for
ilgiliNewPizza
ö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çinIsGlutenFree
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.
- özniteliği, modelin
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.
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 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.
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
Delete
ayarlandığından, sayfa bu yöntemiasp-page-handler
kullanmayı bilir.
-
Pages\PizzaList.cshtml içindeki Sil düğmesindeki öznitelik olarak
-
id
parametresi silinecek pizzayı tanımlamak için kullanılır.-
id
parametresi URL'dekiid
yol değerine bağlıdır. Bu, Pages\PizzaList.cshtml içindeki Sil düğmesindeki özniteliğiyleasp-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çinGet
kullanılır ve bu da sayfayı güncelleştirilmiş pizza listesiyle yeniden işler.
- Kullanıcı
Dosyayı kaydedin. GitHub Codespaces kullanıyorsanız dosya otomatik olarak kaydedilir.
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.