Razor View Engine

Razor View Engine, ASPNET Web Pages ile birlikte sunulan bir şablonlama motorudur Basit, sezgisel ve kullanımı kolay bir sayfa yapısı sağlar Razor View Engine, sıkı çalışma, yüksek performans ve web uygulamaları için kolay bakım gibi özellikleriyle dikkat çekmektedir Detaylı bilgi almak için ziyaret edin

Razor, modern web uygulamalarını oluşturmak için kullanılan ASP.NET MVC'nin desteklediği bir görünüm motorudur. Razor, HTML kodunun içinde C# kodu yazmamıza olanak tanır. Bu da web sitelerinde dinamik ve etkileşimli içerik oluşturmamızı sağlar. Razor view engine, web uygulama geliştiricilerine hızlı ve kolay bir yöntem sunar, çünkü web sayfalarındaki HTML kodlarını ve C# kodlarını aynı dosya içeresinde bir arada tutmamıza olanak tanır.

Bu makalede Razor'un nasıl kullanıldığına odaklanacağız. Yeni başlayanlar için, Razor syntax'ini anlamak çok önemlidir. Yine de, Razor, kod yazmamızı ve web sitelerimizi hızlı bir şekilde yapılandırmamızı sağlar. Razor'sız web sitelerimizi oluşturmak için elimizde birçok farklı araç varken, Razor, ASP.NET MVC'nin bir parçası olduğundan, dilimizi ve kodumuzu kullanmamızı kolaylaştırır. Bunun yanında Razor, web sitelerinin performansını da artırır ve web sitelerinin SEO'sunu iyileştirmemize de yardımcı olur. Sonuç olarak, Razor, web uygulama geliştiricilerinin hayatını daha kolay ve pratik hale getirmek için tasarlanmıştır.

Razor Syntax

Razor Syntax, HTML ve C# kodlarını aynı dosya içinde birleştirmemize izin vererek, ASP.NET MVC uygulamalarının görünüm işlemlerini daha kolay hale getirir. Bu sayede, web sayfalarının tasarımını ve C# kodlarını kolaylıkla birleştirebiliriz. Razor Syntax’ın bir diğer avantajı ise kolay anlaşılabilir olmasıdır.

Bir HTML tag’i oluşturmak için, Razor Syntax içinde “@” sembolü ile başlayıp, ardından açılış ve kapanış tag’lerini yazmak yeterlidir. C# kod parçalarını Razor Syntax içinde “@{}” blokları arasında yazarak, C# kodlarını kolaylıkla kullanabiliriz. Ayrıca değişkenlere ulaşmak için ise “@” sembolü kullanırız.

HTML Kodu	Razor Syntax Kodu
<p>Merhaba Dünya</p>	<p>Merhaba @("Dünya")</p>
<ul><li>Elma</li><li>Armut</li></ul>	<ul>@{ foreach (var meyve in Model.Meyveler) { <li>@meyve</li> } } </ul>

Yukarıdaki örnekte, Razor Syntax kodu, HTML kodu ile aynı sonucu vermektedir. İkinci örnekteki kod bloğu, Razor Syntax ile birlikte bir döngü içinde kullanılmaktadır. Bu örnekte, Model.Meyveler koleksiyonundaki veriler, Razor Syntax kodu içinde yer alan döngü ile ul listesi içinde gösterilmektedir.

Görünüm Dosyaları

Razor görünüm motoru, ASP.NET MVC ile birlikte gelen bir yapısıdır. Bu yapı içinde kullanabileceğimiz görünüm dosyaları ise .cshtml uzantılıdır ve HTML markups ile C# kodunu içerir. Razor'un en büyük avantajlarından biri, HTML kodlarını doğrudan C# koduyla birleştirme imkanı sağlamasıdır. Bu sayede, web uygulamalarımızın geliştirilmesi sürecinde çok daha esnek olabilmekteyiz.

Görünüm dosyaları, web sayfalarımızın tasarımını ve sunumunu düzenlediğimiz, HTML kodlarının olduğu dosyalardır. Razor yapısı sayesinde, bu dosyalarımız içinde C# kodlarıyla etkileşim sağlayabiliriz. Bu sayede, web uygulamalarımızı daha da çekici hale getirebiliriz. Aynı zamanda, Razor yapısı sayesinde kod yazma sürecimiz de daha da hızlı ve kolay hale gelmektedir.

Görünüm dosyalarımızı hazırlarken Razor syntax'ını kullanabilmekteyiz. Bu syntax'ı kullanarak, HTML kodlarını C# dilinde yazarak, daha dinamik ve interaktif web uygulamaları oluşturabiliriz. Bu sayede, kullanıcılara daha çekici ve etkileşimli web sayfaları sunabiliriz.

Layout Dosyaları

Razor, ASP.NET MVC uygulamalarında layout dosyaları aracılığıyla bir web sitesindeki tüm sayfaların ortak alanlarını kolayca yapılandırmamızı sağlar. Bu sayede tekrar eden kodların yazılması önlenir ve kod tekrarlaması en aza indirilir.

Layout dosyalarındaki alanlar, görünüm dosyalarında @RenderSection() ile belirlenir ve view dosyasında bu alanlara içerik ekleyerek layout dosyasındaki yapıları doldurabiliriz. Örneğin, bir web sitesinde sayfa başlıkları, menüler ve altbilgi gibi unsurlar tüm sayfalarda ortak olabilir. Bu durumda, layout dosyası içerisinde bu alanlar oluşturulur ve view dosyasındaki içerik bu alanlar ile eşleştirilir.

Örnek:

Layout Dosyası

<html>  <head>    <title>@ViewBag.Title</title>  </head>  <body>    <div id="header">      <h1>Web Sitesi Başlığı</h1>      @RenderSection("header", required: false)    </div>    <div id="content">      @RenderBody()    </div>    <div id="footer">      <p>Web Sitesi Altbilgisi</p>      @RenderSection("footer", required: false)    </div>  </body></html>

<!--View Dosyası-->@{  ViewBag.Title = "Sayfa Başlığı";  Layout = "~/Views/Shared/_Layout.cshtml";}@section header {  <p>Sayfa Başlığı</p>}@section footer {  <p>Web Sitesi Adı - © Tarih</p>}<p>Sayfa İçeriği</p>

Görüldüğü gibi, layout dosyasında görünüm dosyalarında paylaşılacak olan alanlar tanımlanır. View dosyasında ise Layout alanı ile layout dosyası belirtilir ve topluluk projelerinde paylaşılması kolaylaşır.

Sections

Sections, layout dosyasında yer tutucu olarak kullanılır ve view dosyalarından içerik ekleyerek layout dosyasındaki yer tutucularını doldurabiliriz. Bu, web sitelerindeki ortak alanları kapsayan header, footer gibi alanlar için oldukça kullanışlıdır. Layout dosyasında belirtilen sections isimleri, view dosyasında @section anahtar sözcüğü ile belirtilebilir. Bu şekilde, view dosyasından, belirli bir section'ı dolduracak içerik sağlanabilir. Bu sayede, her sayfa için ayrı ayrı yer tutucu oluşturmaktan kurtuluruz ve bir kez layout dosyası üzerinde değişiklik yaparak tüm sayfalarda görünen alanları güncelleyebiliriz.Aşağıdaki örnek, _Layout.cshtml dosyasınıın içindeki header bölümünde "My Website" yazısını değiştirir:``` @ViewBag.Title - My Website

@RenderBody()

```View dosyasında ise, aşağıdaki örnekte Header section'ı dolduran içerik sağlanır:```@{ ViewBag.Title = "Home Page";}@section Header{ }

My website content goes here.

```Bu şekilde, her sayfada ayrı ayrı header ve footer oluşturmak yerine, layout dosyasında belirlenen yer tutucuları istediğimiz içerik ile doldurabiliriz. Bu da, kod tekrarını azaltır ve web sitesinin bakımını kolaylaştırır.

Partial View Dosyaları

Kısmi görünüm dosyaları, web uygulamalarında tekrarlanan görünüm parçalarını farklı sayfalarda yeniden kullanmamızı sağlayan bir yapıdır. Örneğin, sayfalarımızda birçok yerde kullandığımız menü, footer, navigasyonlar, yan etiketler vb. yapıları bir kere oluşturarak, ihtiyacımız olduğunda farklı sayfalara çağırabiliriz. Bu sayede uygulamanın bakımı daha kolay ve efektif hale gelir.

Partial view dosyaları, layout dosyaları ve view dosyaları gibi .cshtml uzantılıdır ve Razor kullanarak HTML markups ve C# kodunu birleştirir. Farklı view dosyalarına çağırılmak üzere oluşturulan partial view dosyaları, controller action methodlarından özel parametrelerle çağırılabilirler. Bu sayede, farklı sayfalarda aynı dizaynı koruyarak, yeniden kullanılabilir kod bloklarına sahip olabiliriz.

Partial view dosyaları oluşturulurken, çağrıldığı sayfaya göre bir controller action metodunda ViewData sözcüğü aracılığıyla veriler gönderilir. Bu şekilde, partial view dosyasındaki değişkenler, ViewData objelerine verilen değerlere göre dinamik olabilir ve görünüm dosyası çağrıldığı sayfaya özel özelliklerle cevap verebilir.

Aşağıdaki örnekte, bir gallery partial view dosyasının nasıl oluşturulduğunu gösteriyoruz:

Gallery
Item 1 Item 2 Item 3

Yukarıdaki örnekte, galeri view dosyasındaki olan galeri listesini partial view dosyasına taşımış olduk. Bu şekilde, farklı sayfalarda galeri listesini çağırmak için partial view dosyasını kullanabiliriz. Partial view dosyaları, oldukça pratik ve kullanışlı bir yapı olup, web uygulamalarında sıklıkla kullanılmaktadır.

HTML Yardımcı Sınıfları

HTML Yardımcı Sınıfları, ASP.NET MVC uygulamalarındaki önemli elemanlardan biridir. HTML Yardımcı Sınıfları, ASP.NET MVC uygulamalarında yaygın olarak kullanılmaktadır. Bu sınıflar, web uygulamalarındaki web sayfalarının tasarımında oldukça etkilidir.

HTML Yardımcı Sınıfları, önceden tanımlanmış C# fonksiyonlarıdır. Bu fonksiyonlar, HTML sayfalarında kullanılan çoğu işlevi yerine getirmek için oluşturulmuştur. Örneğin, HTML Yardımcı Sınıfları, web sayfalarında formları tanımlamak, tarihlerdeki farklı formatları göstermek, belirli sayfalarda belirli bölümleri göstermek için kullanılır.

HTML Yardımcı Sınıfları, web uygulamalarının daha yönetilebilir olmasını sağlar. Bu sınıflar sayesinde kodlama işlemleri çok daha rahat bir şekilde gerçekleştirilebilir. Aynı zamanda, kodlama işlemlerinin hızlı bir şekilde yapılmasına olanak tanırlar. HTML Yardımcı Sınıfları genellikle ASP.NET MVC uygulamalarında çok fazla kullanılmaktadır ve web uygulamalarının geliştirilmesinde oldukça önemli bir rol oynamaktadır.

HTML Yardımcı Sınıfları, güncel bir web uygulamasının vazgeçilmez bir parçasıdır ve geliştiriciler için birçok fayda sağlar. Bu sınıflar, birçok işlevsellik sağladığı için kullanımı oldukça yaygındır. Özellikle web tasarımı ve uygulama geliştirme açısından büyük bir avantaj sağlarlar.

Razor Örnekleri

Razor, ASP.NET MVC için kullanılan bir görünüm motorudur ve sözdizimi HTML ile C# kodlarının bir arada kullanılmasını kolaylaştırır. Peki Razor kullanılarak nasıl örnekler oluşturulabilir?

Örneğin, Razor ile döngüler kullanarak bir veri listesi oluşturmak oldukça kolaydır. İlk olarak, C# kodu içinde bir liste oluşturulur ve sonrasında bu liste foreach döngüsü içinde döndürülür. HTML kodu içinde ise, Razor'un kullanımı sayesinde C# kodu listesindeki veriler kolayca çağrılabilir.

Bir diğer örnek ise Razor ile şartlı görünümler oluşturmaktır. Şartlı görünümler, veriye göre belirli HTML elemanlarının veya öğelerinin görünüp görünmemesini sağlar. Bunun için if-else koşullarını Razor içine yazarak kolayca kontrol edebiliriz.

Son olarak, Razor'un form işleme işlemini kolaylaştıran HTML yardımcı sınıfları kullanarak formları kolayca hazırlayabiliriz. Raporlama veya çevrimiçi form gibi birçok farklı çözüm için kullanılabilirler.

Tüm bu örnekler gösteriyor ki Razor, ASP.NET MVC uygulamaları için oldukça kullanışlı bir araçtır ve kodlama sürecini çok daha hızlı ve kolay hale getirir.

Döngüler

Razor döngüleri, ASP.NET MVC uygulamalarında sayfa üzerinde koleksiyonlarla çalışmanın yaygın bir yolu olan C# özelliğidir. Bu döngüler, bir koleksiyon içinde her öğe için benzer işlemlerin yapılması gerektiğinde kullanışlıdır.

Bir örnekle açıklamak gerekirse, bir e-ticaret sitesindeki sepetimizdeki ürünlerin adlarını listelemeyi düşünelim. Razor döngüsü, ürünler koleksiyonuna erişerek her bir ürün için aşağıdaki gibi kod yazmamızı sağlar:

Kod	Açıklama
<ul>	Ürünlerin listeleneceği bir liste oluşturulur.
@foreach (var product in Model.Products) {	Koleksiyondaki her bir ürün için döngü oluşturulur.
<li>@product.Name</li>	Her bir ürünün ismi listenin bir öğesi olarak yazdırılır.
}	Döngü sonlandırılır.
</ul>	Liste kapatılır.

Gördüğünüz gibi, Razor döngüsü, kolay anlaşılabilir bir yapı sağlayarak kodun okunaklığını arttırır. Bu da, geliştirme sürecini ve kodun bakımını kolaylaştırır.

Şartlı Görünümler

Razor, şartlı görünümleri çarpıcı bir şekilde sağlayarak, verileri neye göre görüntüleyeceğimize göre şekillendirmemize olanak tanır. Bir örnek vermek gerekirse, bir kullanıcının yaşı belirli bir yaşın üzerindeyse, bir üyelik indirimi verebiliriz.

Bunun için Razor, koşul ifadelerini C# kodu ile kolayca birleştirerek sayfalarımızda kullanmamıza olanak tanır. Bu sayede, veriyi dinamik bir şekilde göstermek için çok sayıda gömülü kod oluşturabiliriz.

Ayrıca, şartlı görünümler kullanarak hem metinleri hem de görselleri etkili bir şekilde değiştirebiliriz. Örneğin, bir kullanıcının bir ürünü sepete eklemesi durumunda, sepet iconunu farklı bir renkle değiştirebiliriz. Bu sayede, kullanıcının sepetindeki ürün sayısını hızlı bir şekilde fark edebilir.

Formlar

ASP.NET MVC'nin desteklediği Razor View Engine, web geliştiricilerin form işleme işlemini kolay ve hızlı hale getiren HTML yardımcı sınıfları sağlamaktadır. Bu yardımcı sınıflar, form elemanları için gerekli olan HTML kodunu kolayca oluşturmanızı sağlar.

Bir örnek olarak, HTML yardımcı sınıfı @Html.TextBox() form elemanı için gerekli olan HTML kodunu otomatik olarak üretir. Bununla birlikte, kullanıcılar bu form elemanına bir değer girdiğinde, girdiyi değişkene atamak için bir C# kodu yazmanız gerekir.

Ayrıca, Razor View Engine, istemci tarafından girilen verilerin geçerliliğini kontrol etmek için de kullanılabilir. Kullanıcılar tarafından girilen verilerin uygunluğunu kontrol etmek ve doğru olmayan verileri reddetmek için ASP.NET MVC uygulamalarında kullanılan Attribute Validation yöntemi Razor'la birlikte de kullanılabilir.