Razor ASP.NET Core için söz dizimi başvurusu

2025-03-27

Rick Anderson, Taylor Mullen ve Dan Vicarel tarafından

Razor web sayfalarına .NET tabanlı kod eklemeye yönelik bir işaretleme söz dizimidir. Razor dizimi Razor işaretleme, C# ve HTML'den oluşur. İçeren Razor dosyaların genellikle bir .cshtml dosya uzantısı vardır. Razor ayrıca Razor bileşen dosyalarında () bulunur. Razor söz dizimi, Angular, React, VueJs ve Svelte gibi çeşitli JavaScript tek sayfalı uygulama (SPA) çerçevelerinin şablon oluşturma altyapılarına benzer. Daha fazla bilgi için bkz . Bu makalede açıklanan özellikler ASP.NET Core 3.0 itibarıyla kullanımdan kaldırılmış durumdadır.

Söz Dizimini Kullanarak ASP.NET Web Programlamaya Razor Giriş, söz dizimi ile Razor programlamanın birçok örneğini sağlar. Konu ASP.NET Core yerine ASP.NET için yazılmış olsa da örneklerin çoğu ASP.NET Core için geçerlidir.

HTML İşleme

Varsayılan Razor dil HTML'dir. Razor işaretlemesinden HTML oluşturma, bir HTML dosyasından HTML oluşturmaktan farklı değildir. Dosyalardaki .cshtmlRazor HTML işaretlemesi, sunucu tarafından değiştirilmeden işlenir.

Razor söz dizimi

Razor C# destekler ve HTML'den @ C# 'ye geçiş yapmak için simgesini kullanır. Razor C# ifadelerini değerlendirir ve bunları HTML çıktısında oluşturur.

Bir @ simgeden sonra bir Razor rezerve edilmiş anahtar kelime gelirse, Razor-özel işaretlemeye geçer. Aksi takdirde, düz HTML'ye geçiş olur.

İşaretlemedeki @ simgesinden Razor kaçınmak için ikinci bir @ simge kullanın:

<p>@@Username</p>

Kod, html biçiminde tek @ bir simgeyle işlenir:

<p>@Username</p>

HTML öznitelikleri ve e-posta adreslerini içeren içerik simgeyi @ bir geçiş karakteri olarak işlemez. Aşağıdaki örnekteki e-posta adresleri, Razor tarafından ayrıştırılmadan kalır.

<a href="mailto:Support@contoso.com">Support@contoso.com</a>

Ölçeklenebilir Vektör Grafikleri (SVG)

SVG foreignObject öğeleri desteklenir:

@{
    string message = "foreignObject example with Scalable Vector Graphics (SVG)";
}

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black" 
        fill="none" />
    <foreignObject x="20" y="20" width="160" height="160">
        <p>@message</p>
    </foreignObject>
</svg>

Örtük Razor ifadeler

Örtük Razor ifadeler @ ile başlar, ardından C# kodu:

<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>

C# await anahtar sözcüğü dışında örtük ifadeler boşluk içermemelidir. C# deyiminin net bir sonu varsa boşluklar birbirine karışabilir:

<p>@await DoSomething("hello", "world")</p>

Gizli ifadeler C# jeneriklerini içeremez, çünkü köşeli parantezler içindeki karakterler (<>) HTML etiketi olarak yorumlanır. Aşağıdaki kod geçerli değil :

<p>@GenericMethod<int>()</p>

Yukarıdaki kod aşağıdakilerden birine benzer bir derleyici hatası oluşturur:

"int" öğesi kapatılamıyordu. Tüm öğeler ya kendi kendine kapanan olmalı ya da eşleşen bir bitiş etiketine sahip olmalıdır.
'GenericMethod' yöntem grubu temsilci olmayan 'object' türüne dönüştürülemiyor. Yöntemini çağırmayı amaçladınız mı?'

Genel yöntem çağrıları, açık bir Razor veya bir içinde sarmalanmalıdır.

Açık Razor ifadeler

Açık Razor ifadeler dengeli parantez içeren bir @ simgeden oluşur. Geçen haftanın saatini işlemek için aşağıdaki Razor işaretleme kullanılır:

<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>

Parantez içindeki @() tüm içerik değerlendirilir ve çıkışa işlenir.

Önceki bölümde açıklanan örtük ifadeler genellikle boşluk içeremez. Aşağıdaki kodda, geçerli saatten bir hafta çıkarılamaz:

<p>Last week: @DateTime.Now - TimeSpan.FromDays(7)</p>

Kod aşağıdaki HTML'yi işler:

<p>Last week: 7/7/2016 4:39:52 PM - TimeSpan.FromDays(7)</p>

Açık ifadeler, metni bir ifade sonucuyla birleştirmek için kullanılabilir:

@{
    var joe = new Person("Joe", 33);
}

<p>Age@(joe.Age)</p>

Açık ifade olmadan, Age@joe.Age e-posta adresi olarak kabul edilir ve Age@joe.Age işlenir. Açık bir ifade olarak yazıldığında Age33 oluşturulur.

Açık ifadeler, dosyalardaki .cshtml genel yöntemlerden çıktıyı işlemek için kullanılabilir. Aşağıdaki işaretleme, C# genelinin köşeli ayraçlarının neden olduğu hatanın nasıl düzeltileceğini göstermektedir. Kod açık bir ifade olarak yazılır:

<p>@(GenericMethod<int>())</p>

İfade kodlama

Bir dize olarak değerlendirilen C# ifadeleri HTML ile kodlanır. IHtmlContent olarak değerlendirilen C# ifadeleri IHtmlContent.WriteTo aracılığıyla doğrudan işlenir. C# ifadeleri IHtmlContent olarak değerlendirilmediğinde, ToString tarafından bir dizeye dönüştürülür ve işlenmeden önce kodlanır.

@("<span>Hello World</span>")

Yukarıdaki kod aşağıdaki HTML'yi işler:

&lt;span&gt;Hello World&lt;/span&gt;

HTML tarayıcıda düz metin olarak gösterilir:

Merhaba Dünya

HtmlHelper.Raw çıkış kodlanmamış ancak HTML işaretlemesi olarak işlenmiştir.

Uyarı

Sağlıksız kullanıcı girişinde kullanmak HtmlHelper.Raw bir güvenlik riskidir. Kullanıcı girişi kötü amaçlı JavaScript veya diğer açıklardan yararlanma içerebilir. Kullanıcı girişini temizlemek zordur. Kullanıcı girişiyle kullanmaktan HtmlHelper.Raw kaçının.

@Html.Raw("<span>Hello World</span>")

Kod aşağıdaki HTML'yi işler:

<span>Hello World</span>

Razor kod blokları

Razor kod blokları @ ile başlar ve {} ile çevrelenir. İfadelerden farklı olarak, kod bloklarının içindeki C# kodu işlenmez. Bir görünümdeki kod blokları ve ifadeler aynı kapsamı paylaşır ve sırayla tanımlanır:

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

@{
    quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.";
}

<p>@quote</p>

Kod aşağıdaki HTML'yi işler:

<p>The future depends on what you do today. - Mahatma Gandhi</p>
<p>Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.</p>

Kod bloklarında, şablon oluşturma yöntemleri olarak görev yapmak için yerel işlevleri işaretleme ile bildirin.

@{
    void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }

    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

Kod aşağıdaki HTML'yi işler:

<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

Dolaylı geçişler

Kod bloğundaki varsayılan dil C# şeklindedir, ancak Sayfa HTML'ye Razor geri dönebilir:

@{
    var inCSharp = true;
    <p>Now in HTML, was in C# @inCSharp</p>
}

Açık sınırlandırılmış geçiş

HTML işlemesi gereken bir kod bloğunun alt bölümü tanımlamak için, işleme karakterlerini etiketiyle çevreleyin Razor<text> :

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <text>Name: @person.Name</text>
}

Bir HTML etiketiyle çevrelenmemiş HTML'yi işlemek için bu yaklaşımı kullanın. HTML ve Razor etiketi olmadan, bir Razor çalışma zamanı hatası oluşur.

<text> etiketi, içerik işlenirken boşluğu denetlemek için kullanışlıdır:

Yalnızca etiket arasındaki <text> içerik işlenir.
HTML çıkışında <text> etiket görünmeden önce veya sonra boşluk yoktur.

Açık çizgi geçişi

Bir kodun içindeki satırın tamamını HTML olarak işlemek için @: söz dizimini kullanın:

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    @:Name: @person.Name
}

@: kodda yer almadığında, bir Razor çalışma zamanı hatası oluşturulur.

Bir @ dosyadaki ek Razor karakterler, bloğun ilerleyen bölümlerindeki deyimlerde derleyici hatalarına neden olabilir. Bu ekstra @ derleyici hataları:

Gerçek hata bildirilen hatadan önce oluştuğundan anlaşılması zor olabilir.
Birden çok örtük ve açık ifadeyi tek bir kod bloğunda birleştirdikten sonra yaygındır.

Koşullu öznitelik işleme

Razor gerekli olmayan öznitelikleri otomatik olarak atlar. Eğer geçirilen değer null veya false ise, öznitelik işlenmez.

Örneğin, aşağıdaki Razor işaretlemeyi göz önünde bulundurun:

<div class="@false">False</div>
<div class="@null">Null</div>
<div class="@("")">Empty</div>
<div class="@("false")">False String</div>
<div class="@("active")">String</div>
<input type="checkbox" checked="@true" name="true" />
<input type="checkbox" checked="@false" name="false" />
<input type="checkbox" checked="@null" name="null" />

Yukarıdaki Razor işaretleme aşağıdaki HTML'yi oluşturur:

<div>False</div>
<div>Null</div>
<div class="">Empty</div>
<div class="false">False String</div>
<div class="active">String</div>
<input type="checkbox" checked="checked" name="true">
<input type="checkbox" name="false">
<input type="checkbox" name="null">

Razor, data- özniteliklerini değerleri null veya false ise korur.

Aşağıdaki Razor işaretlemeyi göz önünde bulundurun:

<div data-id="@null" data-active="@false"></div>

Yukarıdaki Razor işaretleme aşağıdaki HTML'yi oluşturur:

<div data-id="" data-active="False"></div>

Denetim yapıları

Denetim yapıları, kod bloklarının bir uzantısıdır. Kod bloklarının tüm yönleri (işaretlemeye geçiş, satır içi C#) aşağıdaki yapılara da uygulanır:

Koşullar `@if, else if, else, and @switch`

@if kod çalıştırıldığında denetimler:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

else ve else if için @ simgesine ihtiyaç yoktur.

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else if (value >= 1337)
{
    <p>The value is large.</p>
}
else
{
    <p>The value is odd and small.</p>
}

Aşağıdaki işaretlemede switch deyiminin nasıl kullanılacağı gösterilmektedir:

@switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number wasn't 1 or 1337.</p>
        break;
}

Döngü `@for, @foreach, @while, and @do while`

Şablonlu HTML, döngü kontrol ifadeleriyle işlenebilir. Kişi listesini işlemek için:

@{
    var people = new Person[]
    {
          new Person("Weston", 33),
          new Person("Johnathon", 41),
          ...
    };
}

Aşağıdaki döngü ifadeleri desteklenir:

@for

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@foreach

@foreach (var person in people)
{
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@while

@{ var i = 0; }
@while (i < people.Length)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
}

@do while

@{ var i = 0; }
@do
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
} while (i < people.Length);

Bileşik `@using`

C# dilinde bir using ifadesi, bir nesnenin atıldığından emin olmak için kullanılır. içinde Razor, ek içerik içeren HTML Yardımcıları oluşturmak için aynı mekanizma kullanılır. Aşağıdaki kodda, HTML Yardımcıları <form> ifadesiyle bir @using etiketi oluşturur:

@using (Html.BeginForm())
{
    <div>
        <label>Email: <input type="email" id="Email" value=""></label>
        <button>Register</button>
    </div>
}

`@try, catch, finally`

Özel durum işleme C# ile benzerdir:

@try
{
    throw new InvalidOperationException("You did something invalid.");
}
catch (Exception ex)
{
    <p>The exception message: @ex.Message</p>
}
finally
{
    <p>The finally statement.</p>
}

`@lock`

Razor kilit deyimleriyle kritik bölümleri koruma özelliğine sahiptir:

@lock (SomeLock)
{
    // Do critical section work
}

Açıklamalar

Razor C# ve HTML açıklamalarını destekler:

@{
    /* C# comment */
    // Another C# comment
}
<!-- HTML comment -->

Kod aşağıdaki HTML'yi işler:

<!-- HTML comment -->

Razor açıklamalar, web sayfası işlenmeden önce sunucu tarafından kaldırılır. Razor , açıklamaları sınırlandırmak için kullanır @* *@ . Aşağıdaki kod yorum satırına alındığı için sunucu herhangi bir işaretleme oluşturmaz.

@*
    @{
        /* C# comment */
        // Another C# comment
    }
    <!-- HTML comment -->
*@

Yönergeler

Razor yönergeleri, @ sembolünden sonra gelen ayrılmış anahtar sözcüklerle belirtilen örtük ifadelerle temsil edilir. Yönergesi genellikle bir görünümün derlenme şeklini veya işlevlerini değiştirir.

Bir görünüm için kod Razor oluşturmayı anlamak, yönergelerin nasıl çalıştığını anlamayı kolaylaştırır.

@{
    var quote = "Getting old ain't for wimps! - Anonymous";
}

<div>Quote of the Day: @quote</div>

Kod aşağıdakine benzer bir sınıf oluşturur:

public class _Views_Something_cshtml : RazorPage<dynamic>
{
    public override async Task ExecuteAsync()
    {
        var output = "Getting old ain't for wimps! - Anonymous";

        WriteLiteral("/r/n<div>Quote of the Day: ");
        Write(output);
        WriteLiteral("</div>");
    }
}

Bu makalenin devamında, Bir görünüm için oluşturulan C# sınıfını Razor inceleme bölümünde, oluşturulan bu sınıfın nasıl görüntüleyebileceğiniz açıklanır.

`@attribute`

yönergesi @attribute , verilen özniteliği oluşturulan sayfanın veya görünümün sınıfına ekler. Aşağıdaki örnek özniteliğini [Authorize] ekler:

@attribute [Authorize]

Yönerge, @attribute bir Razor bileşende sabit tabanlı yol şablonu sağlamak için de kullanılabilir. Aşağıdaki örnekte, bir bileşendeki @page yönergesi, @attribute içinde Constants.CounterRoute yönergesi ve uygulamanın başka bir yerinde "/counter" olarak ayarlanan sabit tabanlı yol şablonuyla değiştirilir.

- @page "/counter"
+ @attribute [Route(Constants.CounterRoute)]

`@code`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

Blok, @code bir bileşenin bir Razor bileşene C# üyeleri (alanlar, özellikler ve yöntemler) eklemesini sağlar:

@code {
    // C# members (fields, properties, and methods)
}

Razor bileşenleri için @code, @functions'nin bir takma adıdır ve @functions'e tercih edilir. Birden fazla @code blok kullanılabilir.

`@functions`

yönergesi @functions , oluşturulan sınıfa C# üyeleri (alanlar, özellikler ve yöntemler) eklenmesini sağlar:

@functions {
    // C# members (fields, properties, and methods)
}

Bileşenlerde, C# üyeleri eklemek için Razor yerine tercih edin.

Örneğin:

@functions {
    public string GetHello()
    {
        return "Hello";
    }
}

<div>From method: @GetHello()</div>

Kod aşağıdaki HTML işaretlemesini oluşturur:

<div>From method: Hello</div>

Aşağıdaki kod, oluşturulan Razor C# sınıfıdır:

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.Razor;

public class _Views_Home_Test_cshtml : RazorPage<dynamic>
{
    // Functions placed between here 
    public string GetHello()
    {
        return "Hello";
    }
    // And here.
#pragma warning disable 1998
    public override async Task ExecuteAsync()
    {
        WriteLiteral("\r\n<div>From method: ");
        Write(GetHello());
        WriteLiteral("</div>\r\n");
    }
#pragma warning restore 1998

@functions yöntemleri, işaretlemeye sahip olduklarında şablon oluşturma yöntemleri olarak görev görür:

@{
    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

@functions {
    private void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }
}

Kod aşağıdaki HTML'yi işler:

<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

`@implements`

yönergesi @implements , oluşturulan sınıf için bir arabirim uygular.

Aşağıdaki örnek, System.IDisposable uygulayarak Dispose yönteminin çağrılabilmesini sağlar:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

    public void Dispose() => _isDisposed = true;
}

`@inherits`

yönergesi @inherits , görünümün devraldığı sınıfın tam denetimini sağlar:

@inherits TypeNameOfClassToInheritFrom

Aşağıdaki kod özel Razor bir sayfa türüdür:

using Microsoft.AspNetCore.Mvc.Razor;

public abstract class CustomRazorPage<TModel> : RazorPage<TModel>
{
    public string CustomText { get; } = 
        "Gardyloo! - A Scottish warning yelled from a window before dumping" +
        "a slop bucket on the street below.";
}

CustomText bir görünümde görüntülenir:

@inherits CustomRazorPage<TModel>

<div>Custom text: @CustomText</div>

Kod aşağıdaki HTML'yi işler:

<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

@model ve @inherits aynı görünümde kullanılabilir. @inherits görünümün içeri aktaracağı bir _ViewImports.cshtml dosyada olabilir:

@inherits CustomRazorPage<TModel>

Aşağıdaki kod, güçlü türlü bir görünüm örneğidir.

@inherits CustomRazorPage<TModel>

<div>The Login Email: @Model.Email</div>
<div>Custom text: @CustomText</div>

Modelde "rick@contoso.com" geçirilirse, görünüm aşağıdaki HTML işaretlemesini oluşturur:

<div>The Login Email: rick@contoso.com</div>
<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

`@inject`

yönergesi, @inject Page'in Razor hizmet kapsayıcısından görünüme bir hizmet eklemesini sağlar. Daha fazla bilgi için bkz . Görünümlere bağımlılık ekleme.

`@layout`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

@layout yönergesi, içinde bir Razor yönergesi bulunan yönlendirilebilir @page bileşenleri için bir düzen belirtir. Düzen bileşenleri, kod yinelemesini ve tutarsızlığı önlemek için kullanılır. Daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor düzenleri.

`@model`

Bu senaryo yalnızca MVC görünümleri ve Razor Sayfaları (.cshtml) için geçerlidir.

yönergesi @model , bir görünüme veya sayfaya geçirilen modelin türünü belirtir:

@model TypeNameOfModel

Bireysel hesaplarla oluşturulan bir ASP.NET Core MVC veya Razor Sayfaları uygulamasında, Views/Account/Login.cshtml aşağıdaki model bildirimi yer alır:

@model LoginViewModel

Oluşturulan sınıf, RazorPage<LoginViewModel> öğesinden devralır.

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor görünüme geçirilen modele erişmek için bir Model özellik sunar:

<div>The Login Email: @Model.Email</div>

yönergesi @model özelliğin Model türünü belirtir. Yönerge, görünümün türetildiği oluşturulan sınıfı T içinde RazorPage<T> belirtir. yönergesi @model belirtilmezse özelliği Model türündedir dynamic. Daha fazla bilgi için bkz. Strongly typed models and the @model keyword.

`@namespace`

Yönerge @namespace :

Oluşturulan Razor sayfanın, MVC görünümünün veya Razor bileşenin sınıfının ad alanını ayarlar.
Dizin ağacındaki en yakın içeri aktarımlar dosyasından sayfaların, görünümlerin veya bileşen sınıflarının kök türetilmiş ad alanlarını ayarlar: _ViewImports.cshtml (görünümler veya sayfalar) veya _Imports.razor (Razor bileşenleri).

@namespace Your.Namespace.Here

Razor Aşağıdaki tabloda gösterilen Sayfalar örneği için:

Her sayfa Pages/_ViewImports.cshtml öğesini içe aktarır.
Pages/_ViewImports.cshtml içerir @namespace Hello.World.
Her sayfa, ad alanının kökü olarak Hello.World öğesine sahiptir.

Sayfa	Ad Alanı
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

Önceki ilişkiler, MVC görünümleri ve Razor bileşenleriyle kullanılan dosyaları içeri aktarmak için geçerlidir.

Birden çok içeri aktarma dosyasının yönergesi @namespace olduğunda, kök ad alanını ayarlamak için dizin ağacındaki sayfaya, görünüme veya bileşene en yakın dosya kullanılır.

EvenMorePages Klasördeki yukarıdaki örnekte bir içeri aktarma dosyası @namespace Another.Planet ile varsa (veya Pages/MorePages/EvenMorePages/Page.cshtml dosyası @namespace Another.Planet içeriyorsa), sonuç aşağıdaki tabloda gösterilir.

Sayfa	Ad Alanı
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Another.Planet`

`@page`

yönergesinin @page , göründüğü dosyanın türüne bağlı olarak farklı etkileri vardır. Yönerge:

.cshtml dosyasında, dosyanın bir Razor Sayfa olduğunu gösterir. Daha fazla bilgi için bkz Özel yollar ve ASP.NET Core'da Razor Sayfalara Giriş.
Bir Razor bileşenin istekleri doğrudan işlemesi gerektiğini belirtir. Daha fazla bilgi için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

`@preservewhitespace`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

(varsayılan) olarak false ayarlandığında, bileşenlerden Razor (.razor) işlenen işaretlemedeki boşluk şu durumlarda kaldırılır:

Bir öğe içinde başta veya sonda olma.
Bir RenderFragment parametre içinde baştaki veya sondaki. Örneğin, alt öğe içeriği başka bir bileşene aktarılır.
@if veya @foreach gibi bir C# kod bloğunun önünde veya ardından yer alıyorsa.

`@rendermode`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

Bir Razor bileşenin işleme modunu ayarlar:

InteractiveServer: Blazor Server kullanarak etkileşimli sunucu işleme uygular.
InteractiveWebAssembly: Etkileşimli WebAssembly işleme, Blazor WebAssembly kullanarak uygular.
InteractiveAuto: Başlangıçta Blazor Server kullanarak etkileşimli WebAssembly işlemesi uygular ve ardından paket Blazor indirildikten sonra sonraki ziyaretlerde WebAssembly kullanarak etkileşimli WebAssembly işlemesi uygular.

Bileşen örneği için:

<... @rendermode="InteractiveServer" />

Bileşen tanımında:

@rendermode InteractiveServer

Not

Blazor şablonlar, uygulamanın using dosyasında RenderMode için daha kısa _Imports söz dizimi için Components/_Imports.razor statik bir @rendermode yönerge içerir:

@using static Microsoft.AspNetCore.Components.Web.RenderMode

Yukarıdaki yönerge olmadan, bileşenler söz diziminde RenderMode statik @rendermode sınıfı açıkça belirtmelidir:

<Dialog @rendermode="RenderMode.InteractiveServer" />

Yönerge/yönerge özniteliğiyle ön kayıt özelliğini devre dışı bırakma yönergeleri de dahil olmak üzere daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

`@section`

Bu senaryo yalnızca MVC görünümleri ve Razor Sayfaları (.cshtml) için geçerlidir.

@section yönergesi, görünümlerin veya sayfaların HTML sayfasının farklı bölümlerinde içerik işlemesini sağlamak amacıyla MVC ve Sayfalar Razor şablonları ile birlikte kullanılır. Daha fazla bilgi için ASP.NET Core'da Düzen konusuna bakın.

`@typeparam`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

@typeparam yönergesi, oluşturulan bileşen sınıfı için bir genel tür parametresi bildirir:

@typeparam TEntity

Tür kısıtlamaları olan where genel türler desteklenir:

@typeparam TEntity where TEntity : IEntity

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

`@using`

yönergesi @using , C# using yönergesini oluşturulan görünüme ekler:

@using System.IO
@{
    var dir = Directory.GetCurrentDirectory();
}
<p>@dir</p>

BileşenlerdeRazor, @using hangi bileşenlerin kapsamda olduğunu da denetler.

Yönerge öznitelikleri

Razor yönerge öznitelikleri, sembolden sonra @ ayrılmış anahtar sözcükler içeren örtük ifadelerle temsil edilir. Yönerge özniteliği genellikle bir öğenin derlenmiş veya işlev biçimini değiştirir.

`@attributes`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

@attributes bir bileşenin bildirilmeyen öznitelikleri işlemesine izin verir. Daha fazla bilgi için bkz. ASP.NET Core Blazor öznitelik yayılımı ve rastgele parametreler.

`@bind`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

Bileşenlerde veri bağlama özniteliğiyle @bind gerçekleştirilir. Daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor veri bağlama.

`@bind:culture`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

@bind:culture ve @bind özniteliklerini birlikte kullanarak bir değerin ayrıştırılması ve biçimlendirilmesi için System.Globalization.CultureInfo sağlayın. Daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor genelleştirme ve yerelleştirme.

`@formname`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

@formname, bir bileşenin düz HTML formuna veya Razor (EditForm) temel alınarak oluşturulan bir forma Editform form adı atar. @formname değeri, aşağıdaki durumlarda form çakışmalarını önlemek için benzersiz olmalıdır:

Form, birden çok form içeren bir bileşene yerleştirilir.
Form, birden çok formu olan bir bileşen için genellikle NuGet paketi olan bir dış sınıf kitaplığından kaynaklanır ve uygulama yazarı, kitaplığın kaynak kodunu, bileşendeki başka bir form tarafından kullanılan addan farklı bir dış form adı ayarlamak için denetlemez.

Daha fazla bilgi ve örnek için bkz . ASP.NET Temel Blazor formlara genel bakış.

`@on{EVENT}`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

Razor bileşenler için olay işleme özellikleri sağlar. Daha fazla bilgi için bkz . ASP.NET Core Blazor olay işleme.

`@on{EVENT}:preventDefault`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

Olay için varsayılan eylemi engeller.

`@on{EVENT}:stopPropagation`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

Olayın yayılmasını durdurur.

`@key`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

@key yönerge özniteliği, bileşenler fark algoritmasının anahtar değerine göre öğelerin veya bileşenlerin korunmasını garanti etmesini sağlar. Daha fazla bilgi için bkz . ASP.NET Core'da Blazoröğe, bileşen ve model ilişkilerini koruma.

`@ref`

Bu senaryo yalnızca bileşenler (Razor) için .razor geçerlidir.

Bileşen referansları (@ref), bir bileşen örneğine komut verebilmeniz için bir yol sunar. Daha fazla bilgi için bkz . ASP.NET Çekirdek Razor bileşenleri.

Şablonlu Razor temsilciler

Bu senaryo yalnızca MVC görünümleri ve Razor Sayfaları (.cshtml) için geçerlidir.

Razor şablonları, aşağıdaki biçime sahip bir kullanıcı arabirimi parçacığı tanımlamanıza olanak sağlar:

@<tag>...</tag>

Aşağıdaki örnek, şablonlu Razor bir temsilcinin olarak Func<T,TResult>nasıl belirtileceğini gösterir. Temsilcinin kapsüllediği yöntemin parametresi için dinamik tür olarak belirtilir. Nesne türü , temsilcinin dönüş değeri olarak belirtilir. Şablon, List<T> özelliğine sahip Pet bir Name ile kullanılır.

public class Pet
{
    public string Name { get; set; }
}

@{
    Func<dynamic, object> petTemplate = @<p>You have a pet named <strong>@item.Name</strong>.</p>;

    var pets = new List<Pet>
    {
        new Pet { Name = "Rin Tin Tin" },
        new Pet { Name = "Mr. Bigglesworth" },
        new Pet { Name = "K-9" }
    };
}

Şablon, bir pets ifadesi tarafından sağlanan foreach ile işlenir.

@foreach (var pet in pets)
{
    @petTemplate(pet)
}

İşlenen çıkış:

<p>You have a pet named <strong>Rin Tin Tin</strong>.</p>
<p>You have a pet named <strong>Mr. Bigglesworth</strong>.</p>
<p>You have a pet named <strong>K-9</strong>.</p>

Satır içi Razor şablonunu bir yönteme bağımsız değişken olarak da sağlayabilirsiniz. Aşağıdaki örnekte Repeat yöntemi bir Razor şablon alır. yöntemi, bir listeden sağlanan öğelerin yinelemeleriyle HTML içeriği oluşturmak için şablonu kullanır:

@using Microsoft.AspNetCore.Html

@functions {
    public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times,
        Func<dynamic, IHtmlContent> template)
    {
        var html = new HtmlContentBuilder();

        foreach (var item in items)
        {
            for (var i = 0; i < times; i++)
            {
                html.AppendHtml(template(item));
            }
        }

        return html;
    }
}

Önceki örnekteki Repeat evcil hayvan listesi kullanıldığında yöntemi şu şekilde çağrılır:

List<T> Pet.
Her evcil hayvan için tekrar sayısı.
Sıralanmamış listenin liste öğeleri için kullanılacak satır içi şablon.

<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

İşlenen çıkış:

<ul>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>K-9</li>
    <li>K-9</li>
    <li>K-9</li>
</ul>

Etiket Yardımcıları

Bu senaryo yalnızca MVC görünümleri ve Razor Sayfaları (.cshtml) için geçerlidir.

Etiket Yardımcılarıyla ilgili üç yönerge vardır.

Yönerge	İşlev
`@addTagHelper`	Etiket Yardımcılarını bir görünümde kullanılabilir hale getirir.
`@removeTagHelper`	Daha önce bir görünümden eklenen Etiket Yardımcılarını kaldırır.
`@tagHelperPrefix`	Etiket Yardımcısı desteğini etkinleştirmek ve Etiket Yardımcısı kullanımını açık hale getirmek için bir etiket ön eki belirtir.

Razor ayrılmış anahtar sözcükler

Razor Anahtar kelime -ler

page
namespace
functions
inherits
model
section
helper (Şu anda ASP.NET Core tarafından desteklenmiyor)

Razor anahtar sözcükler ile @(Razor Keyword) (örneğin, @(functions)) kaçışı oluşturulur.

C# Razor anahtar sözcükleri

case
do
default
for
foreach
if
else
lock
switch
try
catch
finally
using
while

C# Razor anahtar sözcükleri, @(@C# Razor Keyword) ile çift kaçışlı yapılmalıdır (örneğin, @(@case)). Birinci @Razor ayrıştırıcısından kaçar. İkincisi @ C# ayrıştırıcısından kaçar.

Razor tarafından kullanılmayan ayrılmış anahtar sözcükler

class

Razor Görünüm için oluşturulan C# sınıfını inceleme

Razor SDK, Razor dosyalarının derlenmesini işler. Varsayılan olarak, oluşturulan kod dosyaları kaydedilmez. Kod dosyalarının yayılabilmesi için proje dosyasındaki (EmitCompilerGeneratedFiles) yönergesini .csproj olarak trueayarlayın:

<PropertyGroup>
  <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
</PropertyGroup>

Derleme yapılandırmasında net6.0 bir 6.0 projesi (Debug) oluştururken, Razor SDK proje kökünde bir obj/Debug/net6.0/generated/ dizin oluşturur. Alt dizini, yayılan Razor sayfa kodu dosyalarını içerir.

Razor SDK, Razor dosyalarının derlenmesini işler. Sdk, Razor proje oluştururken proje kökünde bir obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor dizin oluşturur. Dizin içindeki Razor dizin yapısı, projenin dizin yapısını yansıtır.

ASP.NET Core Razor Pages 2.1 projesinde aşağıdaki dizin yapısını göz önünde bulundurun:

 Areas/
   Admin/
     Pages/
       Index.cshtml
       Index.cshtml.cs
 Pages/
   Shared/
     _Layout.cshtml
   _ViewImports.cshtml
   _ViewStart.cshtml
   Index.cshtml
   Index.cshtml.cs

Projeyi derlemek Debug yapılandırmasında aşağıdaki obj dizinini oluşturur:

 obj/
   Debug/
     netcoreapp2.1/
       Razor/
         Areas/
           Admin/
             Pages/
               Index.g.cshtml.cs
         Pages/
           Shared/
             _Layout.g.cshtml.cs
           _ViewImports.g.cshtml.cs
           _ViewStart.g.cshtml.cs
           Index.g.cshtml.cs

için oluşturulan sınıfı görüntülemek için Pages/Index.cshtmldosyasını açın obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Arama sorgularını ve büyük/küçük harf duyarlılığını görüntüleme

Görünüm Razor motoru, görünümler için büyük/küçük harfe duyarlı aramalar gerçekleştirir. Ancak gerçek arama, temel alınan dosya sistemi tarafından belirlenir:

Dosya tabanlı kaynak:
- Büyük/küçük harfe duyarsız dosya sistemleri olan işletim sistemlerinde (örneğin, Windows), fiziksel dosya sağlayıcısı aramaları büyük/küçük harfe duyarlı değildir. Örneğin, return View("Test"), /Views/Home/Test.cshtml, /Views/home/test.cshtml ve tüm diğer büyük/küçük harf varyantlarıyla eşleşmelerin oluşmasına neden olur.
- Büyük/küçük harfe duyarlı dosya sistemlerinde (örneğin, Linux, OSX ve EmbeddedFileProvider kullanıldığında), sorgulamalar büyük/küçük harfe duyarlıdır. Örneğin, return View("Test") özellikle /Views/Home/Test.cshtml ile eşleşir.
Önceden derlenmiş görünümler: ASP.NET Core 2.0 veya üzeri sürümlerde, önceden derlenmiş görünümleri aramak tüm işletim sistemlerinde büyük/küçük harfe duyarlı değildir. Bu davranış, fiziksel dosya sağlayıcısının Windows'ta davranışıyla aynıdır. Önceden derlenmiş iki görünüm yalnızca durumda farklıysa, aramanın sonucu belirleyici değildir.

Geliştiricilerin dosya ve dizin adlarının büyük/küçük harflerini aşağıdakilerle eşleştirmeleri teşvik edilir:

Alan, denetleyici ve eylem adları.
Razor Sayfalar.

Eşleşen durum, temel alınan dosya sisteminden bağımsız olarak dağıtımların görünümlerini bulmasını sağlar.

Tarafından kullanılan içe aktarımlar Razor

ASP.NET Core web şablonları tarafından Razor Dosyalarını desteklemek için aşağıdaki içe aktarmalar oluşturulur.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;

Ek kaynaklar

Söz Dizimini Kullanarak ASP.NET Web Programlamaya Razor Giriş, söz dizimi ile Razor programlamanın birçok örneğini sağlar.

Aracılığıyla paylaş

Razor ASP.NET Core için söz dizimi başvurusu

HTML İşleme

Razor söz dizimi

Ölçeklenebilir Vektör Grafikleri (SVG)

Örtük Razor ifadeler

Açık Razor ifadeler

İfade kodlama

Razor kod blokları

Dolaylı geçişler

Açık sınırlandırılmış geçiş

Açık çizgi geçişi

Koşullu öznitelik işleme

Denetim yapıları

Koşullar @if, else if, else, and @switch

Döngü @for, @foreach, @while, and @do while

Bileşik @using

@try, catch, finally

@lock

Açıklamalar

Yönergeler

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@rendermode

@section

@typeparam

@using

Yönerge öznitelikleri

@attributes

@bind

@bind:culture

@formname

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

Şablonlu Razor temsilciler

Etiket Yardımcıları

Razor ayrılmış anahtar sözcükler

Razor Anahtar kelime -ler

C# Razor anahtar sözcükleri

Razor tarafından kullanılmayan ayrılmış anahtar sözcükler

Razor Görünüm için oluşturulan C# sınıfını inceleme

Arama sorgularını ve büyük/küçük harf duyarlılığını görüntüleme

Tarafından kullanılan içe aktarımlar Razor

Ek kaynaklar

Geri Bildirim

Ek kaynaklar

Koşullar `@if, else if, else, and @switch`

Döngü `@for, @foreach, @while, and @do while`

Bileşik `@using`

`@try, catch, finally`

`@lock`

`@attribute`

`@code`

`@functions`

`@implements`

`@inherits`

`@inject`

`@layout`

`@model`

`@namespace`

`@page`

`@preservewhitespace`

`@rendermode`

`@section`

`@typeparam`

`@using`

`@attributes`

`@bind`

`@bind:culture`

`@formname`

`@on{EVENT}`

`@on{EVENT}:preventDefault`

`@on{EVENT}:stopPropagation`

`@key`

`@ref`