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

Makale
11/30/2023

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. Söz Razor dizimi işaretleme, C# ve HTML'yi içerir Razor . İçeren Razor dosyaların genellikle bir .cshtml dosya uzantısı vardır. Razor, bileşen dosyalarında Razor da bulunur (.razor). 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. İşaretlemeyi kullanarak Razor HTML işleme, HTML dosyasından HTML işlemekten 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 çıkışında işler.

Bir @ simgenin ardından ayrılmış anahtar Razor sözcük geldiğinde, özel işaretlemeye Razorgeçiş yapılır. Aksi takdirde, düz HTML'ye geçiş olur.

İşaretlemedeki bir @ simgeden Razor kaçmak 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 ayrıştırılarak Razor dokunulmaz:

<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 ve 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>

Köşeli ayraçların (<>) içindeki karakterler HTML etiketi olarak yorumlandığından örtük ifadeler C# genel öğeleri içeremez. 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 kendi kendine kapanıyor veya eşleşen bir uç 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 ifadede veya Razor kod bloğunda sarmalanmalıdır.Razor

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 işlenir Age33 .

Açık ifadeler, dosyalardaki .cshtml genel yöntemlerden çıktıyı işlemek için kullanılabilir. Aşağıdaki işaretlemede, C# genelinin köşeli ayraçlarının neden olduğu daha önce gösterilen hatanın nasıl düzeltileceğini gösterilmektedir. 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. olarak değerlendirilen IHtmlContent C# ifadeleri doğrudan aracılığıyla IHtmlContent.WriteToişlenir. olarak değerlendirilmeyen IHtmlContent C# ifadeleri tarafından bir dizeye ToString 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 temizleme zor. 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 içine {}alınır. İ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 işaretleme ile yerel işlevleri 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>

Örtük 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 veya Razor etiket olmadan çalışma Razor 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

Tüm satırın geri kalanını bir kod bloğunun içinde 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
}

@: kodunda olmadan bir Razor çalışma zamanı hatası oluşturulur.

Bir Razor dosyadaki ek @ karakterler, bloğun ilerleyen bölümlerindeki deyimlerde derleyici hatalarına neden olabilir. Bu ek @ 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. geçirilen değer veya falseise null özniteliği işlenmez.

Örneğin, aşağıdaki razor'ı 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">

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şullular `@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 simgesine else if@ ihtiyaç duymazsınız:

@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ü denetimi deyimleriyle 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ü deyimleri 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 nesnenin atıldığından emin olmak için deyimi 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ı deyimiyle @using bir <form> etiket oluşturur:

@using (Html.BeginForm())
{
    <div>
        Email: <input type="email" id="Email" value="">
        <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
}

Yorumlar

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 açıklama satırına eklendiğinden sunucu herhangi bir işaretleme işlemez:

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

Yönergeler

Razor yönergeleri, sembolden sonra @ ayrılmış anahtar sözcükler içeren örtük ifadelerle temsil edilir. Yönerge genellikle görünümün ayrıştırma şeklini değiştirir veya farklı işlevler sağlar.

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, @page bir bileşendeki yönergesi, içindeki yönergesi ve uygulamasındaki başka bir yerde "/counter" olarak ayarlanan sabit tabanlı yol şablonuyla @attributeConstants.CounterRoutedeğ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)
}

Bileşenler için Razor , @code bir diğer adıdır @functions ve üzerinden @functionsönerilir. Birden @code fazla blok izin verilebilir.

`@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 RazorC# üyeleri eklemek için over @functions komutunu kullanın.@code

Ö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, yönteminin çağrılabilmesi için Dispose uygularSystem.IDisposable:

@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, kesin türü belirlenmiş 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.

yönergesi, @layout yönergesi olan yönlendirilebilir Razor bileşenler için bir @page 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

Tek tek kullanıcı hesaplarıyla oluşturulan ASP.NET Core MVC veya Razor Pages uygulamasında aşağıdaki Views/Account/Login.cshtml model bildirimini içerir:

@model LoginViewModel

Oluşturulan sınıf öğesinden RazorPage<LoginViewModel>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önergesi, görünümün türetilen oluşturulan sınıfında öğesini belirtir TRazorPage<T> . 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 (görünümler veya sayfalar) veya (Razor bileşenler) en yakın içeri aktarmalar dosyasından sayfaların, _ViewImports.cshtml görünümlerin veya _Imports.razor bileşen sınıflarının kök türetilmiş ad alanlarını ayarlar.

@namespace Your.Namespace.Here

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

Her sayfa içeri Pages/_ViewImports.cshtmlaktarır.
Pages/_ViewImports.cshtml içerir @namespace Hello.World.
Her sayfa, ad alanının kökü olarak bulunur Hello.World .

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 Yukarıdaki örnekteki klasörde ile bir içeri aktarma dosyası @namespace Another.Planet varsa (veya Pages/MorePages/EvenMorePages/Page.cshtml dosyası içeriyorsa@namespace Another.Planet), 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 Dosyada, dosyanın bir Razor Sayfa olduğunu gösterir. Daha fazla bilgi için bkz. ASP.NET Core'da Özel yollar ve Sayfalara Razor 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:

Öğenin içinde başta veya sonda yer alıyorsa.
Bir RenderFragment parametre içinde baştaki veya sondaki. Örneğin, alt içerik başka bir bileşene geçirilir.
@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: kullanarak Blazor Serveretkileşimli sunucu işleme uygular.
InteractiveWebAssembly: kullanarak Blazor WebAssemblyetkileşimli WebAssembly işleme uygular.
InteractiveAuto: başlangıçta kullanarak Blazor Serveretkileşimli WebAssembly işlemesi uygular ve ardından paket indirildikten sonra sonraki ziyaretlerde WebAssembly kullanarak etkileşimli WebAssembly işlemesi Blazor uygular.

Bileşen örneği için:

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

Bileşen tanımında:

@rendermode InteractiveServer

Not

Blazorşablonlar, daha kısa @rendermode söz dizimi için uygulamanın _Imports dosyasında (Components/_Imports.razor) için RenderMode statik using bir 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.

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

`@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 ayrıştırma şeklini değiştirir veya farklı işlevlere olanak tanır.

`@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 özniteliğinin sıçraması 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 Bir değeri ayrıştırmak ve biçimlendirmek System.Globalization.CultureInfo için özniteliğini özniteliğiyle @bind birlikte kullanı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 Razor veya (Editform belgelerine) dayalı EditForm bir forma form adı atar. değeri @formname , aşağıdaki durumlarda form çakışmalarını önleyen 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 için olay yayma işlemini durdurur.

`@key`

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

@key yönerge özniteliği, anahtar değerine göre öğelerin veya bileşenlerin korunmasını garanti etmek için bileşenler fark algoritmasına neden olur. 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 başvuruları (@ref), bu örneğe komut verebilmeniz için bir bileşen örneğine başvurmak için bir yol sağlar. 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. Dinamik tür , temsilcinin kapsüllediğini yönteminin parametresi için belirtilir. Nesne türü , temsilcinin dönüş değeri olarak belirtilir. Şablon, özelliği olan Name bir List<T>Pet şablonuyla birlikte 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 foreach deyim tarafından sağlanan ile pets 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 şablonu bir yönteme bağımsız değişken olarak da sağlayabilirsiniz. Aşağıdaki örnekte yöntemi Repeat 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>için .Pet
Her evcil hayvanın tekrarlama 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 ile @(@C# Razor Keyword) çift kaçışlı olmalıdır (örneğin, @(@case)). İlki @ ayrıştırıcıdan Razor kaçar. İkincisi @ C# ayrıştırıcısından kaçar.

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

class

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

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

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

Derleme yapılandırmasında Debug bir 6.0 projesi (net6.0) 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.

SDK, Razor dosyaların derlenmesini Razor 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 yapılandırmada Debug oluşturmak aşağıdaki obj dizini verir:

 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.

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

Görünüm Razor altyapısı, 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.cshtmlve diğer büyük/küçük harf çeşitlemelerinin eşleşmelerine /Views/Home/Test.cshtmlneden olur.
- Büyük/küçük harfe duyarlı dosya sistemlerinde (örneğin, Linux, OSX ve ile EmbeddedFileProvider), aramalar büyük/küçük harfe duyarlıdır. Örneğin, return View("Test") özellikle ile eşleşir /Views/Home/Test.cshtml.
Önceden derlenmiş görünümler: ASP.NET Core 2.0 ve ü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 Sayfa.

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çeri aktarmalar Razor

Dosyaları desteklemek Razor için ASP.NET Core web şablonları tarafından aşağıdaki içeri 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.

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ı

Örtük 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şullular @if, else if, else, and @switch

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

Bileşik @using

@try, catch, finally

@lock

Yorumlar

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

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

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

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

Tarafından kullanılan içeri aktarmalar Razor

Ek kaynaklar

Geri Bildirim

Ek kaynaklar

Koşullular `@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`