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

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 .
   

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.

• 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.cs PageModel 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.cs PageModel 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'a Eşle sayfası
  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'a Eşle sayfası
  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 Title ViewData öğ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 Title ViewData öğ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 TotalDays timeInBusiness ö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.

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.