RazorASP.NET Core için sözdizimi başvurusu
By Rick Anderson, Taylor Mullenve dan vicarel
Razor , Web sayfalarına .NET tabanlı kod katıştırmak için biçimlendirme sözdizimidir. RazorSöz dizimi, Razor biçimlendirme, C# ve HTML 'den oluşur. Genellikle içeren dosyalar Razor bir .cshtml dosya uzantısına sahiptir. Razor, Razor bileşen dosyaları () içinde de bulunur .razor . Razorsözdizimi, Angular, React, vuejs ve svelte gibi çeşitli JavaScript tek sayfalı uygulama (SPA) çerçevelerinin şablon oluşturma altyapısına benzer. Daha fazla bilgi için bkz. ASP.NET Core içinde tek sayfalı uygulamalar oluşturmak için JavaScript hizmetlerini kullanın.
HTML işleniyor
Varsayılan Razor DIL HTML 'dir. Biçimlendirmeden HTML işleme HTML Razor dosyasından HTML işlenenden farklı değildir. Dosyalardaki HTML işaretlemesi .cshtml Razor sunucu tarafından değiştirilmeden işlenir.
Razor sözdizimi
Razor C# ' i destekler ve @ HTML 'Den C# ' ye geçiş yapmak için sembolünü kullanır. Razor C# ifadelerini değerlendirir ve bunları HTML çıktısında işler.
Bir @ simgenin arkasından Razor ayrılmış bir anahtar sözcükgeldiğinde, bu, belirli bir Razor biçimlendirmeyi geçirir. Aksi halde, düz HTML olarak geçiş yapar.
@İşaretlemede bir sembolün çıkmak için Razor ikinci bir sembol kullanın @ :
<p>@@Username</p>
Kod, HTML 'de tek bir sembol ile işlenir @ :
<p>@Username</p>
HTML öznitelikleri ve e-posta adreslerini içeren içerik @ sembol bir geçiş karakteri olarak kabul değildir. Aşağıdaki örnekteki e-posta adresleri Razor ayrıştırılmadan 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 @ sonrasında C# kodu ile başlar:
<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>
C# await anahtar sözcüğünün dışında, örtük ifadeler boşluk içermemelidir. C# ifadesinde Temizleme işlemi varsa, boşluklar ıntermingled olabilir:
<p>@await DoSomething("hello", "world")</p>
Parantez ( ) içindeki karakterler <> bir HTML etiketi olarak yorumlandığından örtük ifadeler C# generics 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:
- "İnt" öğesi kapatılmamış. Tüm öğeler kendi kendini kapatıyor 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öntemi çağırmak mı istiyordunuz? "
Genel metot çağrılarının açık bir Razor ifadede veya Razor kod bloğundasarmalanması gerekir.
Açık Razor ifadeler
Açık Razor ifadeler, @ dengeli parantez içeren bir sembolden oluşur. Son haftanın saatini işlemek için aşağıdaki Razor biçimlendirme kullanılır:
<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>
Parantez içindeki içerikler @() 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, bir hafta geçerli saatten çıkarılır:
<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 <p>Age@joe.Age</p> bir e-posta adresi olarak kabul edilir ve <p>Age@joe.Age</p> işlenir. Açık bir ifade olarak yazıldığında <p>Age33</p> işlenir.
Açık ifadeler, dosyalardaki genel metotlardan çıkış oluşturmak için kullanılabilir .cshtml . Aşağıdaki biçimlendirme, C# genel parantezinin neden olduğu daha önce gösterilen hatayı nasıl düzeltebileceğiniz gösterilmektedir. Kod açık bir ifade olarak yazılır:
<p>@(GenericMethod<int>())</p>
İfade kodlaması
Dizeyi değerlendiren C# ifadeleri HTML kodlandı. Sonucunu veren C# ifadeleri IHtmlContent doğrudan aracılığıyla işlenir IHtmlContent.WriteTo . Değerlendirilmeyen C# ifadeleri IHtmlContent , işlenmeden önce bir dizeye dönüştürülür ToString ve kodlanabilir.
@("<span>Hello World</span>")
Yukarıdaki kod, aşağıdaki HTML 'yi işler:
<span>Hello World</span>
HTML tarayıcıda düz metin olarak gösterilir:
<Aralık > Merhaba Dünya < /span>
HtmlHelper.Raw çıktı kodlanmamış, ancak HTML işaretlemesi olarak işlendi.
Uyarı
HtmlHelper.RawAyıklanmış Kullanıcı girişinde kullanmak bir güvenlik riskidir. Kullanıcı girişi kötü amaçlı JavaScript veya diğer kötüye kullanım içerebilir. Kullanıcı girişinin Temizleme işlemi zordur. HtmlHelper.RawKullanıcı girişiyle kullanmaktan 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 tarafından alınmıştır {} . İfadelerin aksine, kod blokları içindeki C# kodu işlenmez. Bir görünümdeki kod blokları ve ifadeler aynı kapsamı paylaşır ve sırasıyla tanımlanmıştı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 kullanılacak biçimlendirme ile yerel işlevler 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
Bir kod bloğundaki varsayılan dil C# ' dir, ancak Razor sayfa HTML 'ye geri dönebilir:
@{
var inCSharp = true;
<p>Now in HTML, was in C# @inCSharp</p>
}
Açık sınırlı geçiş
HTML oluşturması gereken bir kod bloğunun alt bölümünü tanımlamak için etiketi ile işleme için karakterleri çevreleyin Razor <text> :
@for (var i = 0; i < people.Length; i++)
{
var person = people[i];
<text>Name: @person.Name</text>
}
HTML etiketiyle çevrelenmiş HTML 'yi işlemek için bu yaklaşımı kullanın. HTML veya etiket olmadan Razor bir Razor çalışma zamanı hatası oluşur.
<text>Etiket, içerik işlerken boşluğu denetlemek için yararlıdır:
- Yalnızca etiketi arasındaki içerik
<text>işlenir. - HTML çıktısında etiket görüntülenmeden önce veya sonra boşluk yok
<text>.
Açık satır geçişi
Tüm satırın geri kalanını bir kod bloğu içinde HTML olarak işlemek için @: sözdizimi kullanın:
@for (var i = 0; i < people.Length; i++)
{
var person = people[i];
@:Name: @person.Name
}
@:Kod içinde olmadan bir Razor çalışma zamanı hatası oluşturulur.
@Bir dosyadaki fazla karakter Razor , bloktaki daha sonra bulunan deyimlerde derleyici hatalarına neden olabilir. Bu derleyici hatalarının anlaşılması zor olabilir çünkü asıl hata bildirilen hatadan önce oluşur. Bu hata, birden çok örtük/açık ifade tek bir kod bloğu içinde birleştirildikten sonra ortaktır.
Denetim yapıları
Denetim yapıları, kod bloklarının bir uzantısıdır. Kod bloklarının tüm yönleri (biçimlendirmeye geçme, satır içi C#) Ayrıca aşağıdaki yapılar için de geçerlidir:
Koşullular @if, else if, else, and @switch
@if kodun ne zaman çalışacağını denetler:
@if (value % 2 == 0)
{
<p>The value was even.</p>
}
else ve else if @ sembol gerektirmez:
@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 biçimlendirme bir switch ifadesinin nasıl kullanılacağını göstermektedir:
@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üye @for, @foreach, @while, and @do while
Şablonlu HTML, döngü denetim deyimleri ile oluşturulabilir. Bir 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);
İstekteki @using
C# ' de bir using nesne atılmış olduğundan emin olmak için bir ifade kullanılır. Razor' De, 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ı ifadesiyle bir etiketi işlerler <form> @using :
@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 kilitleme 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 Web sayfası işlenmeden önce açıklamalar sunucu tarafından kaldırılır. Razor@* *@açıklamaları sınırlandırmak için kullanır. Aşağıdaki kod açıklama olarak belirlenir, bu nedenle sunucu herhangi bir biçimlendirme oluşturmaz:
@*
@{
/* C# comment */
// Another C# comment
}
<!-- HTML comment -->
*@
Yönergeler
Razor yönergeler, simgeyi izleyen ayrılmış anahtar sözcüklerle örtük ifadelerle temsil edilir @ . Yönerge genellikle görünümün ayrıştırılma şeklini değiştirir veya farklı işlevleri sunar.
RazorBir görünüm için kod üretme şeklini 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 ilerleyen kısımlarında, Razor bir görünüm için oluşturulan C# sınıfını İnceleme bölümünde bu oluşturulan sınıfın nasıl görüntüleneceği açıklanmaktadır.
@attribute
@attributeYönergesi verilen özniteliği oluşturulan sayfanın veya görünümün sınıfına ekler. Aşağıdaki örnek [Authorize] özniteliğini ekler:
@attribute [Authorize]
@code
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
@codeBlok, bir bileşenin Razor bir bileşene C# üyeleri (alanlar, Özellikler ve Yöntemler) eklemesini sağlar:
@code {
// C# members (fields, properties, and methods)
}
RazorBileşenler için @code bir diğer addır @functions ve önerilir @functions . Birden çok @code blok izin verilir.
@functions
@functionsYönergesi, oluşturulan sınıfa C# üyeleri (alanlar, Özellikler ve Yöntemler) eklemeyi sağlar:
@functions {
// C# members (fields, properties, and methods)
}
Razor Bileşenler' de @code @functions C# üyelerini eklemek için ' i kullanın.
Örnek:
@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öntemler, işaretlemelerdeki şablon oluşturma yöntemleri olarak görev yapar:
@{
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
@implementsYönergesi, oluşturulan sınıf için bir arabirim uygular.
Aşağıdaki örnek, System.IDisposable Dispose yönteminin çağrılabilmesi için uygular:
@implements IDisposable
<h1>Example</h1>
@functions {
private bool _isDisposed;
...
public void Dispose() => _isDisposed = true;
}
@inherits
@inheritsYönergesi, görünümün devraldığı sınıfın tam denetimini sağlar:
@inherits TypeNameOfClassToInheritFrom
Aşağıdaki kod özel bir Razor 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``@inheritsaynı görünümde kullanılabilir. @inherits görünümün içeri aktardığı bir _ViewImports.cshtml dosyada olabilir:
@inherits CustomRazorPage<TModel>
Aşağıdaki kod, türü kesin belirlenmiş bir görünümün örneğidir:
@inherits CustomRazorPage<TModel>
<div>The Login Email: @Model.Email</div>
<div>Custom text: @CustomText</div>
" rick@contoso.com " Modelde 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
@injectYönergesi, Razor sayfanın hizmet kapsayıcısından bir hizmeti bir görünüme eklemesine olanak sağlar. Daha fazla bilgi için bkz. görünümlere bağımlılık ekleme.
@layout
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
@layoutYönergesi, yönergesi olan yönlendirilebilir bileşenlere yönelik bir düzen belirtir Razor @page . Düzen bileşenleri kod yinelemeyi ve tutarsızlığın önüne geçmek için kullanılır. Daha fazla bilgi için bkz. ASP.NET Core Blazor geçtiğinizde.
@model
Bu senaryo yalnızca MVC görünümleri ve sayfaları için geçerlidir Razor ( .cshtml ).
@modelYönergesi bir görünüm veya sayfaya geçirilen modelin türünü belirtir:
@model TypeNameOfModel
Razorbireysel kullanıcı hesaplarıyla oluşturulan bir ASP.NET Core MVC veya sayfaları uygulamasında, Views/Account/Login.cshtml aşağıdaki model bildirimini içerir:
@model LoginViewModel
Oluşturulan sınıf şuradan devralır RazorPage<dynamic> :
public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>
RazorModelgörünüme geçirilen modele erişim için bir özellik sunar:
<div>The Login Email: @Model.Email</div>
@modelYönerge, özelliğin türünü belirtir Model . Yönergesi, T RazorPage<T> görünümün türettiği oluşturulan sınıfın öğesini belirtir. @modelYönerge belirtilmemişse, Model özelliği türündedir dynamic . Daha fazla bilgi için bkz. türü kesin belirlenmiş modeller ve @model anahtar sözcüğü.
@namespace
@namespaceYönergesi:
- Oluşturulan Razor sayfa, MVC görünümü veya bileşen sınıfının ad alanını ayarlar Razor .
- Bir sayfa, görünüm veya bileşen sınıfının kök türetilmiş ad alanlarını dizin ağacındaki en yakın içeri aktarmalar dosyasından
_ViewImports.cshtml(görünümler veya sayfalar) veya _Imports. Razor ( Razor bileşenler) ayarlar.
@namespace Your.Namespace.Here
RazorAşağıdaki tabloda gösterilen sayfalar örneği için:
- Her sayfa içeri aktarılır
Pages/_ViewImports.cshtml. Pages/_ViewImports.cshtmliçerir@namespace Hello.World.- Her sayfa
Hello.World, ad alanının kökü olarak bulunur.
| Sayfa | Ad Alanı |
|---|---|
Pages/Index.cshtml |
Hello.World |
Pages/MorePages/Page.cshtml |
Hello.World.MorePages |
Pages/MorePages/EvenMorePages/Page.cshtml |
Hello.World.MorePages.EvenMorePages |
Yukarıdaki ilişkiler, MVC görünümleri ve bileşenleriyle kullanılan dosyaları içeri aktarmak için geçerlidir Razor .
Birden çok içeri aktarma dosyasında bir @namespace yönerge 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.
EvenMorePagesYukarıdaki örnekteki klasörde @namespace Another.Planet (veya dosya içeriyorsa) bir içeri aktarmalar dosyası varsa Pages/MorePages/EvenMorePages/Page.cshtml @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
@pageYönergesinin, göründüğü dosyanın türüne bağlı olarak farklı etkileri vardır. Yönergesi:
- Bir
.cshtmldosyada, dosyanın bir sayfa olduğunu gösterir Razor . Daha fazla bilgi için bkz. özel rotalar ve RazorASP.NET Core'de Sayfalara Giriş . - Bir Razor bileşenin istekleri doğrudan işlemesi gerektiğini belirtir. Daha fazla bilgi için bkz. ASP.NET Core Blazor Yönlendirme.
@preservewhitespace
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
false(Varsayılan) olarak ayarlandığında, bileşenlerden () oluşturulan İşaretlemede boşluk Razor .razor Şu durumlarda kaldırılır:
- Bir öğe içinde baştaki veya sondaki.
- Bir parametre içinde baştaki veya sondaki
RenderFragment. Örneğin, alt içerik başka bir bileşene geçirildi. - Ya da gibi bir C# kod bloğunun önünde veya sonrasında gelir
@if@foreach.
@section
Bu senaryo yalnızca MVC görünümleri ve sayfaları için geçerlidir Razor ( .cshtml ).
@sectionYönerge, görünümler veya SAYFALARıN HTML sayfasının farklı bölümlerinde içerik işlemesini sağlamak Için MVC ve Razor sayfa düzenleri ile birlikte kullanılır. Daha fazla bilgi için bkz. ASP.NET Core'de düzen.
@using
@usingYönergesi, using oluşturulan görünüme C# yönergesini ekler:
@using System.IO
@{
var dir = Directory.GetCurrentDirectory();
}
<p>@dir</p>
Razor Bileşenlerinde, @using hangi bileşenlerin kapsamda olduğunu da denetler.
Yönerge öznitelikleri
Razor yönerge öznitelikleri, simgeyi izleyen ayrılmış anahtar sözcüklerle örtük ifadelerle temsil edilir @ . Bir Directive özniteliği genellikle bir öğenin ayrıştırılma şeklini değiştirir veya farklı işlevlere izin vermez.
@attributes
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
@attributes bir bileşenin bildirilmeyen öznitelikleri işlemesini sağlar. Daha fazla bilgi için bkz. RazorASP.NET Core Bileşen.
@bind
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
Bileşenlerdeki veri bağlama, @bind özniteliğiyle gerçekleştirilir. Daha fazla bilgi için bkz. BlazorASP.NET Core veri bağlama.
@bind:culture
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
Bir @bind:culture @bind System.Globalization.CultureInfo değeri ayrıştırmak ve biçimlendirmek için özniteliğini sağlamak üzere özniteliğini özniteliğiyle birlikte kullanın. Daha fazla bilgi için bkz. ASP.NET Core Blazor Genelleştirme ve yerelleştirme.
@on{EVENT}
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
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 için geçerlidir Razor ( .razor ).
Olay için varsayılan eylemi engeller.
@on{EVENT}:stopPropagation
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
Olay için olay yaymayı sonlandırır.
@key
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
@keyDirective özniteliği, anahtar değerine göre öğelerin veya bileşenlerin korunmasını güvence altına almak için bileşenlerin algoritma almasına neden olur. Daha fazla bilgi için bkz. RazorASP.NET Core Bileşen.
@ref
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
Bileşen başvuruları ( @ref ) bir bileşen örneğine başvurmak için bir yol sağlar, böylece bu örneğe komut verebilirsiniz. Daha fazla bilgi için bkz. RazorASP.NET Core Bileşen.
@typeparam
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
@typeparamYönergesi, oluşturulan bileşen sınıfı için genel bir tür parametresi bildirir:
@typeparam TEntity
Tür kısıtlamalarına sahip genel türler where desteklenir:
@typeparam TEntity where TEntity : IEntity
Daha fazla bilgi için aşağıdaki makaleleri inceleyin:
@typeparam
Bu senaryo yalnızca bileşenler için geçerlidir Razor ( .razor ).
@typeparamYönergesi, oluşturulan bileşen sınıfı için genel bir tür parametresi bildirir:
@typeparam TEntity
Daha fazla bilgi için aşağıdaki makaleleri inceleyin:
Şablonlu Razor Temsilciler
Razor Şablonlar, aşağıdaki biçimde bir UI parçacığı tanımlamanızı sağlar:
@<tag>...</tag>
Aşağıdaki örnek, olarak şablonlu bir temsilcinin nasıl ekleneceğini gösterir Razor Func<T,TResult> . Dinamik tür , temsilcinin sarmalayan yönteminin parametresi için belirtilir. Bir nesne türü , temsilcinin dönüş değeri olarak belirtilir. Şablon, bir özelliğine sahip olan bir ile kullanılır List<T> Pet Name .
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, pets bir ifade tarafından sağlanan ile işlenir foreach :
@foreach (var pet in pets)
{
@petTemplate(pet)
}
İşlenmiş çı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>
RazorBir yönteme bağımsız değişken olarak bir satır içi şablon da sağlayabilirsiniz. Aşağıdaki örnekte, Repeat yöntemi bir Razor şablon alır. Yöntemi, bir listeden sağlanan öğelerin tekrarlandığı HTML içeriğini oluşturmak için şablonunu 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 Evcil hayvanlar 'ların listesini kullanarak, Repeat yöntemi ile çağrılır:
- List<T>
Pet. - Her evcil hayvan kaç kez tekrarlanacak.
- Sıralanmamış bir listenin liste öğeleri için kullanılacak satır içi şablon.
<ul>
@Repeat(pets, 3, @<li>@item.Name</li>)
</ul>
İşlenmiş çı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 sayfaları için geçerlidir Razor ( .cshtml ).
Etiket Yardımcılarıile ilgili üç yönergeler vardır.
| Deki | İşlev |
|---|---|
@addTagHelper |
Etiket yardımcılarını bir görünüm için kullanılabilir hale getirir. |
@removeTagHelper |
Daha önce bir görünümden eklenen etiket yardımcıları 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 lerimi
page(ASP.NET Core 2,1 veya üzeri gerekir)namespacefunctionsinheritsmodelsectionhelper(Şu anda ASP.NET Core tarafından desteklenmiyor)
Razor anahtar kelimelerden kaçışın @(Razor Keyword) (örneğin, @(functions) ).
C# Razor anahtar sözcükleri
casedodefaultforforeachifelselockswitchtrycatchfinallyusingwhile
C# Razor anahtar sözcükleri ile çift kaçış olmalıdır @(@C# Razor Keyword) (örneğin, @(@case) ). İlki @ Razor Ayrıştırıcıdan çıkar. İkincisi, @ C# ayrıştırıcısının çıkar.
Ayrılmış anahtar sözcükler tarafından kullanılmıyor Razor
class
RazorBir görünüm için oluşturulan C# sınıfını inceleyin
Razor SDK , dosyaların derlemesini işler Razor . Bir proje oluştururken, Razor SDK obj/<build_configuration>/<target_framework_moniker>/Razor Proje kökünde bir dizin oluşturur. Dizin içindeki dizin yapısı Razor , projenin dizin yapısını yansıtır.
ASP.NET Core Pages projesinde aşağıdaki dizin yapısını göz önünde bulundurun Razor :
Areas/
Admin/
Pages/
Index.cshtml
Index.cshtml.cs
Pages/
Shared/
_Layout.cshtml
_ViewImports.cshtml
_ViewStart.cshtml
Index.cshtml
Index.cshtml.cs
Projenin hata ayıklama yapılandırmasında oluşturulması 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
İçin oluşturulan sınıfı görüntülemek için Pages/Index.cshtml , öğesini 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üle
RazorGörünüm 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 sistemine göre belirlenir:
- Dosya tabanlı kaynak:
- büyük/küçük harf duyarsız dosya sistemlerine (örneğin, Windows) sahip işletim sistemlerinde, fiziksel dosya sağlayıcısı aramaları büyük/küçük harfe duyarlıdır. Örneğin,,
return View("Test")/Views/Home/Test.cshtml/Views/home/test.cshtml, ve diğer tüm büyük/küçük harf çeşitlerini ile sonuçlanır. - Büyük/küçük harf 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 eşleşir/Views/Home/Test.cshtml.
- büyük/küçük harf duyarsız dosya sistemlerine (örneğin, Windows) sahip işletim sistemlerinde, fiziksel dosya sağlayıcısı aramaları büyük/küçük harfe duyarlıdır. Örneğin,,
- ö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ıdır. Davranış, Windows fiziksel dosya sağlayıcısının davranışı ile aynıdır. Ön derlenmiş iki görünüm yalnızca bir durumda farklıysa, arama sonucu belirleyici değildir.
Geliştiricilerin dosya ve dizin adlarını büyük küçük harf olarak eşleşmesi önerilir:
- Alan, denetleyici ve eylem adları.
- Razor Sayfaları.
Eşleşen durum, dağıtımların görünümlerini temel alınan dosya sisteminden bağımsız olarak bulmasını sağlar.
Tarafından kullanılan içeri aktarmalar Razor
aşağıdaki içeri aktarmalar, dosyaları desteklemek için ASP.NET Core web şablonları tarafından oluşturulur Razor :
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
' i kullanarak Razor Web programlamasına ASP.NET giriş Sözdizimi , sözdizimi ile programlama için birçok örnek sağlar Razor .