Razor referensi sintaks untuk ASP.NET Core

Artikel
11/06/2024

Oleh Rick Anderson, Taylor Mullen, dan Dan Vicarel

Razor adalah sintaks markup untuk menyematkan kode berbasis .NET ke halaman web. Sintaksis Razor terdiri dari Razor markup, C#, dan HTML. File yang berisi Razor umumnya memiliki .cshtml ekstensi file. Razor juga ditemukan dalam Razor file komponen (.razor). Razor sintaksis mirip dengan mesin templat dari berbagai kerangka kerja aplikasi halaman tunggal (SPA) JavaScript, seperti Angular, React, VueJs, dan Svelte. Untuk informasi selengkapnya lihat, Fitur yang dijelaskan dalam artikel ini usang pada ASP.NET Core 3.0.

Pengantar ASP.NET Pemrograman Web Menggunakan Razor Sintaksis menyediakan banyak sampel pemrograman dengan Razor sintaks. Meskipun topik ini ditulis untuk ASP.NET daripada ASP.NET Core, sebagian besar sampel berlaku untuk ASP.NET Core.

Penyajian HTML

Bahasa defaultnya Razor adalah HTML. Merender HTML dari Razor markup tidak berbeda dengan merender HTML dari file HTML. Markup HTML dalam .cshtmlRazor file dirender oleh server yang tidak berubah.

Razor sintaks

Razor mendukung C# dan menggunakan @ simbol untuk transisi dari HTML ke C#. Razor mengevaluasi ekspresi C# dan merendernya dalam output HTML.

@ Ketika simbol diikuti oleh kata kunci yang Razor dipesan, simbol tersebut beralih ke Razormarkup -spesifik. Jika tidak, ia beralih ke HTML biasa.

Untuk menghindari @ simbol dalam Razor markup, gunakan simbol kedua @ :

<p>@@Username</p>

Kode dirender dalam HTML dengan simbol tunggal @ :

<p>@Username</p>

Atribut dan konten HTML yang berisi alamat email tidak memperlakukan @ simbol sebagai karakter transisi. Alamat email dalam contoh berikut tidak tersentuh oleh Razor penguraian:

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

Grafik Vektor Yang Dapat Diskalakan (SVG)

Elemen SVG foreignObject didukung:

@{
    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>

Ekspresi implisit Razor

Ekspresi implisit Razor dimulai dengan diikuti dengan @ kode C#:

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

Dengan pengecualian kata kunci C# await , ekspresi implisit tidak boleh berisi spasi. Jika pernyataan C# memiliki akhir yang jelas, spasi dapat diinterming:

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

Ekspresi implisit tidak boleh berisi generik C#, karena karakter di dalam tanda kurung (<>) ditafsirkan sebagai tag HTML. Kode berikut tidak valid:

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

Kode sebelumnya menghasilkan kesalahan pengkompilasi yang mirip dengan salah satu hal berikut:

Elemen "int" tidak ditutup. Semua elemen harus menutup sendiri atau memiliki tag akhir yang cocok.
Tidak dapat mengonversi grup metode 'GenericMethod' ke tipe 'objek' non-delegasi. Apakah Anda berniat untuk memanggil metode?

Panggilan metode generik harus dibungkus dalam ekspresi eksplisit Razor atau Razor blok kode.

Ekspresi eksplisit Razor

Ekspresi eksplisit Razor @ terdiri dari simbol dengan tanda kurung seimbang. Untuk merender waktu minggu lalu, markup berikut Razor digunakan:

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

Konten apa pun dalam tanda @() kurung dievaluasi dan dirender ke output.

Ekspresi implisit, yang dijelaskan di bagian sebelumnya, umumnya tidak boleh berisi spasi. Dalam kode berikut, satu minggu tidak dikurangi dari waktu saat ini:

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

Kode merender HTML berikut:

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

Ekspresi eksplisit dapat digunakan untuk menggabungkan teks dengan hasil ekspresi:

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

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

Tanpa ekspresi eksplisit, Age@joe.Age diperlakukan sebagai alamat email, dan Age@joe.Age dirender. Saat ditulis sebagai ekspresi eksplisit, Age33 dirender.

Ekspresi eksplisit dapat digunakan untuk merender output dari metode generik dalam .cshtml file. Markup berikut menunjukkan cara memperbaiki kesalahan yang ditunjukkan sebelumnya yang disebabkan oleh tanda kurung C# generik. Kode ditulis sebagai ekspresi eksplisit:

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

Pengodean ekspresi

Ekspresi C# yang mengevaluasi ke string dikodekan HTML. Ekspresi C# yang mengevaluasi untuk IHtmlContent dirender langsung melalui IHtmlContent.WriteTo. Ekspresi C# yang tidak dievaluasi akan IHtmlContent dikonversi ke string oleh ToString dan dikodekan sebelum dirender.

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

Kode sebelumnya merender HTML berikut:

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

HTML ditampilkan di browser sebagai teks biasa:

<rentang> Halo Dunia</rentang>

HtmlHelper.Raw output tidak dikodekan tetapi dirender sebagai markup HTML.

Peringatan

Menggunakan HtmlHelper.Raw pada input pengguna yang tidak disanitisasi adalah risiko keamanan. Input pengguna mungkin berisi JavaScript berbahaya atau eksploitasi lainnya. Membersihkan input pengguna sulit. Hindari menggunakan HtmlHelper.Raw dengan input pengguna.

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

Kode merender HTML berikut:

<span>Hello World</span>

Razor blok kode

Razor blok kode dimulai dengan @ dan diapit oleh {}. Tidak seperti ekspresi, kode C# di dalam blok kode tidak dirender. Blok kode dan ekspresi dalam tampilan memiliki cakupan yang sama dan didefinisikan secara berurutan:

@{
    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>

Kode merender HTML berikut:

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

Dalam blok kode, deklarasikan fungsi lokal dengan markup untuk berfungsi sebagai metode templat:

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

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

Kode merender HTML berikut:

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

Transisi implisit

Bahasa default dalam blok kode adalah C#, tetapi Razor Halaman dapat beralih kembali ke HTML:

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

Transisi yang dibatasi eksplisit

Untuk menentukan sub bagian dari blok kode yang harus merender HTML, kelilingi karakter untuk penyajian Razor<text> dengan tag:

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

Gunakan pendekatan ini untuk merender HTML yang tidak dikelilingi oleh tag HTML. Tanpa HTML atau Razor tag, Razor kesalahan runtime terjadi.

Tag <text> berguna untuk mengontrol spasi kosong saat merender konten:

Hanya konten di antara tag yang <text> dirender.
Tidak ada spasi kosong sebelum atau sesudah <text> tag muncul di output HTML.

Transisi garis eksplisit

Untuk merender rest seluruh baris sebagai HTML di dalam blok kode, gunakan @: sintaks:

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

@: Tanpa dalam kode, kesalahan Razor runtime dihasilkan.

Karakter tambahan @ dalam Razor file dapat menyebabkan kesalahan pengkompilasi pada pernyataan nanti di blok. Kesalahan kompilator tambahan @ ini:

Mungkin sulit dipahami karena kesalahan aktual terjadi sebelum kesalahan yang dilaporkan.
Adalah umum setelah menggabungkan beberapa ekspresi implisit dan eksplisit ke dalam satu blok kode.

Penyajian atribut bersyar

Razor secara otomatis menghilangkan atribut yang tidak diperlukan. Jika nilai yang diteruskan adalah null atau false, atribut tidak dirender.

Misalnya, pertimbangkan hal berikut razor:

<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" />

Markup sebelumnya Razor menghasilkan HTML berikut:

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

Struktur kontrol

Struktur kontrol adalah ekstensi blok kode. Semua aspek blok kode (transisi ke markup, C#sebaris) juga berlaku untuk struktur berikut:

Bersyarjana `@if, else if, else, and @switch`

@if mengontrol kapan kode berjalan:

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

else dan else if tidak memerlukan @ simbol:

@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>
}

Markup berikut menunjukkan cara menggunakan pernyataan pengalihan:

@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;
}

Perulangan `@for, @foreach, @while, and @do while`

HTML bertempur dapat dirender dengan pernyataan kontrol perulangan. Untuk merender daftar orang:

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

Pernyataan perulangan berikut didukung:

@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);

Majemuk `@using`

Dalam C#, using pernyataan digunakan untuk memastikan objek dibuang. Dalam Razor, mekanisme yang sama digunakan untuk membuat Pembantu HTML yang berisi konten tambahan. Dalam kode berikut, Pembantu HTML merender <form> tag dengan @using pernyataan :

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

`@try, catch, finally`

Penanganan pengecualian mirip dengan C#:

@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 memiliki kemampuan untuk melindungi bagian penting dengan pernyataan kunci:

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

Komentar

Razor mendukung komentar C# dan HTML:

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

Kode merender HTML berikut:

<!-- HTML comment -->

Razor komentar dihapus oleh server sebelum halaman web dirender. Razor@* *@ menggunakan untuk memisahkan komentar. Kode berikut dikomentari, sehingga server tidak merender markup apa pun:

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

Arahan

Razor direktif diwakili oleh ekspresi implisit dengan kata kunci yang dipesan mengikuti @ simbol . Direktif biasanya mengubah cara tampilan dikompilasi atau fungsi.

Memahami cara Razor menghasilkan kode untuk tampilan membuatnya lebih mudah untuk memahami cara kerja arahan.

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

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

Kode menghasilkan kelas yang mirip dengan yang berikut:

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>");
    }
}

Kemudian dalam artikel ini, bagian Memeriksa Razor kelas C# yang dihasilkan untuk tampilan menjelaskan cara melihat kelas yang dihasilkan ini.

`@attribute`

Direktif @attribute menambahkan atribut yang diberikan ke kelas halaman atau tampilan yang dihasilkan. Contoh berikut menambahkan [Authorize] atribut:

@attribute [Authorize]

Arahan @attribute juga dapat digunakan untuk menyediakan templat rute berbasis konstan dalam komponen Razor . Dalam contoh berikut, arahan @page dalam komponen diganti dengan @attribute direktif dan templat rute berbasis konstanta di Constants.CounterRoute, yang diatur di tempat lain di aplikasi ke "/counter":

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

`@code`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Blok memungkinkan @code Razor komponen untuk menambahkan anggota C# (bidang, properti, dan metode) ke komponen:

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

Untuk Razor komponen, @code adalah alias dari @functions dan direkomendasikan melalui @functions. Lebih dari satu @code blok diizinkan.

`@functions`

Direktif @functions memungkinkan penambahan anggota C# (bidang, properti, dan metode) ke kelas yang dihasilkan:

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

Dalam Razor komponen, gunakan @code lebih @functions untuk menambahkan anggota C#.

Contohnya:

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

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

Kode menghasilkan markup HTML berikut:

<div>From method: Hello</div>

Kode berikut adalah kelas C# yang dihasilkan Razor :

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 metode berfungsi sebagai metode templat ketika mereka memiliki markup:

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

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

Kode merender HTML berikut:

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

`@implements`

Direktif @implements mengimplementasikan antarmuka untuk kelas yang dihasilkan.

Contoh berikut menerapkan System.IDisposable sehingga Dispose metode dapat dipanggil:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

`@inherits`

Direktif @inherits memberikan kontrol penuh atas kelas yang diwarisi tampilan:

@inherits TypeNameOfClassToInheritFrom

Kode berikut adalah jenis halaman kustom Razor :

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 ditampilkan dalam tampilan:

@inherits CustomRazorPage<TModel>

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

Kode merender HTML berikut:

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

@model dan @inherits dapat digunakan dalam tampilan yang sama. @inherits dapat berada dalam _ViewImports.cshtml file yang diimpor tampilan:

@inherits CustomRazorPage<TModel>

Kode berikut adalah contoh tampilan yang sangat ditik:

@inherits CustomRazorPage<TModel>

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

Jika "rick@contoso.com" diteruskan dalam model, tampilan menghasilkan markup HTML berikut:

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

Direktif @inject memungkinkan Razor Halaman untuk menyuntikkan layanan dari kontainer layanan ke dalam tampilan. Untuk informasi selengkapnya, lihat Injeksi dependensi ke dalam tampilan.

`@layout`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Direktif @layout menentukan tata letak untuk komponen yang dapat dirutekan Razor yang memiliki @page direktif. Komponen tata letak digunakan untuk menghindari duplikasi kode dan inkonsistensi. Untuk informasi selengkapnya, lihat tata letak ASP.NET CoreBlazor.

`@model`

Skenario ini hanya berlaku untuk tampilan MVC dan Razor Halaman (.cshtml).

Direktif @model menentukan jenis model yang diteruskan ke tampilan atau halaman:

@model TypeNameOfModel

Di aplikasi ASP.NET Core MVC atau Razor Pages yang dibuat dengan akun pengguna individual, Views/Account/Login.cshtml berisi deklarasi model berikut:

@model LoginViewModel

Kelas yang dihasilkan mewarisi dari RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

RazorModel mengekspos properti untuk mengakses model yang diteruskan ke tampilan:

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

Direktif @model menentukan jenis Model properti. Direktif menentukan T di mana RazorPage<T> kelas yang dihasilkan yang berasal dari tampilan. Jika direktif @model tidak ditentukan, Model properti berjenis dynamic. Untuk informasi selengkapnya, lihat Strongly typed models and the @model keyword .

`@namespace`

Direktif @namespace :

Mengatur namespace kelas halaman yang dihasilkan Razor , tampilan MVC, atau Razor komponen.
Mengatur namespace layanan turunan akar dari kelas halaman, tampilan, atau komponen dari file impor terdekat di pohon direktori, _ViewImports.cshtml (tampilan atau halaman) atau _Imports.razor (Razor komponen).

@namespace Your.Namespace.Here

Untuk contoh Halaman yang Razor diperlihatkan dalam tabel berikut ini:

Setiap halaman mengimpor Pages/_ViewImports.cshtml.
Pages/_ViewImports.cshtml berisi @namespace Hello.World.
Setiap halaman memiliki Hello.World sebagai akar namespace layanan.

Halaman	Ruang nama
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

Hubungan sebelumnya berlaku untuk mengimpor file yang digunakan dengan tampilan dan Razor komponen MVC.

Ketika beberapa file impor memiliki @namespace direktif, file yang paling dekat dengan halaman, tampilan, atau komponen di pohon direktori digunakan untuk mengatur namespace layanan akar.

EvenMorePages Jika folder dalam contoh sebelumnya memiliki file impor dengan @namespace Another.Planet (atau Pages/MorePages/EvenMorePages/Page.cshtml file berisi @namespace Another.Planet), hasilnya diperlihatkan dalam tabel berikut.

Halaman	Ruang nama
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Another.Planet`

`@page`

Direktif @page memiliki efek yang berbeda tergantung pada jenis file tempat file muncul. Direktif:

.cshtml Dalam file menunjukkan bahwa file tersebut adalah Razor Halaman. Untuk informasi selengkapnya, lihat Rute kustom dan Pengenalan Razor Halaman di ASP.NET Core.
Menentukan bahwa Razor komponen harus menangani permintaan secara langsung. Untuk informasi selengkapnya, lihat perutean dan navigasi ASP.NET CoreBlazor.

`@preservewhitespace`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Saat diatur ke false (default), spasi kosong dalam markup yang dirender dari Razor komponen (.razor) dihapus jika:

Di depan atau di belakang dalam elemen.
Di depan atau di belakang dalam RenderFragment parameter. Misalnya, konten anak diteruskan ke komponen lain.
Ini mendahului atau mengikuti blok kode C#, seperti @if atau @foreach.

`@rendermode`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Mengatur mode Razor render komponen:

InteractiveServer: Menerapkan penyajian server interaktif menggunakan Blazor Server.
InteractiveWebAssembly: Menerapkan penyajian WebAssembly interaktif menggunakan Blazor WebAssembly.
InteractiveAuto: Awalnya menerapkan penyajian WebAssembly interaktif menggunakan Blazor Server, lalu menerapkan penyajian WebAssembly interaktif menggunakan WebAssembly pada kunjungan berikutnya setelah Blazor bundel diunduh.

Untuk instans komponen:

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

Dalam definisi komponen:

@rendermode InteractiveServer

Catatan

Blazor templat menyertakan arahan statis using untuk RenderMode dalam file aplikasi _Imports (Components/_Imports.razor) untuk sintaks yang lebih @rendermode pendek:

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

Tanpa direktif sebelumnya, komponen harus menentukan kelas @rendermode statis RenderMode secara eksplisit:

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

Untuk informasi selengkapnya, termasuk panduan tentang menonaktifkan pra-penyajian dengan atribut direktif/arahan, lihat mode render ASP.NET CoreBlazor.

`@section`

Skenario ini hanya berlaku untuk tampilan MVC dan Razor Halaman (.cshtml).

Direktif @section digunakan bersama dengan tata letak MVC dan Razor Pages untuk mengaktifkan tampilan atau halaman untuk merender konten di berbagai bagian halaman HTML. Untuk informasi selengkapnya, lihat Tata letak di ASP.NET Core.

`@typeparam`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Arahan @typeparam mendeklarasikan parameter jenis generik untuk kelas komponen yang dihasilkan:

@typeparam TEntity

Jenis generik dengan where batasan jenis didukung:

@typeparam TEntity where TEntity : IEntity

Untuk informasi lebih lanjut, baca artikel berikut:

`@using`

Direktif @using menambahkan arahan C# using ke tampilan yang dihasilkan:

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

Dalam Razor komponen, @using juga mengontrol komponen mana yang berada dalam cakupan.

Atribut direktif

Razor atribut direktif diwakili oleh ekspresi implisit dengan kata kunci yang dipesan mengikuti @ simbol . Atribut direktif biasanya mengubah cara elemen dikompilasi atau fungsi.

`@attributes`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

@attributes memungkinkan komponen untuk merender atribut yang tidak dideklarasikan. Untuk informasi selengkapnya, lihat ASP.NET Parameter splatting atribut Core Blazor dan arbitrer.

`@bind`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Pengikatan data dalam komponen dilakukan dengan @bind atribut . Untuk informasi selengkapnya, lihat pengikatan data ASP.NET CoreBlazor.

`@bind:culture`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

@bind:culture Gunakan atribut dengan @bind atribut untuk menyediakan System.Globalization.CultureInfo untuk mengurai dan memformat nilai. Untuk informasi selengkapnya, lihat globalisasi dan pelokalan inti Blazor ASP.NET.

`@formname`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

@formname menetapkan nama formulir ke Razor formulir HTML biasa komponen atau formulir berdasarkan EditForm (Editform dokumentasi). Nilai @formname harus unik, yang mencegah tabrakan formulir dalam situasi berikut:

Formulir ditempatkan dalam komponen dengan beberapa formulir.
Formulir bersumber dari pustaka kelas eksternal, biasanya paket NuGet, untuk komponen dengan beberapa formulir, dan pembuat aplikasi tidak mengontrol kode sumber pustaka untuk mengatur nama formulir eksternal yang berbeda dari nama yang digunakan oleh formulir lain dalam komponen.

Untuk informasi dan contoh selengkapnya, lihat gambaran umum formulir ASP.NET CoreBlazor.

`@on{EVENT}`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Razor menyediakan fitur penanganan peristiwa untuk komponen. Untuk informasi selengkapnya, lihat penanganan peristiwa ASP.NET CoreBlazor.

`@on{EVENT}:preventDefault`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Mencegah tindakan default untuk peristiwa tersebut.

`@on{EVENT}:stopPropagation`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Menghentikan penyebaran peristiwa untuk peristiwa tersebut.

`@key`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Atribut @key direktif menyebabkan komponen membedakan algoritma untuk menjamin pelestarian elemen atau komponen berdasarkan nilai kunci. Untuk informasi selengkapnya, lihat Mempertahankan elemen, komponen, dan hubungan model di ASP.NET Core Blazor.

`@ref`

Skenario ini hanya berlaku untuk Razor komponen (.razor).

Referensi komponen (@ref) menyediakan cara untuk mereferensikan instans komponen sehingga Anda dapat mengeluarkan perintah ke instans tersebut. Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.

Delegasi templat Razor

Skenario ini hanya berlaku untuk tampilan MVC dan Razor Halaman (.cshtml).

Razor templat memungkinkan Anda menentukan cuplikan UI dengan format berikut:

@<tag>...</tag>

Contoh berikut mengilustrasikan cara menentukan delegasi templat Razor sebagai Func<T,TResult>. Jenis dinamis ditentukan untuk parameter metode yang dienkapsulasi delegasi. Jenis objek ditentukan sebagai nilai pengembalian delegasi. Templat digunakan dengan List<T> yang Pet memiliki Name properti .

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" }
    };
}

Templat dirender dengan pets disediakan oleh foreach pernyataan:

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

Output yang dirender:

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

Anda juga dapat menyediakan templat sebaris Razor sebagai argumen ke metode . Dalam contoh berikut, Repeat metode menerima Razor templat. Metode ini menggunakan templat untuk menghasilkan konten HTML dengan pengulangan item yang disediakan dari daftar:

@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;
    }
}

Menggunakan daftar hewan peliharaan dari contoh sebelumnya, Repeat metode ini dipanggil dengan:

List<T> dari Pet.
Berapa kali untuk mengulangi setiap hewan peliharaan.
Templat sebaris yang akan digunakan untuk item daftar daftar yang tidak diurutkan.

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

Output yang dirender:

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

Tag Helper

Skenario ini hanya berlaku untuk tampilan MVC dan Razor Halaman (.cshtml).

Ada tiga arahan yang berkaitan dengan Pembantu Tag.

Direktif	Fungsi
`@addTagHelper`	Membuat Pembantu Tag tersedia untuk tampilan.
`@removeTagHelper`	Menghapus Pembantu Tag yang sebelumnya ditambahkan dari tampilan.
`@tagHelperPrefix`	Menentukan awalan tag untuk mengaktifkan dukungan Pembantu Tag dan membuat penggunaan Pembantu Tag menjadi eksplisit.

Razor kata kunci yang dipesan

Razor Kata kunci

page
namespace
functions
inherits
model
section
helper (Saat ini tidak didukung oleh ASP.NET Core)

Razor kata kunci diloloskan dengan @(Razor Keyword) (misalnya, @(functions)).

Kata kunci C# Razor

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

Kata kunci C# Razor harus diloloskan dua kali dengan @(@C# Razor Keyword) (misalnya, @(@case)). Yang pertama @ lolos parser Razor . Yang kedua @ lolos parser C#.

Kata kunci yang dicadangkan tidak digunakan oleh Razor

class

Razor Memeriksa kelas C# yang dihasilkan untuk tampilan

Razor SDK menangani kompilasi Razor file. Secara default, file kode yang dihasilkan tidak dipancarkan. Untuk mengaktifkan pemancaran file kode, atur EmitCompilerGeneratedFiles direktif dalam file proyek (.csproj) ke true:

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

Saat membangun proyek 6.0 (net6.0) dalam Debug konfigurasi build, Razor SDK menghasilkan obj/Debug/net6.0/generated/ direktori di akar proyek. Subdirektorinya berisi file kode halaman yang dipancarkan Razor .

Razor SDK menangani kompilasi Razor file. Saat membangun proyek, Razor SDK menghasilkan obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor direktori di akar proyek. Struktur direktori dalam Razor direktori mencerminkan struktur direktori proyek.

Pertimbangkan struktur direktori berikut dalam proyek ASP.NET Core Razor Pages 2.1:

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

Membangun proyek dalam Debug konfigurasi menghasilkan direktori berikut obj :

 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

Untuk melihat kelas yang dihasilkan untuk Pages/Index.cshtml, buka obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Menampilkan pencarian dan sensitivitas huruf besar/kecil

Mesin Razor tampilan melakukan pencarian peka huruf besar/kecil untuk tampilan. Namun, pencarian aktual ditentukan oleh sistem file yang mendasar:

Sumber berbasis file:
- Pada sistem operasi dengan sistem file yang tidak peka huruf besar/kecil (misalnya, Windows), pencarian penyedia file fisik tidak peka huruf besar/kecil. Misalnya, return View("Test") menghasilkan kecocokan untuk /Views/Home/Test.cshtml, /Views/home/test.cshtml, dan varian casing lainnya.
- Pada sistem file peka huruf besar/kecil (misalnya, Linux, OSX, dan dengan EmbeddedFileProvider), pencarian peka huruf besar/kecil. Misalnya, return View("Test") secara khusus cocok /Views/Home/Test.cshtmldengan .
Tampilan yang telah dikommpilasikan sebelumnya: Dengan ASP.NET Core 2.0 dan yang lebih baru, mencari tampilan yang telah dikommpilasikan tidak peka huruf besar/kecil pada semua sistem operasi. Perilaku ini identik dengan perilaku penyedia file fisik di Windows. Jika dua tampilan yang telah dikompresi hanya berbeda jika terjadi, hasil pencarian tidak deterministik.

Pengembang didorong untuk mencocokkan casing nama file dan direktori dengan casing:

Nama area, pengontrol, dan tindakan.
Razor Halaman.

Kasus pencocokan memastikan penyebaran menemukan tampilan mereka terlepas dari sistem file yang mendasar.

Impor yang digunakan oleh Razor

Impor berikut dihasilkan oleh templat web ASP.NET Core untuk mendukung Razor File:

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;

Sumber Daya Tambahan:

Pengantar ASP.NET Pemrograman Web Menggunakan Razor Sintaksis menyediakan banyak sampel pemrograman dengan Razor sintaks.

Bagikan melalui

Razor referensi sintaks untuk ASP.NET Core

Penyajian HTML

Razor sintaks

Grafik Vektor Yang Dapat Diskalakan (SVG)

Ekspresi implisit Razor

Ekspresi eksplisit Razor

Pengodean ekspresi

Razor blok kode

Transisi implisit

Transisi yang dibatasi eksplisit

Transisi garis eksplisit

Penyajian atribut bersyar

Struktur kontrol

Bersyarjana @if, else if, else, and @switch

Perulangan @for, @foreach, @while, and @do while

Majemuk @using

@try, catch, finally

@lock

Komentar

Arahan

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@rendermode

@section

@typeparam

@using

Atribut direktif

@attributes

@bind

@bind:culture

@formname

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

Delegasi templat Razor

Tag Helper

Razor kata kunci yang dipesan

Razor Kata kunci

Kata kunci C# Razor

Kata kunci yang dicadangkan tidak digunakan oleh Razor

Razor Memeriksa kelas C# yang dihasilkan untuk tampilan

Menampilkan pencarian dan sensitivitas huruf besar/kecil

Impor yang digunakan oleh Razor

Sumber Daya Tambahan:

Sumber Daya Tambahan:

Bersyarjana `@if, else if, else, and @switch`

Perulangan `@for, @foreach, @while, and @do while`

Majemuk `@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`