1. sayfa (Toplam 1 sayfa)

Index.cshtml

Gönderilme zamanı: 21 Ara 2020 02:00
gönderen AzS

@ Kullanımı

Gönderilme zamanı: 21 Ara 2020 02:01
gönderen AzS
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

Gönderilme zamanı: 21 Ara 2020 02:02
gönderen AzS
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: 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>
Kod blokları arasına kod yazma

IF Kullanımı

Gönderilme zamanı: 21 Ara 2020 02:03
gönderen AzS
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

Gönderilme zamanı: 21 Ara 2020 02:04
gönderen AzS

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ı

Gönderilme zamanı: 21 Ara 2020 02:05
gönderen AzS
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

Gönderilme zamanı: 21 Ara 2020 02:06
gönderen AzS
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ı

Gönderilme zamanı: 21 Ara 2020 02:07
gönderen AzS
Ekrana @ işareti yazdırmak gereken durumlarda @@ işareti koymak gerekir.

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>
@@ işareti kullanımı


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>
Boşluksuz şekilde @ işareti yazma

Dinamik Class Atama

Gönderilme zamanı: 21 Ara 2020 02:15
gönderen AzS
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.

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ı

Gönderilme zamanı: 21 Ara 2020 02:46
gönderen AzS
C# Kodu ile HMTL'ye metin yazdıracaksanız, bu durumda @: ifadesini kullanmak gerekir.

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>
@: 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.

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>
@: işareti ile etiket kapama ve açma

Region Kullanımı

Gönderilme zamanı: 22 Ara 2020 02:02
gönderen AzS
#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>