Razor dokumentacja składni dla ASP.NET Core

Artykuł
11/30/2023

Przez Rick Anderson, Taylor Mullen i Dan Vicarel

Razor to składnia znaczników umożliwiająca osadzanie kodu opartego na platformie .NET na stronach internetowych. Składnia Razor składa się z Razor znaczników, C#i HTML. Pliki zawierające Razor zazwyczaj mają .cshtml rozszerzenie pliku. Razor znajduje się również w Razor plikach składników (.razor). Razor składnia jest podobna do aparatów tworzenia szablonów różnych struktur jednostronicowych aplikacji JavaScript (SPA), takich jak Angular, React, VueJs i Svelte. Aby uzyskać więcej informacji, zobacz Funkcje opisane w tym artykule są przestarzałe od wersji ASP.NET Core 3.0.

Wprowadzenie do ASP.NET programowania internetowego Razor przy użyciu składni zawiera wiele przykładów programowania ze składnią Razor . Chociaż temat został napisany dla ASP.NET, a nie ASP.NET Core, większość przykładów ma zastosowanie do ASP.NET Core.

Renderowanie kodu HTML

Razor Domyślnym językiem jest HTML. Renderowanie kodu HTML z Razor znaczników nie różni się od renderowania kodu HTML z pliku HTML. Znaczniki HTML w .cshtmlRazor plikach są renderowane przez serwer bez zmian.

Składnia aparatu Razor

Razor obsługuje język C# i używa symbolu @ do przejścia z kodu HTML do języka C#. Razor oblicza wyrażenia języka C# i renderuje je w danych wyjściowych HTML.

Gdy po Razor symbolu @ następuje zastrzeżone słowo kluczowe, przechodzi do Razorznaczników specyficznych dla parametru. W przeciwnym razie przechodzi do zwykłego kodu HTML.

Aby uniknąć symbolu @ w Razor adiustacji, użyj drugiego @ symbolu:

<p>@@Username</p>

Kod jest renderowany w kodzie HTML z jednym @ symbolem:

<p>@Username</p>

Atrybuty HTML i zawartość zawierająca adresy e-mail nie traktują symbolu @ jako znaku przejścia. Adresy e-mail w poniższym przykładzie są nietknięte przez Razor analizowanie:

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

Skalowalna grafika wektorowa (SVG)

Obsługiwane są elementy svG foreignObject :

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

Wyrażenia niejawne Razor

Wyrażenia niejawne Razor zaczynają się od @ następującego kodu w języku C#:

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

Z wyjątkiem słowa kluczowego C# await wyrażenia niejawne nie mogą zawierać spacji. Jeśli instrukcja języka C# ma wyraźne zakończenie, spacje można przeplatać:

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

Wyrażenia niejawne nie mogą zawierać typów ogólnych języka C#, ponieważ znaki wewnątrz nawiasów (<>) są interpretowane jako tag HTML. Następujący kod jest nieprawidłowy:

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

Powyższy kod generuje błąd kompilatora podobny do jednego z następujących:

Element "int" nie został zamknięty. Wszystkie elementy muszą być zamykane samodzielnie lub mają pasujący tag końcowy.
Nie można przekonwertować grupy metod "GenericMethod" na typ niedelegowany "object". Czy zamierzasz wywołać metodę?

Wywołania metod ogólnych muszą być opakowane w wyrażenie jawneRazorRazorlub blok kodu.

Wyrażenia jawne Razor

Wyrażenia jawne Razor składają się z symbolu ze zrównoważonym @ nawiasem. Aby renderować czas ostatniego tygodnia, używane są następujące Razor znaczniki:

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

Każda zawartość w nawiasie @() jest obliczana i renderowana do danych wyjściowych.

Wyrażenia niejawne opisane w poprzedniej sekcji zazwyczaj nie mogą zawierać spacji. W poniższym kodzie tydzień nie jest odejmowany od bieżącego czasu:

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

Kod renderuje następujący kod HTML:

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

Wyrażenia jawne mogą służyć do łączenia tekstu z wynikiem wyrażenia:

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

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

Bez wyrażenia Age@joe.Age jawnego jest traktowany jako adres e-mail i Age@joe.Age renderowany. Podczas zapisywania jako wyrażenia Age33 jawnego jest renderowany.

Wyrażenia jawne mogą służyć do renderowania danych wyjściowych z metod ogólnych w .cshtml plikach. Poniższy znacznik pokazuje, jak poprawić wyświetlany wcześniej błąd spowodowany nawiasami ogólnymi języka C#. Kod jest napisany jako wyrażenie jawne:

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

Kodowanie wyrażeń

Wyrażenia języka C#, które oceniają ciąg, są kodowane kodem HTML. Wyrażenia języka C#, które oceniają IHtmlContent , są renderowane bezpośrednio za pomocą polecenia IHtmlContent.WriteTo. Wyrażenia języka C#, które nie są obliczane IHtmlContent , są konwertowane na ciąg ToString według i zakodowane przed ich renderowaniem.

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

Powyższy kod renderuje następujący kod HTML:

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

Kod HTML jest wyświetlany w przeglądarce jako zwykły tekst:

Hello World

HtmlHelper.Raw Dane wyjściowe nie są kodowane, ale renderowane jako znaczniki HTML.

Ostrzeżenie

Użycie HtmlHelper.Raw danych wejściowych niesanitowanych użytkowników jest zagrożeniem bezpieczeństwa. Dane wejściowe użytkownika mogą zawierać złośliwy kod JavaScript lub inne luki w zabezpieczeniach. Oczyszczanie danych wejściowych użytkownika jest trudne. Unikaj używania z HtmlHelper.Raw danymi wejściowymi użytkownika.

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

Kod renderuje następujący kod HTML:

<span>Hello World</span>

Razor bloki kodu

Razor bloki kodu zaczynają się od @ i są ujęte w {}. W przeciwieństwie do wyrażeń kod C# wewnątrz bloków kodu nie jest renderowany. Bloki kodu i wyrażenia w widoku mają ten sam zakres i są zdefiniowane w następującej kolejności:

@{
    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 renderuje następujący kod HTML:

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

W blokach kodu zadeklaruj funkcje lokalne za pomocą znaczników, aby służyć jako metody tworzenia szablonów:

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

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

Kod renderuje następujący kod HTML:

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

Niejawne przejścia

Domyślnym językiem bloku kodu jest C#, ale Razor strona może przejść z powrotem do kodu HTML:

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

Jawne rozdzielane przejście

Aby zdefiniować podsekcję bloku kodu, który powinien renderować kod HTML, umieść znaki renderowania za pomocą tagu Razor<text> :

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

Użyj tej metody, aby renderować kod HTML, który nie jest otoczony tagiem HTML. Bez kodu HTML lub Razor tagu Razor występuje błąd środowiska uruchomieniowego.

Tag jest przydatny do kontrolowania <text> białych znaków podczas renderowania zawartości:

Renderowana jest tylko zawartość między tagiem <text> .
W danych wyjściowych HTML nie ma żadnych białych znaków przed tagiem <text> ani po nim.

Jawne przejście wiersza

Aby renderować pozostałą część wiersza jako kod HTML wewnątrz bloku kodu, użyj @: składni:

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

@: Bez elementu w kodzie Razor jest generowany błąd środowiska uruchomieniowego.

Dodatkowe @ znaki w Razor pliku mogą powodować błędy kompilatora w instrukcjach w dalszej części bloku. Te dodatkowe @ błędy kompilatora:

Może być trudne do zrozumienia, ponieważ rzeczywisty błąd występuje przed zgłoszonym błędem.
Często po połączeniu wielu niejawnych i jawnych wyrażeń w pojedynczy blok kodu.

Renderowanie atrybutów warunkowych

Razor automatycznie pomija atrybuty, które nie są potrzebne. Jeśli przekazana wartość to null lub false, atrybut nie jest renderowany.

Rozważmy na przykład następujące brzytwy:

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

Razor Powyższy znacznik generuje następujący kod HTML:

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

Struktury sterujące

Struktury sterujące to rozszerzenie bloków kodu. Wszystkie aspekty bloków kodu (przejście do znaczników, wbudowany kod C#) mają zastosowanie również do następujących struktur:

Warunkowe `@if, else if, else, and @switch`

@if kontrolki podczas uruchamiania kodu:

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

else i else if nie wymagają symbolu @ :

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

Poniższy znacznik pokazuje, jak używać instrukcji switch:

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

Pętli `@for, @foreach, @while, and @do while`

Szablonowy kod HTML można renderować za pomocą instrukcji pętli kontrolek. Aby renderować listę osób:

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

Obsługiwane są następujące instrukcje pętli:

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

Związek `@using`

W języku C# instrukcja using jest używana do zapewnienia usunięcia obiektu. W Razorsystemie ten sam mechanizm służy do tworzenia pomocników HTML zawierających dodatkową zawartość. W poniższym kodzie pomocnicy HTML renderuje <form> tag za pomocą instrukcji @using :

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

`@try, catch, finally`

Obsługa wyjątków jest podobna do języka 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 ma możliwość ochrony krytycznych sekcji za pomocą instrukcji blokady:

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

Komentarze

Razor obsługuje komentarze w języku C# i HTML:

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

Kod renderuje następujący kod HTML:

<!-- HTML comment -->

Razor komentarze są usuwane przez serwer przed renderowaniem strony internetowej. Razor używa @* *@ do ograniczeń komentarzy. Następujący kod jest komentowany, więc serwer nie renderuje żadnych znaczników:

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

Dyrektyw

Razor dyrektywy są reprezentowane przez wyrażenia niejawne z zastrzeżonymi słowami kluczowymi po symbolu @ . Dyrektywa zwykle zmienia sposób analizowania widoku lub włącza różne funkcje.

Zrozumienie sposobu Razor generowania kodu dla widoku ułatwia zrozumienie sposobu działania dyrektyw.

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

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

Kod generuje klasę podobną do następującej:

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

W dalszej części tego artykułu sekcja Inspekcja Razor klasy języka C# wygenerowana dla widoku wyjaśnia, jak wyświetlić tę wygenerowaną klasę.

`@attribute`

Dyrektywa @attribute dodaje dany atrybut do klasy wygenerowanej strony lub widoku. W poniższym przykładzie [Authorize] dodano atrybut :

@attribute [Authorize]

Dyrektywę @attribute można również użyć do dostarczania szablonu trasy opartej na stałej w składniku Razor . W poniższym przykładzie @page dyrektywa w składniku jest zastępowana dyrektywą @attribute i szablonem trasy opartej na stałej w Constants.CounterRouteelemencie , który jest ustawiany gdzie indziej w aplikacji na "/counter":

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

`@code`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Blok @code umożliwia składnikowi Razor dodawanie elementów członkowskich języka C# (pól, właściwości i metod) do składnika:

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

W przypadku Razor składników @code jest aliasem @functions i zalecanym elementem @functions. Dopuszczalne jest więcej niż jeden @code blok.

`@functions`

Dyrektywa @functions umożliwia dodawanie składowych języka C# (pól, właściwości i metod) do wygenerowanej klasy:

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

W Razor składnikach użyj polecenia @functions@code , aby dodać elementy członkowskie języka C#.

Na przykład:

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

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

Kod generuje następujące znaczniki HTML:

<div>From method: Hello</div>

Następujący kod to wygenerowana Razor klasa języka C#:

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 metody służą jako metody tworzenia szablonów, gdy mają znaczniki:

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

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

Kod renderuje następujący kod HTML:

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

`@implements`

Dyrektywa @implements implementuje interfejs dla wygenerowanej klasy.

Poniższy przykład implementuje System.IDisposable metodę tak, aby można było wywołać metodę Dispose :

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

`@inherits`

Dyrektywa @inherits zapewnia pełną kontrolę nad klasą, która dziedziczy widok:

@inherits TypeNameOfClassToInheritFrom

Następujący kod jest niestandardowym Razor typem strony:

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

Element CustomText jest wyświetlany w widoku:

@inherits CustomRazorPage<TModel>

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

Kod renderuje następujący kod HTML:

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

@model można @inherits go użyć w tym samym widoku. @inherits może znajdować się w _ViewImports.cshtml pliku importowym widoku:

@inherits CustomRazorPage<TModel>

Poniższy kod jest przykładem silnie typizowanego widoku:

@inherits CustomRazorPage<TModel>

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

Jeśli element "rick@contoso.com" jest przekazywany w modelu, widok generuje następujące znaczniki HTML:

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

Dyrektywa @inject umożliwia Razor stronie wstrzyknięcie usługi z kontenera usługi do widoku. Aby uzyskać więcej informacji, zobacz Wstrzykiwanie zależności do widoków.

`@layout`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Dyrektywa @layout określa układ składników routingu Razor , które mają dyrektywę @page . Składniki układu służą do unikania duplikowania i niespójności kodu. Aby uzyskać więcej informacji, zobacz ASP.NET Układy podstawoweBlazor.

`@model`

Ten scenariusz dotyczy tylko widoków MVC i Razor stron (.cshtml).

Dyrektywa @model określa typ modelu przekazanego do widoku lub strony:

@model TypeNameOfModel

W aplikacji ASP.NET Core MVC lub Razor Pages utworzonej przy użyciu poszczególnych kont Views/Account/Login.cshtml użytkowników zawiera następującą deklarację modelu:

@model LoginViewModel

Wygenerowana klasa dziedziczy z klasy RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor Uwidacznia Model właściwość na potrzeby uzyskiwania dostępu do modelu przekazanego do widoku:

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

Dyrektywa @model określa typ Model właściwości. Dyrektywa określa T w RazorPage<T> tym, że wygenerowana klasa, z którego pochodzi widok. @model Jeśli dyrektywa nie jest określona, Model właściwość ma typ dynamic. Aby uzyskać więcej informacji, zobacz Strongly typed models and the @model keyword.

`@namespace`

Dyrektywa @namespace :

Ustawia przestrzeń nazw klasy wygenerowanej Razor strony, widoku MVC lub Razor składnika.
Ustawia główne pochodne przestrzenie nazw stron, widoków lub składników z najbliższego pliku importu w drzewie katalogów, _ViewImports.cshtml (widoki lub strony) lub _Imports.razor (Razor składniki).

@namespace Your.Namespace.Here

W przykładzie Razor Strony pokazanym w poniższej tabeli:

Każda strona importuje Pages/_ViewImports.cshtmlelement .
Pages/_ViewImports.cshtml zawiera @namespace Hello.World.
Każda strona ma Hello.World jako katalog główny przestrzeni nazw.

Strona	Przestrzeń nazw
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

Powyższe relacje dotyczą importowania plików używanych z widokami i Razor składnikami MVC.

Jeśli wiele plików importu ma dyrektywę @namespace , plik najbliżej strony, widoku lub składnika w drzewie katalogów jest używany do ustawiania głównej przestrzeni nazw.

EvenMorePages Jeśli folder w poprzednim przykładzie zawiera plik @namespace Another.Planet importowania (lub Pages/MorePages/EvenMorePages/Page.cshtml plik zawiera @namespace Another.Planet), wynik zostanie wyświetlony w poniższej tabeli.

Strona	Przestrzeń nazw
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Another.Planet`

`@page`

Dyrektywa @page ma różny wpływ w zależności od typu pliku, w którym się pojawia. Dyrektywa:

.cshtml W pliku wskazuje, że plik jest stronąRazor. Aby uzyskać więcej informacji, zobacz Trasy niestandardowe i Wprowadzenie do Razor stron w programie ASP.NET Core.
Określa, że Razor składnik powinien obsługiwać żądania bezpośrednio. Aby uzyskać więcej informacji, zobacz ASP.NET Core Blazor routing i nawigacja.

`@preservewhitespace`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Po ustawieniu wartości false (ustawienie domyślne) w renderowanych znacznikach ze Razor składników (.razor) zostanie usunięta, jeśli:

Występują na początku lub na końcu elementu.
Wiodące lub końcowe w obrębie parametru RenderFragment . Na przykład zawartość podrzędna przekazana do innego składnika.
Poprzedzają blok kodu języka C# lub następują po takim bloku, na przykład @if lub @foreach.

`@rendermode`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Ustawia tryb renderowania Razor składnika:

InteractiveServer: Stosuje renderowanie interakcyjnego serwera przy użyciu polecenia Blazor Server.
InteractiveWebAssembly: Stosuje interakcyjne renderowanie zestawu WebAssembly przy użyciu polecenia Blazor WebAssembly.
InteractiveAuto: Początkowo stosuje interakcyjne renderowanie zestawu WebAssembly przy użyciu metody Blazor Server, a następnie stosuje interakcyjne renderowanie zestawu WebAssembly przy użyciu zestawu WebAssembly podczas kolejnych wizyt po Blazor pobraniu pakietu.

W przypadku wystąpienia składnika:

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

W definicji składnika:

@rendermode InteractiveServer

Uwaga

Blazor szablony zawierają dyrektywę statyczną using dla RenderMode pliku aplikacji _Imports (Components/_Imports.razor) w celu uzyskania krótszej @rendermode składni:

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

Bez powyższej dyrektywy składniki muszą jawnie określić klasę statyczną RenderMode w @rendermode składni:

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

Aby uzyskać więcej informacji, w tym wskazówki dotyczące wyłączania prerenderingu za pomocą atrybutu dyrektywy/dyrektywy, zobacz tryby renderowania ASP.NET CoreBlazor.

`@section`

Ten scenariusz dotyczy tylko widoków MVC i Razor stron (.cshtml).

Dyrektywa @section jest używana w połączeniu z układami MVC i Razor Pages, aby umożliwić widokom lub stronom renderowanie zawartości w różnych częściach strony HTML. Aby uzyskać więcej informacji, zobacz Layout in ASP.NET Core (Układ w ASP.NET Core).

`@typeparam`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Dyrektywa @typeparam deklaruje parametr typu ogólnego dla generowanej klasy składnika:

@typeparam TEntity

Obsługiwane są typy ogólne z where ograniczeniami typów:

@typeparam TEntity where TEntity : IEntity

Aby uzyskać więcej informacji, zobacz następujące artykuły:

`@using`

Dyrektywa @using dodaje dyrektywę C# using do wygenerowanego widoku:

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

W Razor składnikach @usingsteruje również składnikami, które znajdują się w zakresie.

Atrybuty dyrektywy

Razor atrybuty dyrektywy są reprezentowane przez wyrażenia niejawne z zastrzeżonymi słowami kluczowymi po symbolu @ . Atrybut dyrektywy zwykle zmienia sposób analizowania elementu lub włącza różne funkcje.

`@attributes`

Ten scenariusz dotyczy Razor tylko składników (.razor).

@attributes umożliwia składnikowi renderowanie atrybutów niezdeklarowanych. Aby uzyskać więcej informacji, zobacz ASP.NET Core Blazor atrybutówplatting i dowolnych parametrów.

`@bind`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Powiązanie danych w składnikach odbywa się za pomocą atrybutu @bind . Aby uzyskać więcej informacji, zobacz powiązanie danych ASP.NET CoreBlazor.

`@bind:culture`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Użyj atrybutu @bind:culture z atrybutem @bind , aby podać System.Globalization.CultureInfo element do analizowania i formatowania wartości. Aby uzyskać więcej informacji, zobacz ASP.NET Core Blazor globalizacji i lokalizacji.

`@formname`

Ten scenariusz dotyczy Razor tylko składników (.razor).

@formname przypisuje nazwę formularza do zwykłego Razor formularza HTML składnika lub formularza opartego na EditForm (Editform dokumentacji). Wartość powinna być unikatowa @formname , co zapobiega kolizjom formularzy w następujących sytuacjach:

Formularz jest umieszczany w składniku z wieloma formularzami.
Formularz pochodzi z zewnętrznej biblioteki klas, często pakietu NuGet, dla składnika z wieloma formularzami, a autor aplikacji nie kontroluje kodu źródłowego biblioteki w celu ustawienia innej nazwy formularza zewnętrznego niż nazwa używana przez inny formularz w składniku.

Aby uzyskać więcej informacji i przykładów, zobacz omówienie formularzy ASP.NET CoreBlazor.

`@on{EVENT}`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Razor Udostępnia funkcje obsługi zdarzeń dla składników. Aby uzyskać więcej informacji, zobacz obsługa zdarzeń ASP.NET CoreBlazor.

`@on{EVENT}:preventDefault`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Uniemożliwia domyślną akcję zdarzenia.

`@on{EVENT}:stopPropagation`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Zatrzymuje propagację zdarzeń dla zdarzenia.

`@key`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Atrybut @key dyrektywy powoduje różnicowanie składników algorytmu w celu zagwarantowania zachowania elementów lub składników na podstawie wartości klucza. Aby uzyskać więcej informacji, zobacz Zachowanie relacji elementu, składnika i modelu w usłudze ASP.NET Core Blazor.

`@ref`

Ten scenariusz dotyczy Razor tylko składników (.razor).

Odwołania do składników (@ref) umożliwiają odwołowanie się do wystąpienia składnika, dzięki czemu można wydać polecenia do tego wystąpienia. Aby uzyskać więcej informacji, zobacz ASP.NET Podstawowe Razor składniki.

Delegowanie szablonów Razor

Ten scenariusz dotyczy tylko widoków MVC i Razor stron (.cshtml).

Razor szablony umożliwiają zdefiniowanie fragmentu kodu interfejsu użytkownika w następującym formacie:

@<tag>...</tag>

W poniższym przykładzie pokazano, jak określić pełnomocnika szablonu Razor jako .Func<T,TResult> Typ dynamiczny jest określony dla parametru metody, którą hermetyzuje delegat. Typ obiektu jest określony jako wartość zwracana delegata. Szablon jest używany z elementem List<T>Pet z właściwością 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" }
    };
}

Szablon jest renderowany za pomocą pets instrukcji foreach :

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

Renderowane dane wyjściowe:

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

Szablon wbudowany Razor można również podać jako argument metody. W poniższym przykładzie Repeat metoda odbiera Razor szablon. Metoda używa szablonu do tworzenia zawartości HTML z powtórzeniami elementów dostarczonych z listy:

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

Korzystając z listy zwierząt domowych z poprzedniego przykładu, metoda jest wywoływana Repeat za pomocą:

List<T> z Pet.
Liczba powtórzeń każdego zwierzaka.
Wbudowany szablon do użycia dla elementów listy nieurządkowanej listy.

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

Renderowane dane wyjściowe:

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

Pomocnicy tagów

Ten scenariusz dotyczy tylko widoków MVC i Razor stron (.cshtml).

Istnieją trzy dyrektywy dotyczące pomocników tagów.

Dyrektywa	Function
`@addTagHelper`	Udostępnia pomocników tagów do widoku.
`@removeTagHelper`	Usuwa pomocników tagów dodanych wcześniej z widoku.
`@tagHelperPrefix`	Określa prefiks tagu, aby włączyć obsługę pomocnika tagów i jawne użycie pomocnika tagów.

Razor zastrzeżone słowa kluczowe

Razor Słowa kluczowe

page
namespace
functions
inherits
model
section
helper (Obecnie nieobsługiwane przez ASP.NET Core)

Razor słowa kluczowe są uniknięte za pomocą @(Razor Keyword) elementu (na przykład @(functions)).

Słowa kluczowe języka C# Razor

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

Słowa kluczowe języka C# Razor muszą być dwukrotnie ucieczki @(@C# Razor Keyword) (na przykład @(@case)). Pierwsza @ ucieczka analizatora Razor . Drugi @ element ucieczki analizatora języka C#.

Zastrzeżone słowa kluczowe nieużytowane przez Razor

class

Razor Sprawdzanie klasy języka C# wygenerowanej dla widoku

Zestaw Razor SDK obsługuje kompilację Razor plików. Domyślnie wygenerowane pliki kodu nie są emitowane. Aby włączyć emitowanie plików kodu, ustaw dyrektywę EmitCompilerGeneratedFiles w pliku projektu (.csproj) na true:

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

Podczas kompilowania projektu w wersji 6.0 (net6.0) w Debug konfiguracji kompilacji zestaw Razor SDK generuje obj/Debug/net6.0/generated/ katalog w katalogu głównym projektu. Jego podkatalog zawiera emitowane Razor pliki kodu strony.

Zestaw Razor SDK obsługuje kompilację Razor plików. Podczas kompilowania projektu zestaw Razor SDK generuje obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor katalog w katalogu głównym projektu. Struktura katalogów Razor w katalogu odzwierciedla strukturę katalogów projektu.

Rozważ następującą strukturę katalogów w projekcie 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

Kompilowanie projektu w Debug konfiguracji daje następujący obj katalog:

 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

Aby wyświetlić wygenerowaną klasę dla Pages/Index.cshtmlelementu , otwórz plik obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Wyświetlanie odnośników i poufności wielkości liter

Aparat Razor widoków wykonuje wyszukiwanie z uwzględnieniem wielkości liter dla widoków. Jednak rzeczywiste wyszukiwanie jest określane przez bazowy system plików:

Źródło oparte na plikach:
- W systemach operacyjnych z systemami plików bez uwzględniania wielkości liter (na przykład systemu Windows) nie jest uwzględniana wielkość liter. Na przykład return View("Test") wyniki są zgodne z parametrami /Views/Home/Test.cshtml, /Views/home/test.cshtmli dowolnym innym wariantem wielkości liter.
- W systemach plików z uwzględnieniem wielkości liter (na przykład w systemach Linux, OSX i z elementem EmbeddedFileProvider) uwzględniana jest wielkość liter. Na przykład w return View("Test") szczególności pasuje /Views/Home/Test.cshtmldo elementu .
Wstępnie skompilowane widoki: w przypadku ASP.NET Core 2.0 i nowszych widoków wstępnie skompilowanych jest bez uwzględniania wielkości liter we wszystkich systemach operacyjnych. Zachowanie jest identyczne z zachowaniem fizycznego dostawcy plików w systemie Windows. Jeśli dwa wstępnie skompilowane widoki różnią się tylko w przypadku, wynik wyszukiwania jest niedeterministyczny.

Deweloperzy są zachęcani do dopasowywania wielkości liter nazw plików i katalogów do wielkości liter:

Nazwy obszaru, kontrolera i akcji.
Razor Stron.

Dopasowanie przypadku gwarantuje, że wdrożenia znajdą swoje widoki niezależnie od bazowego systemu plików.

Importy używane przez Razor

Następujące importy są generowane przez szablony internetowe platformy ASP.NET Core do obsługi Razor plików:

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;

Dodatkowe zasoby

Wprowadzenie do ASP.NET programowania internetowego Razor przy użyciu składni zawiera wiele przykładów programowania ze składnią Razor .

Razor dokumentacja składni dla ASP.NET Core

Renderowanie kodu HTML

Składnia aparatu Razor

Skalowalna grafika wektorowa (SVG)

Wyrażenia niejawne Razor

Wyrażenia jawne Razor

Kodowanie wyrażeń

Razor bloki kodu

Niejawne przejścia

Jawne rozdzielane przejście

Jawne przejście wiersza

Renderowanie atrybutów warunkowych

Struktury sterujące

Warunkowe @if, else if, else, and @switch

Pętli @for, @foreach, @while, and @do while

Związek @using

@try, catch, finally

@lock

Komentarze

Dyrektyw

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@rendermode

@section

@typeparam

@using

Atrybuty dyrektywy

@attributes

@bind

@bind:culture

@formname

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

Delegowanie szablonów Razor

Pomocnicy tagów

Razor zastrzeżone słowa kluczowe

Razor Słowa kluczowe

Słowa kluczowe języka C# Razor

Zastrzeżone słowa kluczowe nieużytowane przez Razor

Razor Sprawdzanie klasy języka C# wygenerowanej dla widoku

Wyświetlanie odnośników i poufności wielkości liter

Importy używane przez Razor

Dodatkowe zasoby

Opinia

Dodatkowe zasoby

Warunkowe `@if, else if, else, and @switch`

Pętli `@for, @foreach, @while, and @do while`

Związek `@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`