View'e Giriş
SelamünAleyküm, bu yazımızda View konusuna giriş yapmış olacağız, geçtiğimiz yazı itibari ile Controller konusunda yazdığımız son yazı olan Using kullanımı ve Action Dönüş Tipleri konusunu bitirdik, kısaca bu yazıda View oluşturma ve Razor Syntax'ın bazı detayları hakkında bilgi sahibi olacaksınız.
View, Controller katmanından aldığımız veriyi Razor yardımıyla html formatına dönüştürüp kullanıcıya görsel olarak sunduğumuz .cshtml, .vbhtml uzantılı dosyalardır.
Kullanıcı sizin backend tarafında ne yaptığınız ile pek ilgilenmez. Görsel olarak kullanıcıya sunulan ekran ile ilgilenir. Görsel olarak kullnıcıya sunulan ekran da bizim View katmanımızı temsil etmektedir. Kullanıcıya View katmanı yardımıyla görsel bir format sunabildiğimiz kullnıcıdan aldığımız bilgileri de uygulamamızın Controller katmanına yine bu katman yardımıyla sağlarız.
Misal olarak Controller katmanından, bir kargo sitesinden size kargonun gideceği yer ile ilgili bilgiler istenecek. Controller katmanından Türkiye'nin şehirleri, ilçeleri, mahalleleri, sokakları vs. bilgileri, kullnıcıya sunulması için View katmanına göndeririz. View katmanı, bu bilgileri size bir web sayfasında sunar. Siz de kargonun gideceği yeri bu bilgiler yardımıyla seçersiniz ve kaydet dediğinizde tekrardan Controller katmanına bilgiler gönderilir.
Bu katmanda server tarafında çalışabilrn dillerle çalışabildiğimiz gibi (C# gibi) client tarafında çalışabildiğimiz dillerle de çalışabiliyoruz. (Javascript gibi)
View Oluşturma
HomeController adında bir Controller'imiz olsun. Controller'e ait Index isminde bir Action metodumuz olsun. Action metoduna sağ tıklayıp, Add View seçeneğini seçerek Action metoduna ait bir View dosyası oluşturalım. Add View'e bastıktan sonra gelen ekranda altta kalan seçeneklerden hiçbiri işaretli olamayacak şekilde Add butonuna tıklıyoruz. Add butonuna bastıktan sonra, Solution Explorer kısmında oluşturduğumuz View dosyasına baktığımızda, View klasörünün altundaki Home (Controller ismi) klasörünün altında Index (Action ismi) isimli .cshtml uzantılı bir dosya oluştuğunu göreceksiniz. Çift tıklayrak oluşturduğumuz View dosyasına göz atabiliriz.
Razor Syntax
View katmanını yazarken hem client tarafında çalışan diller, hem de server tarafında çalışan dilleri kullanabildiğimizi sylemniştik. bu işlemleri Razor yardımıyla yapmaktayız. Razor dinamik yapılar kullanarak html ile dinamik olarak değişebilecek görüntü elde etme biçimidir.
@ Kullanımı
View dosyamızda server tarafında çalışan dili kullanmak istiyor isek kodumuz "@" işareti ile başlamalıdır. Misal verecek olursak, Normalde C# ile yazdığımız "DateTime.Now.AddDayas(-1).ToString()" kodumuzu burada yazmayı deneyelim. <body> tagleri arasına @ işareti koyalım ve kodumuzu yazalım. Kodumuzu yazarken görülecektir ki Controller tarafında yazılan kodda olduğu gibi Visual Studio IDE'si biz yazabileceğimiz kodlar ile alakalı seçenekler sunacaktır.
Kodumuzu yazalım ve projeyi F5 tuşuyla çalıştırdığımızda ekrana bir önckei günün tarihini yazacaktır.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@DateTime.Now.AddDays(-1).ToString()
</body>
</html>
Tarayıcı ekranında düne ait tarihin bilgisi yazılacaktır.
Değişkenler ve Kod Bloğu ile Çalışma
Kodalrımıız her zaman tek satırlık kodlar olmaz; bu yüzden kodlarımızı kod bloğunun içine almamız gerekir. Önce @ işareti koyarız, sonra süslü parantezler içinde "{ }" kodumuzu yazarız.
<body>
@{
var a = 5;
var b = 7;
var toplam = a + b;
}
@toplam
<body>
Kodumuzda a ile b değişkeni tanımlayıp onu toplam adındaki değişkene atadık. Daha sonra toplam değişkenini de ekrana basmasını sağladık. Ekranaçıktısı olarak bize 12 değerini yazacaktır.
| Not: |
View kısmında server tarafında çalışacak dillerle kod yazmamaya özen gösterirseniz View kodunuz daha okunaklı olacaktır. Onun yerine Controller katmanından gelecek veriyi mümkün oldukça hazır bir şekilde View kısmına göndermeniz sizi View kısmındaki kod karmaşasından kurtaracaktır. |
If Kullanımı
View'in içinde C#'ta olduğu gibi if ifadeleri ile çalışabiliriz. Misal olarak, bugünün ayın kaçı olduğunu belitecek kodu bir değişkene atalım ve bu değişkenin değerine göre if ifadeleri ile ekrana bir şeyler yazalım.
<body>
@{
var d = DateTİme.Now.Day;
var output = "";
if ( d == 25)
{
output = "Bugün ayın 25'i";
}
else
{
output = "Bugün ayın 25'i değil";
}
}
@output
</body>
Ekrana bu iki sorgudan birini yazacaktır.
Peki, yapmış olduğumuz bu örnekte olduğu ekrana yazacağımız metni bir değikene atıp da mı ekrana yazdırmak zorundayız? Cevabı hayır, yani böyle bir mecburiyet yok. if ifadesinden sonrada html tagları kullanıp ekrana istediğimiz metinleri yazabiliriz. Misal olarak if ile else kod bloklaro-ının arasına html tagları kullanarak yapalım.
<body>
@{
var d = DateTİme.Now.Day;
var output = "";
if ( d == 25)
{
<di> "Bugün ayın 25'i" </div>
}
else
{
<div> "Bugün ayın 25'i değil" </div>
}
}
</body>
Kodu çalıştırdığımızda aynı sonucu elde ederiz.
Foreach Kullanımı
Şimdi ise bir listenin içinde dönme komutu olan foreach kullnımını görelim.
<body>
@{
var list = new List<string>() {"Şevket", "Naci", "Mustafa", "İfrigül"};
}
@foreach (var item in list)
{
@item <br />
}
</body>
Foreach ile dönme kodunu yazdıktan sonra if ifadesi yazmak istersek tekrardan "@" işareti kullanmamız gerekmez. (Kullanırsak hata verir.)
<body>
@{
var list = new List<string>() {"Şevket", "Naci", "Mustafa", "İfrigül"};
}
@foreach (var item in list)
{
if(item != "Şevket")
{
@item <br />
}
}
</body>
@@ Kullanımı
Ekrana sadece @ işareti yazdırmamız gerektiğinde @@ işareti koymanız yeterli olacaktır.
<body>
E-Posta adreslerinin içinde @@ işareti bulunur.
</body>
Ama metin içerisinde boşluk bırakmadan @ işareti kullanmak isterseniz "@@" işareti işareti koymanıza gerek yoktur, tek @ işareti koymanz yeterli olacaktır.
<body>
hayravesileolmak@yandex.com adresinden bize e-posta gönderildi.
</body>
Dinamik Class Atama
Html taglarımıza dinamik olarak class atayarak dinamik stiller elde edebiliriz. Misal olarak, bir değişkenimizde liste halinde sayılar olsun. Sayının tek veya çift olmasına göre bir class ismi atansın. Class ismine göre de bir stil alsın.
<head>
<style>
.oddNumber{
color: red;
}
.eventNumber{
color: blue;
}
</style>
</head>
<body>
@{
var numberList = new List<int>() {14, 45, 32, 65, 87, 43}
var className = "";
}
@foreach(var item in numberList)
{
className = item % 2 == 0 ? "eventNumber" : "oddNumber";
<div class="@className">@item</div>
}
</body>
sayı tek ise kırmızı olarak, çift ise mavi olarak sayıyı tarayıcı ekranına yazacaktır.
@: Kullanımı
C# kodu yazar iken Html'e metin yazdırmaya başlayacaksak, bu durumda @: ifadesini kullanmamız gerekir.
<body>
@{
var names = new List<string>() { "Naci", "Mustafa" };
}
@for(var i = 0; i < names.Count; i++)
{
var name = names[i];
// Hatalı kod
İsim: @name
}
</body>
Ekrandaki kodda görüldüğü üzere "İsim: {name}" yazarak her bir ismin önüne "İsim" yazıp öyle göstermek istedik. Ama bu kad hata verecektir. "İsim" kelimesini C# kodu gibi algılayacaktır. Dolayısıyla uygulamamız hata verecektir. Bunun yerine aşağıdaki gibi yazmak istediğimiz metnin başına @: yazmamız hatayı düzeltir.
<body>
@{
var names = new List<string>() { "Naci", "Mustafa" };
}
@for(var i = 0; i < names.Count; i++)
{
var name = names[i];
@:İsim: @name
}
</body>
<li> tagları ile foreach kullanarak bazı yazacaksınız, ama yeni bir <li> tagını listenin belirli bir elemanından sonra kullnmak istiyorsanız aynı şekilde @: işaretini kullanmalısınız.
<body>
@{
var words = new List<string>() { "Naci", "Mustafa", "Ali", "Kazım"};
var a = 0;
}
<ul>
<li>
@foreach(var item in words)
{
a++;
if(a == 3)
{
@: </li><li>
}
@item
}
</>
<ul>
</body>
Model Kullanımı
Controller tarafından bir modelimizi View'e gönderip orada işlemlerden geçirip ekrana yazabiliriz. Misal olarak, il etapta Entities adında bir klasörümüz olsun. Onun altında News diye bir Class dosyası oluşturalım ve News'e ait özellikleri tanımlayalım. (Entities genel olarak bizim veri tabanımıza karşılık gelmekte.)
public class News
{
public long Id { get; set; }
public string Title { get; set; }
public bool Approve { get; set; }
}
News adlı Entity'ye bazı özellikler tanımladık. Biz örnek olsun diye Controller tarafından bu modele bazı verileri atayacağız. Normal koşullar altında Controller taraflı veri ataması yapmak doğru bir davranış değildir. Sebebi ise kod okunabilirliğini zorlaştırmasıdır. Normal koşullar altında verilerin okunması, yazılması vs. ayrı bir class dosyası içerisnde yapılmalıdır.
public class HomeController : Controller
{
public IActionResult Index()
{
var news = new List<News>()
{
new News(){Id = 1, Title = "6 şubat'ta Kahramanmaraş Elbistan ve Pazacık ileçelerinde deprem meydana geldi.", Approve = true},
new News(){Id = 2, Title = "Eyt artık mecliste görüşülecek.", Approve = true},
new News(){Id = 3, Title = "Bugün Mardin de sıcak bir havanın hakim olması bekleniyor.", Approve = false},
new News(){Id = 4, Title = "Samsung Z-Fold 5'i ne zaman tanıtılacak?", Approve = true}
};
return View(news);
}
}
Atadığımız verileri, return View(news) şeklinde kullanarak View dosyamızda geri döndürelim ve View dosyasında yazdırmak üzere gereken kodları yazalım.
@*Dödürdüğümüz modeli tanımlıyoruz*@
@model List<örnek_proje.Entities.News>
@{
Layout = null;
}
<div>
<ul>
@*Modelimizin içinde dönerek ekrana basıyoruz.*@
@foreach(var item in Model)
{
if(item.Approve)
{
<li>
<span> @item.Id - </span>
<span> @item.Title - </span>
<span> @item.Approve </span>
</li>
}
}
</ul>
</div>
Görüleceği üzere yukarıda döndürdüğümüz modeli tanımladık ve her bir <li> tag'ına liste halindeki modelimizi tek tek ekrana yazdırdık. Çalıştırıldığında Approve değeri true olan değerler ekrana basılacaktır.
Try - Catch - Finally
Oluşturacağımız View dosyalarında Try-Catch-Finally hata ayıklamakodlarını kullanarak işlemler yapabiliriz. Misal olarak, View'de List<string> tipinde bir değişken yazalım ve null değerini atayalım. Ve Try bloğunde First() koduyla ilk değeri bir değişkene atamaya çalışalım. Değer null olduğundan, ilk değeri almayacak ve hata verecek. Verilen hatayı Catch bloğunda ekrana yszdırdıktan sonra Finally bloğunda da işleme noktayı koyalım.
@{
Layout = null;
List<string> list = null;
}
<div>
@try
{
var x = list.Firs();
}
catch (Exception ex)
{
<span>Hata: @ex.Message</span>
}
finally
{
<br /> <span> İşlem tamalandı</span>
}
</div>
Ekrana "Hata: Value cannot be null. Parameter name: source İşlem tamamlandı" şeklinde olacaktır.
Bu yazımız şimdilik bu kadar, bu yazımızda View'e giriş yaparak Razor Syntax'ı ve bazı Değişkenler ve Kod Bloklarına giriş yapmış olduk, diğer yazımızda ise Değişkenler ve Kod Bloklarının devamını ele alacağız. İlgilenenlerin faydalanması ümidiyle.
Blog Listesi