Views'te Değişkenler ve Kod Bloğu ile Çalışma

SelamünAlayküm bu yazımızda geçtiğimiz konumuz olan View'e giriş'in devamı niteleğinde olan ve View'e giriş konusunun içinde yer alan "Views'te Değişkenler ve Kod Bloğu ile Çalışma" başlığına devam edeceğiz. 

Öncelikle geçtiğimiz konuda View oluşturma, Razor Syntax ve Views'te Değişkenler ve Kod Bloğu ile Çalışmanın ise bir kısmını ele almıştık, şimdi ise yukarıda da yazdığım gibi kaldığımız yerden devam edeceğiz.

Using Kullanımı

view dosyamızda kütüphaneleri, modelleri, class library projelerini vs. kullnmak istiyorsak C# kodunda olduğu gibi using ifadesini kullanmalıyız.

@using Newtonsoft.json;
@using örnek_proje.Entities;

@{
    var json = JsonConvert.SerializeObject(new News() {Id = 1, Title = ".Net Core Views'te using kullanımı", Approve = true});
}

<div>
@json
</div>

Newtonsoft kütüphanesine ait JsonConvert'i kullanmak istedik. Bunun için Newtonsoft'u yukarıda using ile tanımladık. Bu şekilde News nesnesini Json yapısına uydurmuş oluk.

ViewBag, ViewData ve TempData Kullanımı 

ViewBag, ViewData ve TempData'yı verilerimizi Controller katmanından View katmanına aktarmak için kullanırız.

Not:	Çok sıklıkla kullanmak kod karmaşasına neden olmasından kaynaklanan sebeplerden ötürü sadece ihtiyaç duyulması halinde kullanlıması önerilir.

ViewBag, ViewDatave veTempData'ya Controller katmanında string ifadeler atayalım ve bu ifadeleri View katmanında ekrana yazdıralım.

public IActionResult Index()
{
    ViewBag.Message1 = "ViewBag kullanıyorum";
    ViewData["Message2"] = "ViewData kullanıyorum";
    TempData["Messag3"] = "TempData kullanıyorum";
    return View();
]

<div>
    @WiewBag.Message1 <br />
    @ViewData["Message2"] <br />
    @TempData["Message3 "]
</div>

Görüldüğü gibi ViewBag, ViewData ve TempData'nın değerleri ekranda yazacaktır. Peki, bu ifadelerle bir Action metodundan, başka bir Action metoduna aktarım yapabilir miyiz? Bunu ufak bir örnekle görelim.

Index Action metodumuzun altına ViewExampIe isminde bir tane daha Acticn metodu yapalım. ViewExample Action metodumuza sağ tıklayıp Add View diyerek boş bir View oluşturalım ve Index View'ine yazdıklarımızın aynısını ViewExample adlı View'e yazalım.

Index Action metodumuzda aşağıdaki değişikliklerle birlikte düzenleyelim.

public IActionResult Index()
{
    ViewBag.Message1 = "VİewBag kullanıyorum";
    ViewData["Message2"] = "VİewData kullanıyorum";
    TempData["Messag3"] = "TempData kullanıyorum";
    return RedirectToAction("ViewOrnegi");
}
public IActionResult ViewOrnegi()
{
    return view();
}

Değişiklikler yapıldıktan sonra projeyi çalıştıralım. Karşımıza çıkacak olan ekranda sadece "TempData kullanıyorum" ifadesi ekranda gösterilecektir. Bunun sebebi, TempData ile bir Action metodundan, başka bir Action metoduna veri taşımak mümkündür. ancak ViewBag ve ViewData ile bunu yapamayız. Bu yüzden ViewBag ve ViewData ifadelerine atadığımız string değerler, ViewExample sayfasını çağırdığımızda kaybolmuştur.

Shared Klasörü

Shared klasörü herhangi bir Controller'e bağlı olmayan View dosyaları için oluşturduğumuz bir klasördür. Genellikle Layout View dosyaları ve Partial View dosyaları burada oluşturulur.

Layout

Layout, birden çok View sayfamızda görünmesini istediğimiz standart olarak oluşturacağımız .cshtml uzantılı View dosyalarımızdır. Eski ASP.NET Web Form yapısında var olan Master Page yapısına benzer bir yapıdadır.

Misalen, hemen hemen tüm sitelerde bir header ve footer kısmı vardır. Bu kısımları genellikle menü, kullanıcı adı, soyadı, iletişim için adres vs. Bilgileri ile doldururuz. Bu bilgileri her sayfamızda göstermek isteriz. Bu bilgileri her sayfada tek tek yazmak yerine, bir Layout oluşturup bu bilgileri bu Layout'a yazarız. Oluşturduğumuz Layout'un yolunu sayfanın başında vermemiz yeterli olacaktır.

Misal: Shared klasörümüzün altına Layout View dosyamızı oluşturalım. Bunun için Shared klasörüne sağ tıklayıp Add/New İtem seçeneğini seçiyoruz ve listeden Razor Layout'u bulup _Layout isminde bir View oluşturuyoruz. (_ ile başlamamız isimlendirme standartlarına uymak içindir.)

Oluşturduğumuz _Layout isimli View dosyamızı incelersek @RenderBody() ifadesini göreceğiz. Bu bizim Layout sayfamızın değişken kısmıdır. Buraya Layout sayfamızı referans olarak gösterdiğimiz View dosyası gelecektir.

<html>
   <head>
       <meta name="viewport" content="width=device-width" />
       <title> @VieBag.Title </title>
   </head>
   <body>
       <div>
          @RenderBody()
       </div>
   </body>
</html>

HomeController altında bir Private isimli Action metodumuz olsun. Bu Action metoduna sağ tıklayıp, Add View seçeneğini seçelim.

Karşımıza gelen ekranda Use Layout Page seçeneğini işaretleyim. Bu seçenek, sayfamızın bir Layout'u olacak anlamına gelmektedir. Seçtikten sonra sağ tarafta kalan --- şeklindeki butondan Layout dosyamızı bulalım ve bu dosyayı sayfamıza ekleyelim. 

Daha sonra oluşturduğumuz View'in üst kısmındaki Layout'a, bizim oluşturduğumuz Layout'un yolunu atayacaktır. Dikkat ederseniz önceki örneklerimizde bu kısım null olarak gelmekteydi. null olarak gelmesi, bu View'in herhangi bir Layout dosyası yok anlamına gelmekteydi.

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

<h2>Private</h2>

Şimdi de Layout dosyasına örnek olsun diye <div> tagları arasına metin olarak menü ve alt kısım yazalım. Yazdıktan sonra uygulamamızı çalıştıralım.

<!DOCTYPE html>
<html>
   <head>
       <meta name=”viewport” content=”width=width-device” />
       <title>@ViewBag.Title</title>
  </head>
  <body>
      <div>Menü</div>
      <div>@RenderBody()</div>
      <div>Alt Kısım</div>
  </body>
</html>

Uygulamamızı çalıştırdıktan sonra görüleceği üzere yukarıda Menü yazacaktır. Sonra @RenderBody() yazan yere Index adlı View'i yazacaktır. Daha sonra alta da Alt Kısım ifadesini yazacaktır.

Not:	Bir projede birden fazla Layout olabilmektedir. View oluşutururken hangi Layout dosyasını sayfanıza eklemeniz gerektiğine siz karar vermelisiniz.

Section

Section, Layout'ta sayfadan sayfaya değişen kısımları ifade etmek için kullanırız. Mesalen, yukarıda menü her sayfada değişiklik gösteriyor ve siz bu menüyü Layout’ta tanımlamak istiyorsanız bunu Section kullanarak yapabilirsiniz.

Section genellikle bütün Javascript'leri ve Css'leri sayfamızda yükletmek istemediğimiz durumlarda kullanırız. Bunun için sayfamza özel, Javascript'i veya Css’i sayfamızdaki Section içine alırız.

Misalen , iki sayfamız olsun ve bunlara ait isimleri aynı olan Section blokları olsun. Tanımladığımız Section'ları ismiyle Layout kısmından çağıralım.

İki adet Action metodu oluşturuyoruz.

public IActionResult PageOne()
{
     return View();
}

public IActionResult PageTwo()
{
     return View();
}

Shared klasörüne bir tane _Layout isminde bir Layout oluştuyoruz. Yukarıdaki kodda oluşturduğumuz Action metodlarına sağ tıklayıp, Add View ile bu metodlara ait View'leri oluşturuyoruz Oluştururken View'lere, Layout isimli oluşturduğumuz Layout'u eklemeyi unutmayalım.

Oluşturulan View'lere menu isminde bir Section tanımlıyoruz ve içini dolduruyoruz.

@{
     ViewData["Title"] = "PageOne";
     Layout = "~/Views/Shared/_Layout.cshtml";
}

@section menu
{
   Menü-1
}

@{
     ViewData["Title"] = "PageOne";
     Layout = "~/Views/Shared/_Layout.cshtml";
}

@section menu
{
   Menü-2
}

Layout'tan oluşutrduğumuz Sectionl'arı RenderSection ile çağıralım.

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-wedth" />
        <title>@VİewBag.Title</title>
    </head>
    <body>
       @RenderSection("menu")
       <div>
          @RenderBody()
       </div>
    </body>
</html>

 Projeyi çalıştıralım ve Action metodlarımızı çağıralım.

Not:	Tarayıcıya yazdığımız url kısmına dikkat edelim.

Görüleceği üzere PageOne ve PageTwo isimli sayfalara ait Section'lar sayfalarımızda aktif oldu. Peki, oluşturduğumuz Layout'u kullanan ve menu isminde Section barındırmayan başka bir sayfa yapmak isteseydik ne olacaktı?

Index isimli Action metodumuza ait View'i çalıştıralım. Bu View'e menu isimli bir Section tanımlamamıştık. 

Görüleceği üzere Index sayfamız "Layout sayfası menu ismindeki Section’ı Index sayfasmda bulamadı" hatası vermektedir. Bu hatayı düzeltmek için sayfanıza menu isminde bir Section tanımlamanıza gerek yoktur. RenderSection'a False diye ikinci bir parametre göndermeniz yeterli olacaktır. (Bu parametre varsayılan olarak True geldiğinden ilk etapta hata vermiş oldu.)

<body>
     @RenderSection("menu", false)
     <div>
         @RenderBody()
     </div>
</body>

Sayfayı tekrar çalıştırdığınızda hatayı almayacaksınız ama RenderSection kısmı Index sayfanıza size hiçbir şey getirmeyecektir.

False parametresi ile uygulamamıza "Sayfada menu isimli bir Section yok ise hiçbir şey yapma boş getir" demiş olduk.

RenderSection metoduna ikinci bir parametre göndermeden de hatayı engelleyebiliriz. Layout'ta RenderSection kullanmadan önce, if(IsSectionDefined(“menu”)) koşulu koyarsak sadece "menu" isimli bir Section sayfamızda olması durumunda RenderSection() 'ı çalıştıracaktır.

// Layout’ta section kontrolü

@if (IsSectionDefined("menu"))
{
      RenderSection("menu") ;
} 

View Start

İsminden de kolayca anlaşılabileceği gibi View'lerin Start dosyasıdır. Bir View çalışmadan önce ViewStart dosyasını kontrol eder. ViewStart dosyasında Layout çalışmasında Layout tanımlaması varsa Layout'u çalıştırır sonra ViewStart dosyasının diğer işlemlerini yapar. En sonda çalıştırdığımız View'deki işlemleri yapar. (ViewStart dosyasının Views'in altında olması durumunda.)

Genellikle View'lerde varsayılan olarak Layout ataması yapmak için kullanılmaktadır. Siz sayfanızda Layout ataması yapmasanız bile ViewStart dosyasında Layout ataması varsa varsayılan olarak ViewStart dosyasındaki Layout'u kullanacaktır. Sayfanızda, ViewStart dosyasındaki Layout'u iptal ettirmek için Layout'a null ataması yapmalısınız. Yoksa VıewStart dosyasındaki Layout sayfanızda çalışacaktır.

Misalen, HomeControIler içinde Index Action metodu olsun. Bu Action metoduna bir View ekleyelim. (Metot üzerinde sağ tık Add View) Eklediğimiz View’in Layout'u olmasın.

Şimdi de projemize ViewStart dosyası ekleyelim. Bunun için Views klasörüne sağ tıklayıp Add/New İtem diyoruz. Çıkan pencerede "View Start"ı aratabiliriz. 

Index Action metodumuzda bir ViewBag tanımlaması yapalım.

public IActionResult Index()
{
    ViewBag.ViewStart = "Controller-ViewBag";
    return View();
}

Index View'inin içini dolduralım.

@ViewBag.ViewStart
<div>Burası Index</div>

Layout oluşturalım ve Layout'un içini dolduralım.

<body>
   <div> Burası Layout</div>
   <div>
       @RenderBody()
    </div>
</body>

ViewStart'ta varsayılan olarak bir tane Layout ekleyelim. Ve içine bir şeller yazalım.

@{
    Layout = "_Layout";
    ViewBag.ViewStart = "ViewStart-ViewBag";
}

<div>Burası VİewStart</div>

Projemizi çalıştıralım.

ekran çıktısı olarak ekrana:
Burası Layout
Burası VİewStart
ViewStart-VİewBag
Burası Index, yazacaktır.

Ekran çıktısında da görüleceği üzere, ilk başta ViewStart'ta tanımladığımız Layout'un <body> tag'ının arasındaki metin olan "Burası Layout" ekrana yazılmıştır. Daha sonra ViewStart dosyasına geri dönerek dosyadaki "Burası ViewStart" kısmını ekrana yazdı. Daha sonra Controller, Index Action metodunda ViewBag. ViewStart'a "Controller-ViewBag" metni atanmasına rağmen, ViewStart'ta ViewBag. ViewStart'a "ViewStart-ViewBag" atanmıştır ve ekrana bu atamayı yazmıştır.

En sonda Index View'inde yer alan metni ekrana yazmıştır. Burada da görüleceği üzere Index View’ine girmeden önce uygulamamız ViewStart'a girer ve burada ne var ne yok diye bakar. Daha sonra Index Vıew’ine girer ve oradaki komutları çalıştırır. 

Peki, biz bu ViewStart dosyasını projemiz yerine Views’in altındaki başka bir klasöre alsaydık ne olurdu? ViewStart dosyasını başka bir klasörün altına alsaydık sadece o klasörün altındaki View'ler çalıştırıldığında ViewStart'ın içine girecekti.

Misalen, şimdi aynı örneğin bir benzerini yapalım. HomeController ve Index View olduğu gibi kalsın. Layout'u da olduğu gibi bırakalım. CategoryController isminde bir Controller daha olsun ve Index Action metodunun View'i olsun. (View'in içi tamamıyla boş olsun) ViewStart dosyasını, Views'in altındaki Category klasörüne taşıyalım. Ve şimdi uygulamamızı çalılştıralım.

bize ekran çıktısı olarak:
Controller-ViewBag
Burası Index, yazacaktır.

Görüleceği gibi ViewStart, Category klasörünün altında olduğu için Home klasörünün altındaki Index View'inde çalışmadı. Böylece ViewBag değerimiz de Controller tarafında verdiğimiz değer de olduğu gibi kaldı. Layout sayfası da çağrılmamış oldu.

Şimdi Category Index'i çağıralım. Bize ekran çıktısı olarak:
Burası Layout
Burası ViewStart

Category klasörünün altında ViewStart dosyaı olduğu için Layout dosyası burada çağırılmıştır.

Html.Raw

Html.Raw ifadesi bizim string olarak verdiğimiz html ifadelerini etkinleştirir. Hml.Raw ifadesini kullanmadan yazarsak ekrana sadece string olarak değeri yazar.

Misalen, Index View’in içinde bir tane değişkenimiz olsun ve ona html etiketleri içinde bir değer yazalım. Bu değeri de ekrana basalım.

@{
    var x = "<b><i>hasanbozkuş</i></b>";
}

@x

Bize ekran çıktısı olarak <b><i>hasanbozkuş</i></b> şeklinde basacaktır.

Görüldüğü üzere x değişkenine verdiğimiz değeri direkt olarak ekrana yazdı.

Kodumuzu değiştirerek x değerini ekrana yazmadan önce Html.Raw ifadesinden geçirelim.

@{
   var x = "<b><i>hasanbozkuş</i></b>";
}
@Html.Raw(x)

Bu sefer bize hasanbozkuş şeklinde ekrana basacaktır.

Böylece Html.Raw ifadesi ile html taglarımızı aktif hale getirmiş olduk. Html taglarımızdaki koyu yazı ve italik yazı etiketlerimizle metnimizi bold ve italik yapmış olduk.

Partial

Html ifadelerimizi parçalara bölmek için kullanabileceğimiz ifadedir. Önce Partial View oluşturup daha sonra bu View'i istediğimiz bir View'in altına, Html.Partial ifadesiyle yerleştirebiliriz.

Partial View kullanmanın birden çok avantajı vardır:

• Böl-parçala-yönet kavramı ile html'lerinizi parçalayıp daha kolay yönetebilirsiniz.
•  Html ifadelerini kod kalabalığından kurtarmış olursunuz.
• Aynı html ifadesini bir kere yazıp farklı yerlerde kullanabilirsiniz.
• Bir html ifadesinde değişiklik yaptığınızda, aynı html ifadesini kullandığınız başka yerlerde de bu değişikliği yapmak istediğiniz zaman Partial kullanarak değişikliği tek bir yerde yapmış olursunuz. Böylelikle kod yazımında kendinize kolaylık sağlayabilirsiniz.

 

Bir haber sitemiz olsun. Bu haber sitesinin detayının template'si video veya düz metin olma durumuna göre farklılık göstersin. Ama iki template'de de ajans bilgileri kısmı aynı olacaktır. Bu durumda ajans bilgileri kısmını Partial yapıp sayfamızda bu Partial’i kullanmanız size fayda sağlayacaktır.

Misalen, Views klasörünün altına Shared klasörü, onun da altına Partial klasörü oluşturalım. Partial klasörü oluşturmaktaki amacımız, oluşturacağımız Partial View'lerini tek bir klasör altında toplayarak düzeni sağlamaktır. Partial klasörüne sağ tıklayıp Add View diyoruz. View ekleme ekranında "Create as a partial view" seçeneğini seçiyoruz ve Partial View'imize "_Agency" ismini veriyoruz. Ekleme butonuna basıyoruz.

Partial View'imizin içini dolduralım.

<div>Ajans Bilgileri</div>

HomeController altındaki Index Action'a ait Index isimli View'de bu Partia'i çağıralım.

<div>Haber Metni</div>
@Html.Partial("_Agency")

Projemizi çalıştırdıktan sonra, bize çıktı olarak:
Haber Metni
Ajans Bilgileri, şeklinde ekrana basacaktır.

Tarayıcı ekranına hem Index isimli View'de yer alan ifadeyi hem _Agency isimli Partial View’inde yer alan ifadeyi ekrana yazdıracaktır.

@Html.Partial'a bir Model göndermemiz de mümkündür. Bunun için Partial View’imizi @HtmI.PartiaI(“_Agency”, Model İsmi) şeklinde çağırmamız gerekir. Partial tarafında da modelimizi gönderdiğimiz tipte tanımlayabiliriz. ("Model ismi" yazdığımız yere, göndermek istediğimiz Model gelecektir.)

View Component

View Component'ler ile View tarafında istediğimiz yerden backend tarafına erişim sağlayıp veritabanından vs. bilgileri çekip View tarafında basabiliriz.

Hava durumunu bir hava durumu servisinden çektiğimizi düşünelim. Her sayfanın üst tarafında da bu hava durumunu gösterdiğimizi düşünelim. Bunun içinde hava durumunu Layout sayfasına koymamız gerekecektir. Sayfa açılırken hava durumu servisine bağlanıp bilgileri alıp tekrardan Layout tarafında bu bilgileri sayfaya basmamız gerekiyor. Bunun için ASP.NET Core ile gelen View Component’leri kullanıyoruz.

Misalen, Entities klasörü altında NewsNotification isminde bir class oluşturalım ve bu class’ın Title ile NotificationType isminde iki özelliği olsun.

public class NiwsNotification
{
   public string Title {get; set;}
   Public string Notification {get; set;}
}

Components adında bir klasör oluşturalım, bu klasörün içine NotificationComponent isminde bir Class oluşturalım ve bu Class’ı ViewComponent class'ından türetelim. Oluşturduğumuz Component Class’ın içine de InvokeAsync isminde bir metot oluşturalım. Bu metottan da NewsNotification tipinde son gelen web bildirimini gösterecek bir değer dönsün.

using Örnek_Proje.Entities;
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;

namespace Örnek_Proje.Components
{

     [ViewComponent(Name = "Notification")]
     public class NotificationComponent : viewComponent
     {

          public async Task<IViewComponent> InvokeAsync()
          {

            var news = new NewsNoğtification()
            { NotificationType = "Web Bildirimi",
            Title = ".Net Core Views'te WiewComponent kullanımı"
            };
            return View(); 
          }
     }
}

Shared klasörünün altına Components isminde bir klasör oluşturalım, onun da altına Notification isminde bir klasör oluşturalım. Notification klasörünün altına Default isminde Layout'u olmayan bir View tanımlayalım.

Bu View'in içini biraz dolduralım.

@model CoreExample.Entities.NewsNotification

<div>
       <b> Son gelen bildirim</b><br />
       @Model.Title ( @Model.NotificationType )
</div>

oluşturduğumuz Component'i kullanacağımız bir Layout sayfamız olsun. Oluşturduğumuz Component'i kullanmak için Component.InvokeAsync() içine ismini yazmamız yeterli olacaktır.

<body>
      @await Component.InvokeAsync("Notification")
      <div>
       @RenderBody()
     </div>
</body>

Asenkron olarak Component'i çağırdıktan sonra HomeController altında Index Action metodumuzu oluşturalım. Bu metoda ait View'i oluşturalım. Layout olarak oluşturduğumuz layout'u alsın. Bu View'in içini biraz dolduralım.

@{
	Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index Sayfamız</h2>

görüldüğü gibi Component’e tanımladığımız son gelen bildirim Layout sayfasıyla birlikte ekrana geldi. 

Component’lerimize parametre göndermemiz de mümkünür.

[ViewComponent (Name ="Notification")]
public class NotificationComponent : ViewComponent
{
    public async Task<IViewComponent> InvokeAsync()
    {
      var news = new NewsNotification()
      {
          NotificationType = "Web Bildirimi",
          Title = ".Net Core ViewComponent kullanımıL"
      };  
      return View();
    }
}

Kodda da görüldüğü üzere Notifcation isimli Component'e bir parametre tanımlamış olduk. View kısmında çağırırken de;

@await Component.InvokeAsync("Notificaton", new { type = "news"})

kodu yazarak Component'e parametre göndermiş oluruz. Parametreye veri göndererek ve Component'in içinde parametre ile gerekli işlemleri yaparak View'e geri döndürebiliriz. Böylelikle filtreleme gibi işlemleri de Component kısmında yapabiliriz.

Hazır Template

Hazır Template'ler kullanarak CRUD işlemlerinizi kısa yollardan yapabiliriz. Sadece CRUD işlemleri yapan, bunun dışında fazla işleme gerek duymayan bir uygulamamz olacaksa bunun için hazır Template'lerden faydalanabiliriz.

Misalen, Person isimli bir Entity oluşturalım. Bu Entity'nin Id, Name, Surname, NickName adında özellikleri olsun. (Bu özelliklere Property denmektedir.)

Bir Layout oluşturalım.

Bir tane PersonController isimli bir Controller oluşturmuş olalım. Bu Controller içinde Index isimli bir Action metodumuz olsun. Index Action metoduna da Index isimli bir View oluşturalım. View’i oluştururken listeleme template'sini ve Model Class olarak da oluşturduğumuz Person isimli Class'ı seçelim.

1. CRUD işlemlerinden hangisini yapmak istiyorsanız o template'yi seçmek için size bir liste sunar ve bu listeden Template seçilir. (Create, Details, Edit, Delete' List)

2. Template'ye uygulanacak Model seçilir.

3. View sayfasında script'lerimizi referans olarak gösterebileceğimiz _ValidationScriptsPartial isimli bir Partial View oluşturulur. Bu Partial View'i Development ortamında diye ayırarak kullanılacak şekilde varsayılan olarak gelir. Sizde Production vs. ortam oluşturup Debug modda veya Release modda çalışacak script'lerin yolunu gösterebilirsiniz.

Biz listeleme template'sini, Model olarak Person sınıfını seçtikten sonra oluşan View'e bir göz atalım. Template'ye Model olarak Person sınıfı ve Template olarak listeleme template'sini seçtiğimizden dolayı, Person sınıfı "@model Ienumerable<CoreExample.Entities. person>" olarak gelecektir. Böylelikle sayfamızda listeleme yapabiliriz.

Not:	Profesyonel yazılım dünyasında hazır template pek kullanılmadığından ayrıntılı olarak göstermedim. ihtiyaç halinde bu hazır template'leri tek tek deneyebilirsiniz. Elbette hazır template'lerin faydalı olacağı uygulamalar olacaktır.

@model IEnumerable<örnek_proje.Entities.Person>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ıd)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Surname)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Nickname)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ıd)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Surname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Nickname)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
}
    </tbody>
</table>

Görüleceği üzere bir tane table tagı oluşturdu ve Modelimize ait özellikleri bu table tagına yazdı. En alt tarafına da Person modelimizin elemanları içinde yapabileceğimiz işlemleri Html.ActionLink() ifadesi ile gösterdi.

Inherits

View sayfalarımızda RazorPage’ten miras alan class’larımızı kullanmamız mümkündür.

Misalen, CustomPage adında bir sınıf oluştaralım. Bu sınıfı abtract class yapalım. RazorPage sınıfından türetelim. Daha sonra abstract class’ın içini biraz dolduralım.

public abstract claas CustomPage : RazorPage
{
     public string Text { get; } = "View inherits kullanımı";
     public string JoinText(string ViewText)
     {
       return Text + “ “  + ViewText; 
     }
}

Şimdi de Inherits ile View dosyamızda CustomPage sınıfına ait olan özellikleri kullanalım. Bunun için bir tane View oluşturalım.

@inherits Örnek_Proje.CustomPage
@{
    Layout = null;
}

@Text <br />
@JoinText("-Vİew")

Projemizi çalıştırdığımızda Projemizi çalıştırdığımızda CustomPage sınıfının elemanlarını kullanarak ekrana bazı metinler yazdırdığımızı göreceksiniz.

@inherits ile @model'i aynı anda kullanmamız da mümkündür.

Person isimli bir Entity'miz olsun. Bu Entity'nin de Name diye bir property'si olsun. Person sınıfını da Controller tarafından doldurup View'e geri dönelim.

public IActionResult Index()
{
    var result = new person() {Name = "Ömer b. Hattab"};
    return View();
}

//abstract claas'ımızı biraz değiştirelim.
public abstract class CustomPage<TModel> : RazorPAge<TModel>
{
    public string Text {get; } = "View inherits kullanımı";
    public string JoinText(string ViewText)
    {
        return Text + " " + ViewText;
    } 
}

View'e modelimizitanımlayalım ve ekrana basalım.

@model örnek_proje.Entities.Person
@inherits örnek_proje.customPage<TModel>
@{
     Layout = null;
}

@Text <br />
@JoinText("-View") <br />
@Model.Name

projemizi çalıştırdığımızda bize:
View inherits kullanımı
View inherits kullanımı -View
Ömer b. Hattab, şeklinde bize çıktı verecektir.

CustomPage sınıfından aldığımız Text özelliğini ekrana yazdık. Daha sonra CustomPage sınıfındaki JoinText() metoduna bir string ifade gönderdikten sonra geri dönen değeri ekrana yazdık. En sonda modelimizden dönen Person sınıfımızın Name özelliğini ekrana yazdık. 

Functions

Razor sayfalarımıza fonksilonlar ekleyip bu fonksilonları kullanabiliriz.

Misalen, boş bir Index sayfamız olsun. Bu sayfaya GetArrivalTime isimli bir fonksiyon yazıp aşağıda da bu fonksiyonu kullanalım.

@functions{
   public string GetArrivalTime()
   {
      return "Arabanız 16.30'da kapınızda olacaktır."
   }
}

<div> Arabanın gelme vakti: @GetArrivalTime()</div>

Projeyi çalıştırdığımızda bize arabanın gelme vaktini ekrana yazacaktır.

bu şakilde Vİew konusunu bitirmiş olduk. bu yazıda  Views'te Değişkenler ve Kod Bloğu ile çalışmayı ele aldık. ileriki zamanlarda Asp .Net Core hakkında daha fazla konuyu ele alacağız. İlgilenenlerin faydalanması ümidiyle.

Blog Listesi