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

  • 10 dakika

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

Pizza Listesi sayfası oluşturma

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

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

  2. Yeni terminal penceresinde 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, <title> sayfanın öğesini ayarlar.

  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ışan dotnet watch terminale dönün ve uygulamayı yeniden yüklemek ve yeni dosyaları algılamak için Ctrl+R tuşlarına basın.

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

Bu, sayfayı test etmek için iyi bir zaman olabilir, ancak sayfaya gezinti menüsünde henüz bağlanmadığı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>. Aşağıdaki kodu listenin sonuna, Gizlilik bağlantısını içeren öğesinden <li> sonra 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ının bağlantısını ekler.

  3. Dosyayı kaydedin. Uygulamanın yer alan tarayıcı sekmesi, değişiklikleri görüntülemek için 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.

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

Pizza Listesi sayfası, pizza listesini almak için nesnesine bağlıdır PizzaService . Nesneyi sayfaya sağlamak PizzaService için bağımlılık eklemeyi 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ını 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ı değiştirerek PageModel nesnesinden PizzaService pizza listesini alıp bir özellikte depolayalım.

  1. Pages/PizzaList.cshtml.cs dosyasını 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();
    }
}

    Yukarıdaki kodda:

    • Adlı _service bir özel salt okunur PizzaService oluşturulur. Bu değişken bir nesneye PizzaService başvuru tutar.
      • readonly anahtar sözcüğü, değişkenin değerinin _service oluşturucuda ayarlandıktan sonra değiştirilebileceğini gösterir.
    • PizzaList Pizza 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, sayfada 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>

    Yukarıdaki kodda:

    • Pizza listesini görüntülemek için bir <table> öğe oluşturulur.
    • <thead> Tablo üst bilgisini tutmak için bir öğe oluşturulur.
    • içindeki @foreach<tbody> ifade, pizza listesinin üzerinde yinelenir.
      • Model özelliği, arka planda kod dosyasında oluşturulan nesneye başvururPizzaListModel.
      • özelliği, PizzaList arka planda kod dosyasında tanımlanan özelliğine 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.
      • Özelliğin değerini IsGlutenFree "✔️" veya boş bir hücre olarak görüntülemek için üçüncül ifade kullanılır.
      • Pizzayı silmek için bir form oluşturulur.
        • asp-page-handler özniteliği, formun arkadaki 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 belirtir.

  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 listesinin 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.