3. View ve Razor

Web uygulamalarında kullanıcı deneyimi, yalnızca iş mantığının doğru çalışmasıyla değil, aynı zamanda kullanıcıya sunulan görsel arayüzlerin kalitesiyle de ilgilidir. İşte bu noktada View ve Razor devreye girer. Asp.Net Core MVC’nin güçlü altyapısı sayesinde, veriyi görselleştirerek kullanıcıya sunmak için etkili araçlar sunulmaktadır.

View, kullanıcıya gösterilen arayüzdür ve Asp.Net Core MVC projelerinde dinamik içerik sunmak için kullanılır. View’lar, iş mantığını temsil eden verilerin HTML, CSS ve JavaScript gibi görsel unsurlarla birleşerek kullanıcıya sunulmasını sağlar. Bu süreçte Razor syntax, dinamik içerik oluşturmak için kullanılan esnek ve güçlü bir dil olarak önemli bir rol oynar.

Bu bölümde:

Bir View’ın ne olduğunu ve nasıl oluşturulacağını inceleyeceğiz.
Razor syntax ile dinamik HTML içeriklerinin nasıl üretildiğini öğreneceğiz.
Layout ve Partial View gibi konseptlerle, daha modüler ve yeniden kullanılabilir arayüz bileşenleri geliştirmeyi keşfedeceğiz.

Routing ve Controller mekanizmalarını öğrenerek backend tarafındaki iş akışını kavradınız. Şimdi sıra, bu mekanizmaların çıktılarını kullanıcı dostu bir şekilde sunarak Asp.Net Core MVC’nin gerçek gücünü ortaya çıkarmakta!

3.1. View nedir ve nasıl oluşturulur?

View Nedir?

View, kullanıcıya gösterilen arayüzdür ve Asp.Net Core MVC projelerinde dinamik içerik sunmak için kullanılan temel bileşenlerden biridir. View’lar, model katmanından gelen verileri görsel bir formatta kullanıcıya sunar. Bu format genellikle HTML, CSS ve JavaScript gibi teknolojilerle oluşturulur. View, uygulamanızın "ne görünüyor" kısmını temsil ederken, iş mantığı ve veri işleme kontrolörlerde kalır.

Bir View:

Dinamik İçerik: Kullanıcıdan gelen verilere göre değişen içerikler oluşturur.
Sunum Katmanı: Veriyi estetik ve kullanıcı dostu bir şekilde sunar.
Model ile Etkileşim: Modelden gelen veri ile kullanıcının etkileşim kurduğu arayüzü birleştirir.

View Nasıl Oluşturulur?

Asp.Net Core MVC’de bir View genellikle bir cshtml dosyası olarak oluşturulur. Bu dosyalar Razor syntax kullanılarak HTML ile dinamik içerikleri birleştirir.

Varsayılan Yöntemle View Oluşturma
- Bir View oluşturmak için öncelikle bir kontrolörde bir action metodu tanımlamanız gerekir:
```
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}
```
- View() metodu çağrıldığında, Asp.Net Core varsayılan olarak /Views/Home/Index.cshtml dosyasını arar. Eğer dosya bulunmazsa bir hata alırsınız.
Manuel View Dosyası Oluşturma
- /Views/[ControllerName] klasörüne gidin.
- Yeni bir cshtml dosyası oluşturun (örneğin, Index.cshtml).
- HTML ve Razor syntax kullanarak içerik ekleyin:
```
<h1>Merhaba, Asp.Net Core MVC!</h1>
<p>@DateTime.Now</p>
```

Model ile Veri Gönderme

Bir View, modele bağlı veri ile çalışabilir:

public IActionResult Details()
{
    var product = new Product { Id = 1, Name = "Laptop" };
    return View(product);
}

View içinde model verisini şu şekilde kullanabilirsiniz:

@model Product
<h1>Ürün Detayları</h1>
<p>Ürün Adı: @Model.Name</p>

View’ların Yapılandırması

Asp.Net Core MVC projelerinde View’lar şu klasörlerde organize edilir:

/Views: Tüm View dosyalarının ana dizinidir.
/Views/Shared: Ortak View’ların yer aldığı dizindir. Örneğin, layout dosyaları buraya konulur.
/Views/[ControllerName]: Her kontrolör için ayrı bir klasör bulunur.

ViewResult ve Alternatifleri

Controller'dan bir View döndürüldüğünde genellikle bir ViewResult nesnesi oluşturulur. Ancak farklı veri tipleriyle çalışmak için başka dönüş türleri de vardır:

PartialViewResult: Bir View’ın küçük bir kısmını döner.
JsonResult: JSON formatında veri döner.
ContentResult: Basit bir metin döner.

Örnek:

public IActionResult Details()
{
    return PartialView("_PartialViewName", model);
}

Atıflar ve İleri Okuma

View’ların kontrolörlerle nasıl entegre çalıştığını anlamak için Controller Nedir ve Nasıl Oluşturulur? başlığını inceleyebilirsiniz.
View’lar, Model verisiyle doğrudan çalışır. Daha fazla bilgi için MVC Mimarisi ve Bileşenleri bölümüne göz atabilirsiniz.

Sonuç

View, Asp.Net Core MVC’nin kullanıcı arayüzünü oluşturma konusundaki temel bileşenidir. View oluşturmayı ve model verisiyle nasıl çalışacağını anlamak, web uygulamanızın dinamik ve kullanıcı dostu olmasını sağlar. Bir sonraki alt başlıkta Razor Syntax ile View’ları nasıl daha esnek hale getirebileceğimizi öğreneceğiz.

3.2. Razor syntax ve kullanımı

Razor Syntax Nedir?

Razor, Asp.Net Core MVC projelerinde kullanılan, HTML ve C# kodlarını aynı dosyada birleştiren, hafif ve kolay öğrenilebilir bir syntax yapısıdır. Razor sayesinde dinamik içerikler oluşturabilir, model verilerini HTML içine gömebilir ve programlama mantığını kolayca arayüzlere entegre edebilirsiniz.

Razor syntax, hem backend hem de frontend arasındaki etkileşimi optimize etmek için tasarlanmıştır. Örneğin:

HTML Etiketleriyle Uyumlu Çalışma: Razor, HTML kodlarıyla uyum içinde çalışır.
Dinamik İçerik Üretimi: @ işareti ile C# kodları doğrudan HTML içinde kullanılabilir.

Razor Syntax’ın Temel Özellikleri

C# Kodlarının Kullanımı: Razor, @ sembolü ile C# kodlarını HTML içinde tanımlar.
Örnek:
```
<h1>@DateTime.Now</h1>
```
Çıktı: <h1>16 Kasım 2024</h1>
Model ile Çalışma: Razor, kontrolörden gelen model verilerini View içinde kolayca kullanmanızı sağlar.
Örnek:
```
@model Product
<h1>Ürün Adı: @Model.Name</h1>
```
Koşullar ve Döngüler: Razor ile if/else koşulları ve döngüler HTML içinde dinamik olarak kullanılabilir.
Örnek:
```
@if (Model.Price > 100)
{
    <p>Bu ürün pahalıdır.</p>
}
else
{
    <p>Bu ürün uygundur.</p>
}
```
Yardımcı Metotlar (Helpers): Razor, sıklıkla kullanılan işlemleri kolaylaştırmak için yardımcı metotlar sunar:
- HtmlHelper: HTML elementleri oluşturur.
- UrlHelper: Dinamik URL oluşturur.

Razor Syntax ile İleri Kullanım

Partial View Entegrasyonu: Bir View’ın parçasını başka bir View içinde kullanabilirsiniz:
```
@await Html.PartialAsync("_PartialViewName", model)
```
Layout Kullanımı: Layout dosyaları, tekrarlayan HTML yapısını merkezileştirir. Razor ile bir View’a layout ekleyebilirsiniz:
```
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
```
HTML Kodlarının Dinamik Hale Getirilmesi: Razor içinde C# değişkenlerini HTML elemanlarında kullanabilirsiniz.
Örnek:
```
<input type="text" value="@Model.Name" />
```

Razor Syntax ile MVC Mimarisi Arasındaki İlişki

Razor, kontrolörden gelen verilerin View üzerinde sunulması için kullanılır. Örneğin, bir kontrolördeki action metodu şu şekilde çalışır:

public IActionResult Details()
{
    var product = new Product { Id = 1, Name = "Laptop", Price = 1500 };
    return View(product);
}

Bu model verisi, Razor sayesinde aşağıdaki gibi dinamik bir View’da işlenebilir:

@model Product
<h1>@Model.Name</h1>
<p>Fiyat: @Model.Price TL</p>

Atıflar ve İleri Okuma

Razor syntax, View Nedir ve Nasıl Oluşturulur? başlığı ile doğrudan ilişkilidir. View'ların yapısını anlamak için önceki bölüme göz atabilirsiniz.
Layout ve Partial View'lar gibi Razor ile ilgili diğer konseptler için bir sonraki başlık olan Layout ve Partial View'lar bölümünü inceleyebilirsiniz.

Sonuç

Razor syntax, Asp.Net Core MVC projelerinde dinamik içerik oluşturmanın temel taşlarından biridir. HTML ile C#’ı kolay ve verimli bir şekilde birleştirerek güçlü, esnek ve dinamik arayüzler oluşturabilirsiniz. Bir sonraki alt başlıkta, bu yapıyı daha modüler hale getirmek için Layout ve Partial View kavramlarını keşfedeceğiz.

3.3. Layout ve Partial View'lar

Layout Nedir?

Layout, bir web uygulamasındaki tekrar eden HTML yapısını düzenlemek ve merkezi bir noktada kontrol etmek için kullanılan bir dosyadır. Asp.Net Core MVC'de layout dosyaları, uygulamanızın farklı sayfalarında kullanılan ortak başlık, menü, footer gibi bileşenleri tanımlamanızı sağlar. Layout sayesinde kod tekrarını azaltabilir ve arayüzü daha düzenli hale getirebilirsiniz.

Layout dosyaları genellikle /Views/Shared klasöründe bulunur ve bir View dosyasına şu şekilde atanır:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Layout Nasıl Kullanılır?

Layout Dosyası Oluşturma

/Views/Shared klasöründe _Layout.cshtml adında bir dosya oluşturun.

HTML yapısını ve Razor ile dinamik içerikleri ekleyin:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <h1>Site Başlığı</h1>
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        <p>© 2024 Tüm Hakları Saklıdır.</p>
    </footer>
</body>
</html>

@RenderBody() metodu, her View dosyasının kendine özgü içeriğinin nerede gösterileceğini belirler.

Layout Dosyasını Bir View’a Bağlama
- View dosyasının üst kısmında layout tanımlayın:
```
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
```

Partial View Nedir?

Partial View, bir View içinde tekrar tekrar kullanılabilecek küçük View bileşenleridir. Örneğin, bir kullanıcı profili kutusu veya ürün listeleme kartları bir Partial View olarak tanımlanabilir. Partial View’lar, uygulamanızın modüler hale gelmesine yardımcı olur ve kod tekrarını azaltır.

Partial View Nasıl Kullanılır?

Partial View Dosyası Oluşturma
- /Views/Shared veya ilgili kontrolörün View klasörüne _PartialViewName.cshtml adında bir dosya oluşturun.
- Örnek içerik:
```
<div class="user-profile">
    <h2>@Model.Name</h2>
    <p>@Model.Email</p>
</div>
```
Partial View’ı Çağırma
- Bir View dosyasından Partial View’ı çağırmak için:
```
@await Html.PartialAsync("_PartialViewName", model)
```
- Ya da bir kontrolörden:
```
return PartialView("_PartialViewName", model);
```

Layout ve Partial View’ların Faydaları

Kod Tekrarını Azaltma
- Ortak tasarım bileşenlerini tek bir yerde yöneterek kod tekrarını önler.
Daha Modüler Bir Yapı
- Partial View’lar, uygulama bileşenlerini modüler hale getirir ve yeniden kullanılabilirlik sağlar.
Merkezi Yönetim
- Layout dosyası sayesinde uygulamanızdaki tüm sayfaların genel yapısını merkezi olarak kontrol edebilirsiniz.

Örnek: Layout ve Partial View Birlikte Kullanımı

Bir e-ticaret sitesi için ürün listeleme örneği:

Layout Dosyası:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"]</title>
</head>
<body>
    <header>
        <h1>Ürünler</h1>
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        <p>© 2024 Tüm Hakları Saklıdır.</p>
    </footer>
</body>
</html>

Partial View Dosyası (_ProductCard.cshtml):

<div class="product-card">
    <h2>@Model.Name</h2>
    <p>Fiyat: @Model.Price TL</p>
</div>

Ana View Dosyası:

@model List<Product>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@foreach (var product in Model)
{
    @await Html.PartialAsync("_ProductCard", product)
}

Atıflar ve İleri Okuma

Layout ve Partial View’lar, Razor Syntax ve Kullanımı başlığındaki Razor becerileri ile doğrudan ilişkilidir.
Daha fazla bilgi için View Nedir ve Nasıl Oluşturulur? başlığına göz atabilirsiniz.

Sonuç

Layout ve Partial View’lar, bir web uygulamasının görsel tutarlılığını ve kod düzenini sağlamak için vazgeçilmez araçlardır. Layout ile tüm sayfaların ortak yapısını belirlerken, Partial View’lar ile tekrar eden küçük bileşenleri kolayca yönetebilirsiniz. Bu iki kavram, Asp.Net Core MVC’nin sunduğu esnekliği en iyi şekilde kullanmanızı sağlar.

Bölüm Sonu: View ve Razor’un Özeti

Geriye Bakış: View ve Razor

Bu bölümde, Asp.Net Core MVC’nin kullanıcı arayüzlerini oluşturma ve yönetme süreçlerini detaylı bir şekilde ele aldık. Uygulamanızın görsel kısmını oluştururken hem dinamik içerik üretimi hem de düzenli ve yeniden kullanılabilir bir yapı kurmanın ne kadar önemli olduğunu gördük.

View Nedir ve Nasıl Oluşturulur?
- View’ların, kullanıcıya sunulan arayüz bileşenleri olduğunu öğrendik.
- Dinamik içerik oluşturmak için View’ların nasıl model verisi ile entegre çalıştığını inceledik.
  Daha fazla bilgi için View Nedir ve Nasıl Oluşturulur? başlığına göz atabilirsiniz.
Razor Syntax ve Kullanımı
- Razor syntax ile HTML ve C# kodlarının birleştirilerek nasıl dinamik içerikler üretildiğini gördük.
- Koşullar, döngüler ve model binding konularında Razor’un gücünü keşfettik.
  Detaylar için Razor Syntax ve Kullanımı başlığı faydalı olacaktır.
Layout ve Partial View’lar
- Layout dosyalarının, uygulamanızdaki tüm sayfaların genel yapısını nasıl kontrol ettiğini inceledik.
- Partial View’larla tekrar eden küçük bileşenlerin nasıl yönetileceğini öğrendik.
  Daha fazlası için Layout ve Partial View’lar başlığına göz atabilirsiniz.

İleriye Bakış: Model ve Veri Bağlama

View ve Razor ile kullanıcıya sunulan arayüzlerin nasıl oluşturulacağını öğrendikten sonra, artık bu arayüzlere veri sağlayan bir diğer önemli katmana odaklanabiliriz: Model ve Veri Bağlama.

Bir sonraki bölümde:

Model nedir ve nasıl oluşturulur?
Veri bağlama nasıl çalışır?
Validasyon ve veri doğrulama işlemleri nasıl yapılır?
konularını detaylı bir şekilde inceleyeceğiz.

Bu bilgiler, hem kullanıcıdan gelen verileri işlemede hem de backend ile frontend arasındaki veri akışını düzenlemede kritik bir rol oynayacaktır. Hazırsanız, bir sonraki bölümde görüşmek üzere!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

D03.md

D03.md

3. View ve Razor

3.1. View nedir ve nasıl oluşturulur?

View Nedir?

View Nasıl Oluşturulur?

View’ların Yapılandırması

ViewResult ve Alternatifleri

Atıflar ve İleri Okuma

Sonuç

3.2. Razor syntax ve kullanımı

Razor Syntax Nedir?

Razor Syntax’ın Temel Özellikleri

Razor Syntax ile İleri Kullanım

Razor Syntax ile MVC Mimarisi Arasındaki İlişki

Atıflar ve İleri Okuma

Sonuç

3.3. Layout ve Partial View'lar

Layout Nedir?

Layout Nasıl Kullanılır?

Partial View Nedir?

Partial View Nasıl Kullanılır?

Layout ve Partial View’ların Faydaları

Örnek: Layout ve Partial View Birlikte Kullanımı

Atıflar ve İleri Okuma

Sonuç

Bölüm Sonu: View ve Razor’un Özeti

Geriye Bakış: View ve Razor

İleriye Bakış: Model ve Veri Bağlama

Files

D03.md

Latest commit

History

D03.md

File metadata and controls

3. View ve Razor

3.1. View nedir ve nasıl oluşturulur?

View Nedir?

View Nasıl Oluşturulur?

View’ların Yapılandırması

ViewResult ve Alternatifleri

Atıflar ve İleri Okuma

Sonuç

3.2. Razor syntax ve kullanımı

Razor Syntax Nedir?

Razor Syntax’ın Temel Özellikleri

Razor Syntax ile İleri Kullanım

Razor Syntax ile MVC Mimarisi Arasındaki İlişki

Atıflar ve İleri Okuma

Sonuç

3.3. Layout ve Partial View'lar

Layout Nedir?

Layout Nasıl Kullanılır?

Partial View Nedir?

Partial View Nasıl Kullanılır?

Layout ve Partial View’ların Faydaları

Örnek: Layout ve Partial View Birlikte Kullanımı

Atıflar ve İleri Okuma

Sonuç

Bölüm Sonu: View ve Razor’un Özeti

Geriye Bakış: View ve Razor

İleriye Bakış: Model ve Veri Bağlama