Razor View Engine Nedir?
Razor, .NET Core MVC'de HTML ve C#’ı bir arada kullanarak dinamik sayfalar oluşturmamızı sağlayan bir görünüm motorudur. İsterseniz veri tabanından verileri çekebilir, bu verilerle görsel düzenlemeler yapabilir ve kullanıcı dostu arayüzler oluşturabilirsiniz.
Örneğin, bir "Hoş Geldiniz" mesajını, kullanıcının ismiyle birlikte dinamik olarak göstermek istediğinizi düşünün. Razor ile bunu kolayca yapabilirsiniz!
Razor’un Yapısı ve Basit Kullanımı
Razor "@" sembolü ile çalışır. Yani HTML içindeyken @ sembolünü kullanarak C# kodları ekleyebilirsiniz.
Örnek:
<h1>Hoş Geldiniz, @Model.Name!h1> |
Bu kod, Model.Name içinde saklanan ismi çağırır ve "Hoş Geldiniz" mesajıyla birlikte gösterir.
Razor View Engine'in Temel Bileşenleri
Razor ile çalışırken bazı temel yapılar sıkça karşımıza çıkar:
- 1. Model Binding: Razor, .NET Core MVC’de model verilerini görünüme taşımamıza olanak tanır.
- 2. Layout (Yerleşim Sayfası): Uygulamanızın genel yapısını belirleyen bir sayfadır. Tek bir Layout oluşturarak tüm sayfalarınıza aynı başlık, menü veya alt bilgi gibi unsurları ekleyebilirsiniz.
3. Partial View (Parçalı Görünüm): Tekrar eden bölümler için parçalı görünümler kullanabilirsiniz. Örneğin, bir navigasyon menüsünü her sayfada yeniden yazmak yerine tek bir Partial View’de tanımlayıp her sayfada çağırabilirsiniz.
Örneklerle Razor View Engine Kullanımı
1. Temel Razor Söz Dizimi
@{ var currentTime = DateTime.Now; } <p>Bugünün Tarihi: @currentTimep> |
Bu örnekte, @{} bloğu içine C# kodunu ekleyerek, bugünün tarihini alıyoruz. @currentTime ifadesiyle de kullanıcıya gösteriyoruz.
2. If-Else Şartları
@if(Model.IsLoggedIn) { <p>Merhaba, @Model.Name!p> } else { <p>Lütfen giriş yapın.p> } |
Bu döngü, ürünlerin listesini kullanıcıya sunar.
Razor View Engine ile Layout ve Partial View Kullanımı
Layout Sayfası Oluşturma
Bir Layout (Ana Yerleşim) sayfası tüm sayfalarınızın şablonu olur. Views/Shared/_Layout.cshtml dosyasında genel yapıyı oluşturabilirsiniz:
DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>@ViewData["Title"]title>
head>
<body>
<div>
<h1>Uygulamanızın Başlığıh1>
div>
<main>
@RenderBody()
main>
<footer>
<p>© 2024 Şirketinizp>
footer>
body>
html>
Bu dosya, her sayfada tekrar eden üst bilgi (header) ve alt bilgi (footer) gibi bölümleri içerir. @RenderBody() kısmı ise her sayfaya özel içeriğin gösterileceği yerdir.
Partial View Kullanımı
Navigasyon menüsü veya ürün listesi gibi birçok sayfada tekrarlanacak yapılar için Partial View kullanmak oldukça pratiktir. Örneğin, bir Views/Shared/_Navigation.cshtml dosyası oluşturun:
<nav> <ul> <li><a href="/">Anasayfaa>li> <li><a href="/hakkimizda">Hakkımızdaa>li> <li><a href="/iletisim">İletişima>li> ul> nav> |
Bu parçalı görünümü ana sayfaya eklemek için:
@await Html.PartialAsync("_Navigation") |
Neden Razor View Engine Kullanmalıyız?
- 1. Hızlı ve Verimli: Razor, HTML ile C# kodlarını birleştirmenizi sağlar ve geliştirme sürecini hızlandırır.
- 2. Dinamik İçerik: Kullanıcıdan gelen verileri ya da uygulama durumuna göre değişen içerikleri kolayca gösterebilirsiniz.
- 3. Tekrar Kullanılabilir Yapılar: Layout ve Partial View’lerle, uygulamanızda düzenli ve tekrar kullanılabilir yapılar oluşturabilirsiniz.
Razor View Engine, .NET Core MVC’de kullanıcı dostu ve etkileyici arayüzler oluşturmanın anahtarıdır. HTML ve C#'ı birlikte kullanarak dinamik ve estetik sayfalar yaratabilirsiniz.
