@ Kullanımı
Değişkenler ve Kod Bloğu
IF Kullanımı
If, else Kodları arasına HTML etiketleri kullanma
Foreach Kullanımı
Foreach'ten sonra if yazma
@@ Kullanımı
Dinamik Class Atama
Index.cshtml
@ Kullanımı
View dosyamızda server tarafından çalışan bir dil kullanmak istiyorsak kodumuzu @ işaretiyle başlatmalıyız.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body style="background-color:aqua">
Hoş geldiniz...<br/>
@DateTime.Now.AddDays(-1).ToString()
</body>
</html>Değişkenler ve Kod Bloğu
Kodlarımız çoğu zaman tek satırlık kodlar olmaz. Onun için kodlarımızı kod bloğu içine almalıyız. Önce @ işareti, sonra {} süslü parantez içine kodumuzu yazarız.
Kod blokları arasına kod yazma
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
// a v eb değişkenini tanımlayıp toplamını ekrana yazdırdığımız kodlar
@{
var a = 5;
var b = 7;
var toplam = a + b;
}
@toplam
</body>
</html>IF Kullanımı
View'in içinde C#'da olduğu gibi if kullanailiriz.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<!-- if kullanımı -->
@{
var d = DateTime.Now.Day;
var output = "";
if(d==20)
{
output = "Evet bugün ayın 21'i";
}
else
{
output = "Hayır bugün ayın 21'i değil";
}
}
@output;
</body>
</html>If, else Kodları arasına HTML etiketleri kullanma
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<!--Değişken tanımlamayıp html etiketleri arasından da sonucu yazdırabiliriz.-->
@{
var d = DateTime.Now.Day;
}
@if (d == 21)
{
<div>Evet bugün ayın 21'i</div>
}
else
{
<div>Hayır bugün ayın 21'i değil</div>
}
</body>
</html>Foreach Kullanımı
Bir değişkene isimlerden oluşan bir liste atadıktan sonra bu listenin içinde dönerek liste elemanlarını tarayıcı ekranına yazdırma.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<!-- Foreach Kulanımı-->
@{
var list = new List<string>() { "Ali", "Veli", "Hakan", "Hasan"};
}
@foreach (var item in list)
{
@item <br />
}
</body>
</html>Foreach'ten sonra if yazma
Foreach ile dönme kodunu yazdıktan sonra if ifadesi yazmak istersek tekrardan "@" işareti kullanmamız gerekmez, kullanılırsa hata verir.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<!-- Foreach ile döngü kodunu yazdıktan sonra if yazmak istersek tekrardan @ kullanmak gerekmez, kullanılırsa hata verir.-->
@{
var list = new List<string>() { "Ali", "Veli", "Hakan", "Hasan" };
}
@foreach (var item in list)
{
if (item!="Veli")
{
@item <br />
}
}
</body>
</html>@@ Kullanımı
Ekrana @ işareti yazdırmak gereken durumlarda @@ işareti koymak gerekir.
@@ işareti kullanımı
Ama metin içinde boşluk bırakmadan @ işareti kullanmak istenirse "@@" koymaya gerek yoktur, tek @ işareti yeterlidir.
Boşluksuz şekilde @ işareti yazma
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
Mail adreslerinin içinde @@ işareti bulunur
</body>
</html>Ama metin içinde boşluk bırakmadan @ işareti kullanmak istenirse "@@" koymaya gerek yoktur, tek @ işareti yeterlidir.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
xyz@xyz.com adresinden mail geldi.
</body>
</html>Dinamik Class Atama
Html etiketleriyle dinamik olarak class atayıp dinamik stiller yapabiliriz.
Örnek: Bir değişkende liste halinde sayılar yazıyoruz. Sayıların tek ve çift olmasına göre bir class ismi atansın ve class ismine göre bir stil alsın.
Sayı tek se kırmızı, çift ise mavi olarak tarayıcı ekranına yazar.
Örnek: Bir değişkende liste halinde sayılar yazıyoruz. Sayıların tek ve çift olmasına göre bir class ismi atansın ve class ismine göre bir stil alsın.
Sayı tek se kırmızı, çift ise mavi olarak tarayıcı ekranına yazar.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<style>
.oddNumber{
color:red
}
.evenNumber{
color:blue
}
</style>
@{
var numberList = new List<int>() { 14, 45, 32, 65, 87, 43 };
var className = "";
}
@foreach (var item in numberList)
{
className = item % 2 == 0 ? "evenNumber" : "oddNumber";
<div class="@className">@item</div>
}
</body>
</html>@: Kullanımı
C# Kodu ile HMTL'ye metin yazdıracaksanız, bu durumda @: ifadesini kullanmak gerekir.
@: Kullanımı
<li> etiketleri ile foreach kullanarak bazı ifadeler yazacaksanız yeni bir <li> etiket listesinin belirli bir elemanından sonra kullanmak istiyorsanız @: kullanmalısınız.
@: işareti ile etiket kapama ve açma
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@{
var names = new List<string>() { "Ali", "Hakan" };
}
@for (int i = 0; i < names.Count; i++)
{
var name = names[i];
//İsim:name ---> şeklinde yazılırsa hata verecektir
@:İsim:@name // şeklinde yazılmalıdır
}
</body>
</html><li> etiketleri ile foreach kullanarak bazı ifadeler yazacaksanız yeni bir <li> etiket listesinin belirli bir elemanından sonra kullanmak istiyorsanız @: kullanmalısınız.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@{
var words = new List<string>() {"Ali", "Veli", "Hakan", "Hasan" };
var a = 0;
}
<ul>
<li>
@foreach (var item in words)
{
a++;
if(a==3)
{
@:</li><li>
}
@item
}
</>
</ul>
</body>
</html>
Region Kullanımı
#region ifadesiyle kodumuzu ölümlere ayırıp düzene koyabiliriz.
Kod: Tümünü seç
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<!-- #region Ayın Sonu -->
@if (DateTime.Now.Day > 20)
{
<span>Ayın Sonuna Geldik</span>
}
<!-- #endregion-->
<!-- Ayın Başı -->
@if (DateTime.Now.Day < 10)
{
<span>Daha ayın başındayız</span>
}
<!-- #endregion -->
</body>
</html>