Razor referensi sintaks untuk ASP.NET Core

2025-05-28

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 Pemrograman Web ASP.NET Menggunakan Razor Sintaks menyediakan banyak contoh 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 pada file .cshtmlRazor dirender oleh server dalam kondisi 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 Razor kata kunci yang dipesan, simbol tersebut berubah menjadi markup yang spesifik untuk Razor. 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 sudah 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 dipadukan.

<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" belum ditutup. Semua elemen harus bersifat 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 Razor eksplisit atau Razor blok kode.

Ekspresi eksplisit Razor

Ekspresi eksplisit Razor terdiri dari simbol @ dengan tanda kurung yang 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 ditampilkan.

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

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

Kodal ekspresi

Ekspresi C# yang mengevaluasi ke string dikodekan HTML. Ekspresi C# yang mengevaluasi menjadi IHtmlContent dirender langsung melalui IHtmlContent.WriteTo. Ekspresi C# yang tidak dievaluasi menjadi IHtmlContent akan dikonversi menjadi 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 itu merupakan tugas yang 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 tag HTML atau Razor, terjadi kesalahan runtime Razor.

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

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

Transisi garis eksplisit

Untuk merender 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 akan dihasilkan.

Karakter tambahan @ dalam file Razor dapat menyebabkan kesalahan kompilator pada pernyataan di kemudian 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.

Penerapan atribut bersyarat

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

Misalnya, pertimbangkan markup 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">

Razor mempertahankan data- atribut jika nilainya adalah null atau false.

Pertimbangkan markup berikut Razor :

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

Markup sebelumnya Razor menghasilkan HTML berikut:

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

Struktur kontrol

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

Kondisional `@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 berbasis template dapat dirender dengan pernyataan kontrol perulangan. Untuk menampilkan daftar orang:

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

Pernyataan-pernyataan perulangan berikut disediakan oleh sistem:

@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, Helper HTML merender tag <form> dengan pernyataan @using:

@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 simbol @ diikuti oleh kata kunci yang telah dipesan. Direktif biasanya mengubah cara tampilan dikompilasi atau fungsi.

Memahami cara Razor menghasilkan kode untuk tampilan memudahkan pemahaman cara kerja direktif.

@{
    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 @codeRazor komponen untuk menambahkan anggota C# (bidang, properti, dan metode) ke komponen:

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

Untuk komponen Razor, @code adalah alias dari @functions dan direkomendasikan daripada @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 daripada @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 file _ViewImports.cshtml yang diimpor oleh tampilan:

@inherits CustomRazorPage<TModel>

Kode berikut adalah contoh tampilan dengan tipe yang kuat:

@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 ASP.NET Core Blazor layout.

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

Razor Model 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 dalam RazorPage<T> mengenai kelas yang dihasilkan dari tampilan. Jika direktif @model tidak ditentukan, properti Model adalah dari jenis dynamic. Untuk informasi selengkapnya, lihat Strongly typed models and the @model keyword .

`@namespace`

Direktif @namespace :

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

@namespace Your.Namespace.Here

Untuk contoh Halaman Razor pada tabel berikut ini:

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

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 file yang diimpor yang digunakan dengan tampilan MVC dan komponen.

Ketika beberapa file impor memiliki direktif @namespace, file yang paling dekat dengan halaman, tampilan, atau komponen di pohon direktori digunakan untuk mengatur namespace 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:

Di dalam sebuah .cshtml 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 ASP.NET Core Blazor perutean dan navigasi.

`@preservewhitespace`

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

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

Mengawali atau mengakhiri dalam elemen.
Terletak di awal atau di akhir dalam parameter RenderFragment. 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 render komponen Razor.

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 arahan sebelumnya, komponen harus menetapkan kelas RenderMode statis dalam sintaks @rendermode secara eksplisit.

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

Untuk informasi selengkapnya, termasuk panduan tentang menonaktifkan prarendering dengan atribut direktif/arahan, lihat ASP.NET Core Blazor render modes.

`@section`

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

Direktif @section digunakan bersama dengan Razor MVC dan 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 direpresentasikan oleh ekspresi implisit yang mengikuti simbol @ dengan kata kunci khusus. 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 Core Blazor mengenai splatting atribut dan parameter sembarang.

`@bind`

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

Pengikatan data dalam komponen dilakukan dengan @bind atribut . Untuk informasi selengkapnya, lihat ASP.NET Core Blazor data binding.

`@bind:culture`

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

Gunakan atribut @bind:culture bersama dengan atribut @bind untuk menyediakan System.Globalization.CultureInfo dalam mengurai dan memformat nilai. Untuk informasi lebih lanjut, lihat ASP.NET Core Blazor globalisasi dan lokalisasi.

`@formname`

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

@formname menetapkan sebuah nama untuk formulir HTML biasa dari Razor atau formulir berdasarkan EditForm (Editform dokumentasi). Nilai @formname harus unik, yang mencegah benturan dalam situasi berikut:

Formulir ditempatkan dalam komponen yang memiliki 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 tinjauan 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 algoritma pembanding komponen menjamin pemeliharaan elemen atau komponen berdasarkan nilai dari 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 ASP.NET Core Razor komponen.

Delegasi Razor yang ditemplatkan

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 ditetapkan sebagai nilai pengembalian delegasi. Templat digunakan dengan List<T> yang memiliki properti Pet dari 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" }
    };
}

Templat dirender dengan pets disediakan oleh foreach perintah:

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

Hasil 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, metode Repeat menerima templat Razor. 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.
Jumlah pengulangan untuk setiap hewan peliharaan.
Templat sebaris yang akan digunakan untuk item dalam daftar tak berurutan.

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

Hasil 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 direktif 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 terpelihara

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 di-escape dua kali dengan @(@C# Razor Keyword) (misalnya, @(@case)). Yang pertama-tama @ meloloskan diri dari parser Razor. Elemen kedua @ lolos dari parser C#.

Kata kunci yang telah 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 build konfigurasi Debug, SDK Razor menghasilkan direktori obj/Debug/net6.0/generated/ di root proyek. Subdirektorinya berisi file kode halaman yang dihasilkan 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 view melakukan pencarian yang case-sensitive untuk view. 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 yang sensitif terhadap huruf besar/kecil (misalnya, Linux, OSX, dan dengan EmbeddedFileProvider), pencarian dilakukan dengan memperhatikan huruf besar/kecil. Misalnya, return View("Test") cocok secara khusus dengan /Views/Home/Test.cshtml.
Tampilan yang telah dikompilasi sebelumnya: Dengan ASP.NET Core 2.0 atau yang lebih baru, pencarian tampilan yang sudah dikompilasi menjadi tidak peka terhadap 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, pengendali, 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 Pemrograman Web ASP.NET Menggunakan Razor Sintaks menyediakan banyak contoh 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

Kodal ekspresi

Razor blok kode

Transisi implisit

Transisi yang dibatasi eksplisit

Transisi garis eksplisit

Penerapan atribut bersyarat

Struktur kontrol

Kondisional @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 Razor yang ditemplatkan

Tag Helper

Razor kata kunci terpelihara

Razor Kata kunci

Kata kunci C# Razor

Kata kunci yang telah 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:

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