Alıştırma - Yeni razor sayfası ekleme

  • 10 dakika

Önceki ünitede Contoso Pizza projesinin kaynak kodunu elde ettiniz ve giriş sayfasında bazı basit değişiklikler yaptınız. Bu ünitede projeye yeni bir Razor sayfası ekleyeceksiniz.

Pizza Listesi sayfasını oluşturma

Yeni bir Razor sayfası oluşturmak için .NET CLI kullanacaksınız.

  1. Terminal komut tarafından engellendiğindendotnet watch, Gezgin'de ContosoPizza klasörüne sağ tıklayıp Tümleşik Terminalde Aç'ı seçerek başka bir terminal açın.

  2. Yeni terminal penceresine aşağıdaki komutu girin:

    dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages

    Yukarıdaki komut:

    • Ad alanında ContosoPizza.Pages şu iki dosyayı oluşturur:
      • PizzaList.cshtml - Razor sayfası
      • PizzaList.cshtml.cs - eşlik eden PageModel sınıf
    • Her iki dosyayı da projenin Pages alt dizininde depolar.

  3. Pages/PizzaList.cshtml dosyasında, kod bloğunun @{ } içine aşağıdaki kodu ekleyin:

    ViewData["Title"] = "Pizza List 🍕";

    Bu, sayfanın öğesini ayarlar <title> .

  4. Dosyanın sonuna aşağıdaki kodu ekleyin:

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

    Bu, sayfaya bir başlığın yanı sıra daha sonra ekleyeceğiniz işlevler için iki HTML açıklaması yer tutucusu ekler.

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

  6. çalıştıran dotnet watchterminale dönün ve uygulamayı yeniden yüklemek ve yeni dosyaları algılamak için Ctrl+R tuşlarına basın.

Pizza Listesi sayfasını gezinti menüsüne ekleme

Bu, sayfayı test etmek için iyi bir zaman olabilir, ancak sayfaya henüz gezinti menüsünde bağlı olmadığından tarayıcıda erişilemiyor. Şimdi bağlayacaksınız.

  1. Pages/Shared/_Layout.cshtml dosyasını açın.

  2. sınıfına <ul> navbar-nav sahip öğesinde (21. satırda başlar), Giriş ve Gizlilik sayfalarının bağlantılarını içeren öğeleri not edin<li>. Gizlilik bağlantısını içeren öğeden sonra listenin <li> sonuna aşağıdaki kodu ekleyin:

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

    Bu, gezinti menüsüne PizzaList sayfasına bir bağlantı ekler.

  3. Dosyayı kaydedin. Değişikliklerin görüntülenmesi için uygulamanın yer alan tarayıcı sekmesi otomatik olarak yenilenir. GitHub Codespaces kullanıyorsanız dosya otomatik olarak kaydedilir, ancak tarayıcı sekmesini el ile yenilemeniz gerekir.

  4. Gezinti menüsünde Pizza Listesi 🍕 bağlantısını seçin. Pizza Listesi sayfası görüntülenir.

PizzaService sınıfını bağımlılık ekleme kapsayıcısıyla kaydetme

Pizza Listesi sayfası, pizza listesini almak için nesneye bağlıdır PizzaService . Nesneyi sayfaya sağlamak PizzaService için bağımlılık ekleme özelliğini kullanacaksınız. İlk olarak sınıfını PizzaService kapsayıcıya kaydedin.

  1. Program.cs dosyasını açın.

  2. Kapsayıcıya hizmet ekleyen bölümde aşağıdaki kodu ekleyin:

    builder.Services.AddScoped<PizzaService>();

    Bu kod, sınıfı bağımlılık ekleme kapsayıcısıyla kaydeder PizzaService . yöntemi, AddScoped her HTTP isteği için yeni PizzaService bir nesne oluşturulması gerektiğini belirtir. Artık herhangi PizzaService bir Razor sayfasına eklenebilir.

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

Pizza listesini görüntüleme

Pizza Listesi sayfasının sınıfını PageModel değiştirerek nesneden PizzaService pizza listesini alıp bir özellikte depolayalım.

  1. Sayfalar/PizzaList.cshtml.cs'ı açın.

  2. Dosyanın en üstüne aşağıdaki using deyimleri ekleyin:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Bu deyimler, sayfada kullanacağınız ve PizzaService türlerini içeri aktarırPizza.

  3. Ad alanı bloğunun ContosoPizza.Pages içinde sınıfın tamamını PizzaListModel aşağıdaki kodla değiştirin:

    public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}

    Önceki kodda:

    • Adlı _service özel bir salt okunur PizzaService oluşturulur. Bu değişken bir nesneye başvuru tutar PizzaService .
      • readonly anahtar sözcüğü, değişkenin değerinin _service oluşturucuda ayarlandıktan sonra değiştirilebileceğini gösterir.
    • Pizza PizzaList listesini tutmak için bir özellik tanımlanır.
      • türü, IList<Pizza> özelliğin PizzaList bir nesne listesi Pizza barındıracağını gösterir.
      • PizzaList , derleyiciye daha sonra başlatılacağını belirtmek için olarak başlatılır default! , bu nedenle null güvenlik denetimleri gerekli değildir.
    • Oluşturucu bir PizzaService nesneyi kabul eder.
      • PizzaService Nesnesi bağımlılık ekleme tarafından sağlanır.
    • OnGet Nesnesinden PizzaService pizza listesini almak ve özelliğinde PizzaList depolamak için bir yöntem tanımlanır.

    İpucu

    Null güvenliği anlama konusunda yardıma ihtiyacınız varsa bkz . C# dilinde null güvenlik.

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

  5. Çalışan dotnet watch terminale dönün ve Ctrl+R tuşlarına basarak uygulamayı kayıtlı hizmetle ve için PizzaListModelyeni oluşturucuyla yeniden yükleyin.

Pizza listesini görüntüleme

Artık sayfanın pizza listesine erişimi olduğuna göre, sayfadaki pizzaları görüntülemek için bu listeyi kullanacaksınız.

  1. Pages/PizzaList.cshtml dosyasını açın.

  2. <!-- List of pizzas will go here --> açıklamasını aşağıdaki kodla değiştirin:

    <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>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>

    Önceki kodda:

    • Pizza <table> listesini görüntülemek için bir öğe oluşturulur.
    • <thead> Tablo üst bilgisini tutmak için bir öğe oluşturulur.
    • içindeki @foreach <tbody> deyim, pizza listesi üzerinde yinelenir.
      • özelliği, Model arka planda kod dosyasında oluşturulan nesneye başvurur PizzaListModel .
      • özelliği, PizzaList arka planda kod dosyasında tanımlanan özelliğe başvurur PizzaList .
    • deyiminin @foreach her yinelemesi, pizza verilerini tutmak için bir <tr> öğe oluşturur:
      • Razor söz dizimi, öğelerdeki <td> pizza verilerini görüntülemek için kullanılır. Bu söz dizimi, değişkende pizza depolanan nesnenin Pizza özelliklerini görüntülemek için kullanılır.
      • Price C# dize ilişkilendirmesi kullanılarak biçimlendirilir.
      • Üçüncül ifade, özelliğin değerini IsGlutenFree "✔️" veya boş bir hücre olarak görüntülemek için kullanılır.
      • Pizzayı silmek için bir form oluşturulur.
        • asp-page-handler özniteliği, formun arka planda kod dosyasındaki Delete işleyiciye gönderilmesi gerektiğini belirtir. Bu işleyiciyi sonraki bir ünitede oluşturacaksınız.
        • asp-route-id özniteliği, nesnesinin Id özelliğinin Pizza işleyiciye Delete geçirilmesi gerektiğini gösterir.

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

Pizza Listesi sayfasının çalışma listesini içeren ekran görüntüsü.

Güzel iş! Pizza listesini görüntüleyen bir Razor sayfası oluşturdunuz. Sonraki ünitede etiket yardımcıları ve sayfa işleyicileri hakkında bilgi edineceksiniz.