01. Razor Pages - Erdinç Uzun

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

<ul>
@for (int i = 0; i < 10; i++) {
<li>@i</li>
}
</ul>

<ul>

@for (int i = 0; i < 10; i++) {

}

</ul>

<ul>
<?php 
for ($i = 0; $i < 10; $i++) {
echo("<li>$i</li>");
} 
?>
</ul>

<ul>

<?php

for ($i = 0; $i < 10; $i++) {

echo("<li>$i</li>");

}

</ul>

<ul>
<%for i = 0 to 10%>
<li><%=i%></li>
<%next%>
</ul>

<ul>

<%for i = 0 to 10%>

<%next%>

</ul>

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.

C:\...\ASP.NET\RazorPages>dotnet new webapp

1	C:\...\ASP.NET\RazorPages>dotnet new webapp

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 🙂

Not: Son versiyonlarda https’li bağlantı istiyor. Bu sebepten dolayı, sanal bir sertifika oluşturmak gerekiyor. Bunun için terminal ekranında: dotnet dev-certs https veya dotnet dev-certs https –trust ifadelerini çalıştırın.

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

@page

<h1>Merhaba Razor Pages!</h1>
<h2>Bu saat sunucu tarafından elde edilmiştir @DateTime.Now</h2>

@page

<h1>Merhaba Razor Pages!</h1>

<h2>Bu saat sunucu tarafından elde edilmiştir @DateTime.Now</h2>

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

<h1>Merhaba Razor Pages!</h1>
<h2>Bu saat sunucu tarafından elde edilmiştir 8.12.2018 18:39:28</h2>

1 2	<h1>Merhaba Razor Pages!</h1> <h2>Bu saat sunucu tarafından elde edilmiştir 8.12.2018 18:39:28</h2>

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

@page
@using RazorPagesIntro.Pages
@model OrnekModel

<h2>Ayri bir dosyadan gelen veri: </h2>
<p>
    @Model.Message
</p>

@page

@using RazorPagesIntro.Pages

@model OrnekModel

<h2>Ayri bir dosyadan gelen veri: </h2>

<p>

@Model.Message

</p>

02.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using System;

namespace RazorPagesIntro.Pages
{
    public class OrnekModel : PageModel
    {
        public string Message { get; private set; } = "C# bir property : PageModel";

        public void OnGet()
        {
            Message += $": Sunucu saati { DateTime.Now }";
        }
    }
}

using Microsoft.AspNetCore.Mvc.RazorPages;

using System;

namespace RazorPagesIntro.Pages

{

public class OrnekModel : PageModel

{

public string Message { get; private set; } = "C# bir property : PageModel";

public void OnGet()

{

Message += $": Sunucu saati { DateTime.Now }";

}

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

<h2>Ayri bir dosyadan gelen veri: </h2>
<p>
    C# bir property : PageModel: Sunucu saati 8.12.2018 18:57:46
</p>

<h2>Ayri bir dosyadan gelen veri: </h2>

<p>

C# bir property : PageModel: Sunucu saati 8.12.2018 18:57:46

</p>

01.1. Proje yaratma

01.2. Projeyi çalıştırma

01.3. Proje dosyaları ve klasörleri

01.4. Merhaba Razor Pages

Sunucu tarafı 01.cshtml

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

Sunucu tarafı 02.cshtml

02.cshtml.cs

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

Sunucu tarafı
01.cshtml

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

Sunucu tarafı
02.cshtml

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