01. Razor Pages

Razor Pages, sayfa tabanlı web uygulamalarını çok daha kolay ve üretken bir şekilde kodlamanızı sağlayan yeni bir yapı sunar. ASP.Net’te olduğu gibi ASP.Net Core çatısında da bulunur. Bu bölüm, Razor Pages tanıtımı ve Visual Studio Code ile kullanılmasını kapsar.

Razor bir programlama dili değildir. C# kodlarımızı gömmemize olanak sağlayan bir işaretleme dilidir. Sunucu tarafında işlenir ve HTML çıktı istemci tarafına (tarayıcıya) gönderilir. Razor sözdizimi PHP ve ASP’de olduğu gibi sade ve anlaşılırdır. Örneğin,

Razor PHP ASP

Razor @ işareti ile C# kodlarına geçmemizi sağlıyor. HTML ile iç içe kullanım imkanı sunuyor. Benzer şekilde PHP ve ASP ise sadece kendi etiketleri sırasıyla <?php ?> ve <% %> etiketleri arasına kod yazmaya olanak sağlar. Razor biraz daha sade bir yapıya sahiptir. Razor kodları örnekte olduğu gibi tek satırlık kod ise sadece @ işaretinden sonra eğer birden fazla satıra sahipse @{…} arasına yazılır. Değişkenler var anahtar kelimesi ile deklare edilir. C# dosyaları .cshtml uzantılısına sahiptir. Bu kadar ön bilgiden sonra öncelikle kod yazma ortamını oluşturalım.

01.1. Proje yaratma

Öncelikle boş bir dizin (çalışma klasörümüz) oluşturun ve Visual Studio Code File -> Open Folder bölümünden bu dizini seçin. Terminal sekmesinden yeni bir terminal açın. DOS bilenlerin aşina olduğu bir ekran, aslında sadece bir command ekranıdır.

Bu işlemden sonra klasörlerimiz ve başlangıç dosyalarımız oluşturuldu. Hatta birkaç tane örnek sayfa yüklemesi yapıldı. Aslında webapp template’ini yükler. Artık Razor kodu yazmaya hazırız. Bazı Visual Studio Code versiyonlarında webapp yüklü olmayabilir. Kullanabileceğiniz diğer template’leri “dotnet new” komutu ile görüntüleyebilirsiniz. Visual Studio versiyonlarında tıklama ile yapılan bu işlem burada şu anlık komutlarla, bence böyle olması da daha iyi 🙂

01.2. Projeyi çalıştırma

Debug->Start Debugging yapınca .Net Core Launch (Web) ise projemiz geçerli tarayıcımız üzerinde çalışmaya başlar. Visual Studio Code Kestrel adında bir yerel sunucu üzerinden bu çalıştırma işlemini yapar. Proje diğer portlarla çakışmasın diye 5001 portta çalışır. Her ne kadar otomatik çalışsa da http://localhost:5001 yazarak farklı tarayıcılar üzerinden projenizi test edebilme imkanınız vardır.

Uygulama çalıştıktan sonra tekrar debug yapmadan web sayfasında değişiklik yapıp, dosyayı kaydettiğimizde, tarayıcı refresh yapmak yeterlidir. Bir çok geliştirici bir kez çalıştırdıktan sonra debug işlemini sonlandırmadan sadece sayfalarını refresh yaparak değişikliklerini görürler.

01.3. Proje dosyaları ve klasörleri

Bu dosyalara ve klasörlerin önemlilerine kısaca bakalım.

wwwroot Static dosyaları içeren klasördür: resim, css, javascript vs. bu klasör içinde toplanır.
Pages Razor sayfalarının olduğu klasördür.
appsettings.json Ayarlar
Program.cs Bir ASP.Net Core uygulamasının ana dosyasıdır.
startup.cs Hizmetleri ve istek hattının yapılandırma dosyasıdır. Razor Pages kullanılabilmesi için burada başlatılır.

01.4. Merhaba Razor Pages

Pages klasörününe 01.cshtml ekleyelim ve aşağıdaki satırları yazalım.

Sunucu tarafı
01.cshtml

İstemci tarafı
https://localhost:5001/01

01.cshtml bir Razor Pages sayfasıdır. Razor bir sayfada @page etiketi tanımı ile başlanmalıdır. Tarayıcı dosya isminin sadece isim bölümü görülür.  Bir anlamda routing dediğimiz bir sayfa isimlendirme olayı vardır.

Razor sayfaları bir model dosyasından veri alabilir. Model kelimesi MVC bölümünde açıklanacaktır. Bu model dosyası dosya ismi sonuna cs kelimesi gelir. Örneğin,

Sunucu tarafı
02.cshtml

02.cshtml.cs

İstemci tarafı
https://localhost:5001/02