ASP.NET Core 6/MVC/Razor Sentaksı
Daha önce de söylediğimiz gibi view'lar C# ve HTML kodu içerirler. HTML kodları direkt istemciye gönderilir; C# kodları çalıştırılır, sonucu ilgili yere basılarak istemciye gönderilir. Razor, C# ve HTML kodlarının nasıl birbirine katıştırılacağını belirleyen teknolojidir.
Razor direktifleri
değiştirRazor direktifleri sadece view'larda kullanılabilir ve view'lara özel anlamları ve işlevleri vardır. Aşağıdaki tabloda en önemli direktifler verilmiştir:
Direktif | Açıklama |
---|---|
@model | View'ın modelinin tipini belirtmeye yarar. |
@using | Herhangi bir isim alanını import etmeye yarar. |
@page | İlgili view'ın bir Razor sayfası olduğunu belirtir. |
@section | Bir layout section'ını belirtmeye yarar. |
@addTagHelper | View'da belirli bir tag helper kümesini kullanmamıza izin verir. |
@namespace | View'ın hangi isim alanına ait olduğunu belirtmeye yarar. |
@functions | Çoğunlukla Razor sayfalarında kullanılır ve view sınıfına metot ve özellik eklemeye yarar. |
@attribute | View sınıfına bir attribute ekleme amaçlı kullanılır. |
@implements | View sınıfının belirli bir arayüzü uygulamasını sağlar. |
@inherits | View sınıfının ana sınıfını belirtmeye yarar. |
@inject | View'a bir servisi enjekte etmeye yarar. |
İçerik ifadeleri
değiştirDirektifler soyut belirtimler yapar. Razor'da gerçekten iş yapan ve sayfaya çıktı veren ifadeler içerik ifadeleridir. En önemli içerik ifadeleri aşağıdaki tabloda verilmiştir:
Sıra No | İsim | Açıklama |
---|---|---|
1 | @<ifade> | Belirli bir C# ifadesi çalıştırılır ve sonucu ilgili yere basılır. |
2 | @if | bool döndüren bir ifadenin sonucuna göre ilgili yere basılacak içeriğin belirtilmesi amacıyla kullanılır. |
3 | @switch | Belirli bir değişkenin sahip olacağı değere göre ilgili yere farklı içeriklerden birinin basılması amacıyla kullanılır. |
4 | @foreach | Bir IEnumerable'ın her bir elemanının belirli bir formatta ilgili yere basılmasını sağlar. |
5 | @{ ... } | Bir C# kod bloğu tanımlar. |
6 | @: | Hiçbir HTML kodu ile çevrelenmeyecek ama sayfaya çıktı verilmesi gereken içerikleri belirtmek amacıyla kullanılır. |
7 | @try | Potansiyel olarak çalışma zamanı hatası oluşturabilecek ve yakalanması gereken içeriği belirtmek için kullanılır. |
8 | @await | Sayfaya çıktı verecek işlem asenkron bir işlemse kullanılır. |
Şimdi sırasıyla bu tabloda gördüğümüz içerik ifadelerini son ikisi dışında teker teker işleyeceğiz.
1. Bir C# ifadesinin sayfaya basılması
değiştirRazor'da yapılabilecek en basit işlem basit bir C# ifadesinin çıktısının sayfada ilgili yere basılmasıdır. Örnek:
<tr><th>Name</th><td>@Model.Name</td></tr>
<tr><th>Price</th><td>@Model.Price.ToString("c")</td></tr>
Bu örneğimizde model nesnesinin Name ve Price özellikleri sayfada ilgili yere basılmıştır. Eğer ilgili C# ifadesi boşluk içeriyorsa bütün ifadenin parantez içine alınması gerekmektedir. Örnek:
<tr><th>Tax</th><td>@(Model.Price * 0.2m)</td></tr>
HTML etiketlerinin içerikleri yanında attribute değerleri de C# ifadesi olabilir. Örnek:
<table data-id="@Model.ProductId"></table>
2. Koşullu bir şekilde sayfaya içerik konulması
değiştirÖrnek:
@if (Model.Price > 200) {
<tr><th>Name</th><td>Luxury @Model.Name</td></tr>
} else {
<tr><th>Name</th><td>Basic @Model.Name</td></tr>
}
Bu örneğimizde eğer model nesnesinin fiyatı 200'den fazlaysa farklı bir içerik, 200'den azsa farklı bir içerik sayfaya verilecektir. Sayfaya verilecek içeriğin içinde de @ ile başlamak şartıyla C# ifadesi kullanılabileceğine dikkat edin. İstenirse elseif şeklinde yeni koşullar da eklenebilir. Örnek:
@if (Model.Price > 200) {
<tr><th>Name</th><td>Luxury @Model.Name</td></tr>
} elseif(Model.Price > 100) {
<tr><th>Name</th><td>Standart @Model.Name</td></tr>
} else {
<tr><th>Name</th><td>Basic @Model.Name</td></tr>
}
C# programlama dilinde bir if, else if veya else ifadesi tek satır C# kodu içeriyorsa bu içeriğin kümeli parantezler içine alınmasına gerek yoktur. Ancak Razor'da if, elseif ve else ifadelerinin karşılanması durumunda sayfaya verilecek içeriğin belirtilmesi için mutlaka küme parantezleri kullanılmalıdır. Razor'da C#'ta olduğu gibi elseif ve else ifadeleri opsiyoneldir.
3. Belirli bir değişkenin değerine göre sayfaya içerik konulması
değiştirC#'ta olduğu gibi daha karmaşık koşullu yapularda switch ifadesi kullanılabilir. Örnek:
@switch (Model.Name) {
case "Kayak":
<tr><th>Name</th><td>Small Boat</td></tr>
break;
case "Lifejacket":
<tr><th>Name</th><td>Flotation Aid</td></tr>
break;
default:
<tr><th>Name</th><td>@Model.Name</td></tr>
break;
}
4. Belirli bir ardılın elemanlarının sayfaya yazdırılması
değiştirC#'ta IEnumerable arayüzünü uygulamış herhangi bir nesne üzerinde foreach döngüsüyle dönülebilir. Aynısı Razor için de geçerlidir ve bir ardılın her bir elemanını sayfaya belirli bir formatta yazdırmaya yarar. Örnek:
<table>
@foreach (Product p in Model) {
<tr>
<td>@p.Name</td><td>@p.Price</td>
</tr>
}
</table>
Bu örneğimizde modelin bir Product ardılı olduğu varsayılmıştır. Örneğimiz Product ardılındaki her bir Product'ın Name ve Price özelliklerini tabloda yeni bir satırda olacak şekilde ekrana basmaktadır.
5. C# kod blokları
değiştirBazen view tarafında basit bir C# ifadesinin sayfaya basılması dışında şeyler de yapmak isteyebiliriz. Örneğin değişken tanımlamaları, değişkenlere değer atanması, vs. sadece kod bloklarında yapılabilir. Daha genel bir ifadeyle sayfaya çıktı vermeyecek, mantıksal işlem yapacak bütün C# kodları için kod bloğu açmak zorundayız. Örnek:
@{
decimal average = Model.Average(p => p.Price);
decimal count = Model.Count();
}
<p>There are @count products in database, with an average price of @average</p>
Bu kodumuz model olarak Product ardılı alındığını varsaymaktadır. C# kod bloğunda average ve count olmak üzere iki değişken tanımlanmış, bu değişkenlerin değerleri daha sonraki HTML kodunda kullanılmıştır.
6. Sayfaya direkt çıktı verme
değiştirBazen C# kodu içinde belirli bir yere salt bir metin çıktısı vermek isteyebiliriz. Çoğunlukla verilecek çıktı HTML etiketleri arasında olduğu için şimdi göreceğimiz ifadeyi kullanmaya gerek kalmaz. Ancak bazen bu ifadeyi kullanmak zorunda kalabiliriz. Örneğin daha önce yazdığımız şu kodu göz önüne alalım:
@switch (Model.Name) {
case "Kayak":
<tr><th>Name</th><td>Small Boat</td></tr>
break;
case "Lifejacket":
<tr><th>Name</th><td>Flotation Aid</td></tr>
break;
default:
<tr><th>Name</th><td>@Model.Name</td></tr>
break;
}
Burada tek değişen <td>'lerin içindeki ifade olmasına rağmen biz aynı <tr>, <th> ve <td>'leri tekrar tekrar yazdık. En önemlisi Name sütununu her seferinde tekrar yazdık. Bu ideal bir durum değildir, böyle bir durumda koşulu sadece verinin değiştiği yere taşımak daha mantıklıdır. Şimdi kodumuzu şöyle değiştirelim:
<tr><th>Name</th><td>
@switch (Model.Name) {
case "Kayak":
@:Small Boat
break;
case "Lifejacket":
@:Flotation Aid
break;
default:
@Model.Name
break;
}
</td>
Diğer bir deyişle @: ifadesi manuel olarak C# modundan HTML moduna geçmeye yarar.