Razor dokumentacja składni dla ASP.NET Core

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 silników szablonów różnych frameworków 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 programowania internetowego ASP.NET przy użyciu składni Razor zawiera wiele przykładów programowania z użyciem 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 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 symbolu @ następuje zastrzeżone słowo kluczowe Razor, przechodzi do znacznika specyficznego dla Razor. W przeciwnym razie przechodzi do zwykłego kodu HTML.

Aby uniknąć symbolu @ w znacznikach Razor, 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 pozostają nietknięte przez Razor parsowanie.

<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 @, po którym następuje kod 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ć albo samozamykające się, albo mieć pasujący tag końcowy.
Nie można przekonwertować grupy metod "GenericMethod" na typ niedelegowany "object". Czy zamierzałeś wywołać metodę?

Wywołania metod generycznych muszą być umieszczone w jawne wyrażenie Razor lub w 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żenie jawne, Age33 jest renderowane.

Jawne wyrażenia mogą być używane do renderowania danych wyjściowych z metod ogólnych w plikach .cshtml. Poniższy znacznik pokazuje, jak poprawić wyświetlany wcześniej błąd spowodowany nawiasami generycznymi 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 są interpretowane jako IHtmlContent, są renderowane bezpośrednio poprzez IHtmlContent.WriteTo. Wyrażenia języka C#, które nie są obliczane do IHtmlContent, są konwertowane na ciąg przez ToString i kodowane 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. Filtrowanie danych wejściowych użytkownika jest trudne. Unikaj używania HtmlHelper.Raw z 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 odgraniczone przejście

Aby zdefiniować podsekcję bloku kodu, która powinna renderować HTML, otocz znaki 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 tagu Razor, występuje błąd czasu wykonywania Razor.

Tag <text> jest przydatny do kontrolowania 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 @: w kodzie, jest generowany błąd środowiska uruchomieniowego Razor.

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 zdarza się 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ą wymagane. Jeśli przekazana wartość to null lub false, atrybut nie jest renderowany.

Rozważmy na przykład następujący Razor znacznik:

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

Razor zachowuje atrybuty data- , jeśli ich wartości to null lub false.

Rozważmy następujące Razor znaczniki:

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

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

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

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ętlowanie `@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 iteracyjne:

@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 renderują tag <form> za pomocą instrukcji @using:

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

@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 domyślne z zastrzeżonymi słowami kluczowymi po symbolu @. Dyrektywa zwykle zmienia sposób kompilowania widoku lub funkcji.

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 dodaje się atrybut [Authorize].

@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 dyrektywa @page w składniku jest zastępowana dyrektywą @attribute oraz szablonem trasy opartym na stałej w Constants.CounterRoute, który jest ustawiany gdzie indziej w aplikacji na "/counter".

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

`@code`

Ten scenariusz dotyczy tylko Razor 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 komponentów @code jest aliasem @functions i jest zalecany zamiast @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 @code nad @functions, aby dodać członków 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órą 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 i @inherits mogą być używane 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 tylko Razor 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 układy ASP.NET CoreBlazor.

`@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 zawiera następującą deklarację modelu:

@model LoginViewModel

Wygenerowana klasa dziedziczy z klasy RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor udostępnia właściwość Model do 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>, z której pochodzi wygenerowana klasa widoku. Jeśli dyrektywa @model nie jest określona, właściwość Model 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

Na potrzeby przykładu Razor Pages przedstawionego w poniższej tabeli:

Każda strona importuje Pages/_ViewImports.cshtml.
Pages/_ViewImports.cshtml zawiera @namespace Hello.World.
Każda strona ma Hello.World jako korzeń swojej 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.

Jeśli folder EvenMorePages w poprzednim przykładzie zawiera plik @namespace Another.Planet (lub plik Pages/MorePages/EvenMorePages/Page.cshtml zawiera @namespace Another.Planet), wynik zostanie pokazany 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:

W pliku .cshtml wskazuje, że plik jest Razor Stroną. Aby uzyskać więcej informacji, zobacz Custom routes and Pages architecture and Pages concepts in ASP.NET Core (Trasy niestandardowe iRazor architektura stron oraz pojęcia 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 trasowanie i nawigację.

`@preservewhitespace`

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

Po ustawieniu wartości false (ustawienie domyślne) spacje w renderowanych znacznikach ze składników Razor (.razor) zostaną usunięte, 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 treść podrzędna przekazana do innego komponentu.
Poprzedzają blok kodu języka C# lub następują po takim bloku, na przykład @if lub @foreach.

`@rendermode`

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

Ustawia tryb renderowania Razor składnika:

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

W przypadku wystąpienia składnika:

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

W definicji składnika:

@rendermode InteractiveServer

Uwaga

Blazor szablony zawierają statyczną dyrektywę using dla RenderMode w pliku _Imports aplikacji (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, 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 Razor MVC i 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 tylko Razor 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 komponenty@using również steruje 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 kompilowania elementu lub funkcji.

`@attributes`

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

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

`@bind`

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

Powiązanie danych w składnikach odbywa się za pomocą atrybutu @bind . Aby uzyskać więcej informacji, zapoznaj się z danymi Blazor ASP.NET Core.

`@bind:culture`

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

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

`@formname`

Ten scenariusz dotyczy tylko Razor 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 przegląd formularzy ASP.NET CoreBlazor.

`@on{EVENT}`

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

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

`@on{EVENT}:preventDefault`

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

Uniemożliwia domyślne działanie zdarzenia.

`@on{EVENT}:stopPropagation`

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

Zatrzymuje propagację zdarzenia.

`@key`

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

Atrybut dyrektywy @key powoduje, że algorytm różnicujący gwarantuje zachowanie elementów lub komponentó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 tylko Razor 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 Core 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ą inkapsuluje delegat. Typ obiektu jest określony jako wartość zwracana delegata. Szablon jest używany z elementem List<T>Pet, który ma właściwość 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 do metody. W poniższym przykładzie metoda Repeat przyjmuje szablon Razor. 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 razy, kiedy należy powtórzyć każdego zwierzaka.
Wbudowany szablon do użycia dla elementów listy nieuporządkowanej.

<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	Funkcja
`@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 ucieczone przy użyciu @(@C# Razor Keyword) (na przykład @(@case)). Pierwsza @ ucieka przed analizatorem składniowym Razor. Drugi @ ucieka parserowi języka C#.

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

class

Razor Sprawdź klasę C# wygenerowaną 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 6.0 (net6.0) w konfiguracji kompilacji Debug, SDK Razor generuje katalog obj/Debug/net6.0/generated/ 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 wewnątrz katalogu Razor 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 wyszukiwań i czułość na wielkość liter

Silnik Razor widoku 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 nie rozróżniającymi wielkości liter (na przykład Windows), wyszukiwanie przez fizycznych dostawców plików odbywa się z pominięciem wielkości 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.
- Na systemach plików rozróżniających wielkość liter (na przykład Linux, OSX i z elementem EmbeddedFileProvider), wyszukiwania uwzględniają wielkość liter. Na przykład return View("Test") szczególnie pasuje do /Views/Home/Test.cshtml.
Wstępnie skompilowane widoki: W przypadku ASP.NET Core 2.0 lub nowszego, wyszukiwanie wstępnie skompilowanych widoków 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 programowania internetowego ASP.NET przy użyciu składni Razor zawiera wiele przykładów programowania z użyciem składni Razor.

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-03-29

Udostępnij za pomocą

Razor dokumentacja składni dla ASP.NET Core

Renderowanie kodu HTML

Składnia Razor

Skalowalna grafika wektorowa (SVG)

Wyrażenia niejawne Razor

Wyrażenia jawne Razor

Kodowanie wyrażeń

Razor bloki kodu

Niejawne przejścia

Jawne odgraniczone przejście

Jawne przejście wiersza

Renderowanie atrybutów warunkowych

Struktury sterujące

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

Pętlowanie @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 Sprawdź klasę C# wygenerowaną dla widoku

Wyświetlanie wyszukiwań i czułość na wielkość liter

Importy używane przez Razor

Dodatkowe zasoby

Sprzężenie zwrotne

Dodatkowe zasoby

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

Pętlowanie `@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`