Alıştırma - Projeyi özelleştirme

  • 12 dakika

Takımınız pizza envanteri yönetim uygulaması için çalışmayı böldü. Ekip arkadaşlarınız sizin için ASP.NET Core web uygulamasını oluşturdular ve pizza verilerini okumak ve veritabanına yazmak için zaten bir hizmet oluşturdular. Pizza listesi sayfasında çalışmak üzere görevlendirildiniz. Bu sayfada pizzaların listesi görüntülenir ve veritabanına yeni pizzalar eklemenize olanak verilir. Projenin nasıl organize olduğunu anlamak için bir tura katılarak başlayacağız.

Not

Bu modülde yerel geliştirme için .NET CLI (Komut Satırı Arabirimi) ve Visual Studio Code kullanılır. Bu modülü tamamladıktan sonra Visual Studio (Windows) kullanarak kavramları veya Visual Studio Code (Windows, Linux ve macOS) kullanarak geliştirmeye devam edebilirsiniz.

Proje dosyalarını alma

GitHub Codespaces kullanıyorsanız depoyu tarayıcıda açın, Kod'u seçin ve dalda main yeni bir kod alanı oluşturun.

GitHub Codespaces kullanmıyorsanız proje dosyalarını alın ve aşağıdaki adımlarla Visual Studio Code'da açın:

  1. Bir komut kabuğu açın ve komut satırını kullanarak GitHub'dan projeyi kopyalayın:

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Dizine mslearn-create-razor-pages-aspnet-core gidin ve projeyi Visual Studio Code'da açın:

    cd mslearn-create-razor-pages-aspnet-core
code .

İpucu

Uyumlu bir kapsayıcı çalışma zamanı yüklüyse, depoyu önceden yüklenmiş araçlarla birlikte bir kapsayıcıda açmak için Dev Kapsayıcıları uzantısını kullanabilirsiniz.

Ekip arkadaşlarınızın çalışmalarını gözden geçirin

ContosoPizza klasöründeki mevcut kod hakkında bilgi edinmek için biraz zaman ayıralım. Proje, komutu kullanılarak dotnet new webapp oluşturulan bir ASP.NET Core web uygulamasıdır. Ekip arkadaşlarınızın yaptığı değişiklikler aşağıda açıklanmıştır.

İpucu

Bu değişiklikleri gözden geçirmek için çok fazla zaman harcamayın. Ekip arkadaşlarınız veritabanını ve pizzaları okumak ve veritabanına yazmak için hizmeti oluşturmak için zaten çalışmalar yaptı, ancak kullanıcı arabiriminde herhangi bir değişiklik yapmadılar. Sonraki ünitede hizmet kullanan bir kullanıcı arabirimi oluşturacaksınız.

  • Projeye bir Models klasörü eklendi.
    • Model klasörü pizzayı temsil eden bir Pizza sınıf içerir.
  • Projeye bir Veri klasörü eklendi.
    • veri klasörü, veritabanı bağlamını temsil eden bir PizzaContext sınıf içerir. Entity Framework Core'daki sınıfından DbContext devralınır. Entity Framework Core, veritabanlarıyla çalışmayı kolaylaştıran nesne ilişkisel eşleyicidir (ORM).
  • Projeye bir Hizmetler klasörü eklendi.
    • Services klasörü, pizzaları listelemek ve eklemek için yöntemleri kullanıma sunan bir PizzaService sınıf içerir.
    • PizzaService sınıfı, veritabanına pizza okumak ve yazmak için sınıfını kullanırPizzaContext.
    • sınıfı, Program.cs 'de bağımlılık ekleme için kaydedilir (10. satır).

Entity Framework Core da birkaç şey oluşturdu:

  • Migrations klasörü oluşturuldu.
    • Migrations klasörü, veritabanı şemasını oluşturmak için kod içerir.
  • SQLite veritabanı dosyası ContosoPizza.db oluşturuldu.
    • SQLite uzantısı yüklüyse (veya GitHub Codespaces kullanıyorsanız), dosyaya sağ tıklayıp Veritabanını Aç'ı seçerek veritabanını görüntüleyebilirsiniz. Veritabanı şeması, Gezgin bölmesinin SQLite Gezgini sekmesinde gösterilir.

Razor Pages proje yapısını gözden geçirme

Projedeki diğer her şey, projenin oluşturulduğundan değişmemiştir. Aşağıdaki tabloda, komutu tarafından dotnet new webapp oluşturulan proje yapısı açıklanmaktadır.

Veri Akışı Adı Açıklama
Sayfa/ Razor Pages ve destekleyici dosyaları içerir. Her Razor sayfasının bir .cshtml dosyası ve bir .cshtml.csPageModel sınıf dosyası vardır.
Wwwroot/ HTML, JavaScript ve CSS gibi statik varlık dosyalarını içerir.
ContosoPizza.csproj Bağımlılıklar gibi proje yapılandırma meta verilerini içerir.
Program.cs Uygulamanın giriş noktası olarak görev alır ve yönlendirme gibi uygulama davranışını yapılandırılır.

Diğer dikkat çekici gözlemler:

  • Razor sayfa dosyaları ve bunların eşleştirilmiş PageModel sınıf dosyası

    Razor sayfaları Sayfalar dizininde depolanır. Yukarıda belirtildiği gibi, her Razor sayfasının bir .cshtml dosyası ve bir .cshtml.csPageModel sınıf dosyası vardır. PageModel sınıfı Razor sayfasının mantığının ve sunumunun ayrılmasına izin verir, istekler için sayfa işleyicilerini tanımlar ve razor sayfası kapsamındaki veri özelliklerini ve mantığı kapsüller.

  • Sayfalar dizin yapısı ve yönlendirme istekleri

    Razor Pages, yönlendirme istekleri için kural olarak Pages dizin yapısını kullanır. Aşağıdaki tabloda URL'lerin dosya adlarıyla nasıl eş olduğu gösterilmektedir:

    URL Razor sayfasına Haritalar
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Sayfalar dizinindeki alt klasörler Razor sayfalarını düzenlemek için kullanılır. Örneğin, Pages /Products dizini varsa URL'ler bu yapıyı yansıtır:

    URL Razor sayfasına Haritalar
    www.domain.com/Products Sayfalar/Ürünler/Index.cshtml
    www.domain.com/Products/Index Sayfalar/Ürünler/Index.cshtml
    www.domain.com/Products/Create Sayfalar/Ürünler/Create.cshtml

  • Düzen ve diğer paylaşılan dosyalar

    Birden çok sayfada paylaşılan birkaç dosya vardır. Bu dosyalar yaygın düzen öğelerini ve sayfa içeri aktarmalarını belirler. Aşağıdaki tabloda her dosyanın amacı açıklanmaktadır.

    Dosya Açıklama
    _ViewImports.cshtml Birden çok sayfada kullanılan ad alanlarını ve sınıfları içeri aktarır.
    _ViewStart.cshtml Tüm Razor sayfaları için varsayılan düzeni belirtir.
    Pages/Shared/_Layout.cshtml Bu, dosya tarafından belirtilen düzendir _ViewStart.cshtml . Birden çok sayfada ortak düzen öğeleri uygular.
    Pages/Shared/_ValidationScriptsPartial.cshtml Tüm sayfalara doğrulama işlevi sağlar.

Projeyi ilk kez çalıştırma

Projeyi çalıştıralım, böylece projeyi çalışır durumda görebiliriz.

  1. Gezgin'de ContosoPizza klasörüne sağ tıklayın ve Tümleşik Terminalde Aç'ı seçin. Bu işlem, proje klasörü bağlamında bir terminal penceresi açar.

  2. Terminal penceresinde aşağıdaki komutu girin:

    dotnet watch

    Şu komut:

    • Projeyi oluşturur.
    • Uygulamayı başlatır.
    • Dosya değişikliklerini izler ve bir değişiklik algıladığında uygulamayı yeniden başlatır.

  3. IDE, uygulamayı bir tarayıcıda açmanızı ister. Tarayıcıda Aç’ı seçin.

    İpucu

    Terminal penceresinde URL'yi bularak da uygulamayı açabilirsiniz. Ctrl tuşunu basılı tutarak URL'ye tıklayarak tarayıcıda açın.

  4. İşlenen giriş sayfasını IDE'de Pages/Index.cshtml ile karşılaştırın:

    • Dosyadaki HTML, Razor Söz Dizimi ve C# kodunun birleşimini gözlemleyin.
      • Razor Söz Dizimi karakterlerle @ gösterilir.
      • C# kodu bloklar içine @{ } alınır. Dosyanın en üstündeki yönergeleri not alın:
      • yönergesi @page , bu dosyanın bir Razor sayfası olduğunu belirtir.
      • yönergesi@model, sayfanın model türünü belirtir (bu örnekte, IndexModelPages/Index.cshtml.cs içinde tanımlanmıştır).
    • C# kod bloğunu gözden geçirin.
      • Kod, sözlük içindeki TitleViewData öğenin değerini "Giriş sayfası" olarak ayarlar.
      • ViewData Sözlük, Razor sayfası ile IndexModel sınıfı arasında veri geçirmek için kullanılır.
      • Çalışma zamanında değeri, Title sayfanın <title> öğesini ayarlamak için kullanılır.

Uygulamayı terminal penceresinde çalışır durumda bırakın. Bunu gelecek ünitelerde kullanacağız. Tarayıcı sekmesini çalışan Contoso Pizza uygulamasıyla da bırakın. Uygulamada değişiklik yaparsınız ve tarayıcı değişiklikleri görüntülemek için otomatik olarak yenilenir.

Giriş sayfasını özelleştirme

Pizza uygulamasıyla daha ilgili hale getirmek için giriş sayfasında birkaç değişiklik yapalım.

  1. Pages/Index.cshtml dosyasında, C# kod bloğundaki kodu aşağıdaki kodla değiştirin:

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    Yukarıdaki kod:

    • Sözlük içindeki TitleViewData öğenin değerini "Pizza Severlerin Evi" olarak ayarlar.
    • İşletmenin açılmasından bu yana geçen süreyi hesaplar.

  2. HTML'yi aşağıdaki gibi değiştirin:

    • <h1> öğesini aşağıdaki kodla değiştirin:

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • <p> öğesini aşağıdaki kodla değiştirin:

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    Yukarıdaki kod:

    • Başlığı "Contoso Pizza'ya Hoş Geldiniz" olarak değiştirir.
    • İşletme açıldıktan sonra geçen gün sayısını görüntüler.
      • Karakter @ , HTML'den Razor Söz Dizimine geçmek için kullanılır.
      • Convert.ToInt32 yöntemi, değişkenin TotalDaystimeInBusiness özelliğini tamsayıya dönüştürmek için kullanılır.
      • sınıfı, ContosoPizza.csproj dosyasındaki <ImplicitUsings> öğesi tarafından otomatik olarak içeri aktarılan ad alanının bir parçasıdırSystem.Convert

  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.

Önemli

Dosyanızı her kaydettiğinizde terminal penceresini dotnet watch yakından izleyin. Bazen kodunuz kaba bir düzenleme olarak adlandıran içeriği içerebilir. Bu, değiştirdiğiniz kodun uygulamayı yeniden başlatmadan yeniden derlenebileceği anlamına gelir. Uygulamayı yeniden başlatmanız istenirse (evet) veya a (her zaman) tuşlarına basın y . Terminal penceresinde Ctrl+C tuşlarına iki kez basarak uygulamayı istediğiniz zaman durdurabilir ve sonra yeniden çalıştırarak dotnet watch uygulamayı yeniden başlatabilirsiniz.

Razor sayfasında ilk değişikliklerinizi yaptınız! Sonraki ünitede, pizza listesini görüntülemek için uygulamaya yeni bir sayfa ekleyeceksiniz.