Sdílet prostřednictvím


Razor Referenční informace o syntaxi pro ASP.NET Core

Autor: Rick Anderson, Taylor Mullen a Dan Vicarel

Razor je syntaxe značek pro vkládání kódu založeného na .NET na webové stránky. Syntaxe Razor se skládá z revizí, jazyka Razor C# a HTML. Soubory obsahující Razor obecně mají příponu .cshtml souboru. Razor je také nalezen v Razor souborech komponent (.razor). Razor syntaxe se podobá šablonovacím modulům různých architektur jednostránkové aplikace JavaScriptu (SPA), jako jsou Angular, React, VueJs a Svelte. Další informace naleznete v části Funkce popsané v tomto článku jsou zastaralé od ASP.NET Core 3.0.

Úvod do ASP.NET webového programování pomocí Razor syntaxe poskytuje mnoho ukázek programování pomocí Razor syntaxe. I když téma bylo napsané pro ASP.NET místo ASP.NET Core, většina ukázek se vztahuje na ASP.NET Core.

Vykreslování HTML

Výchozí Razor jazyk je HTML. Vykreslování HTML z Razor revizí se nijak neliší od vykreslování HTML ze souboru HTML. Kód HTML v .cshtmlRazor souborech se vykreslí serverem beze změny.

Syntaxe Razor

Razor podporuje jazyk C# a používá @ symbol k přechodu z HTML na C#. Razor vyhodnotí výrazy jazyka C# a vykreslí je ve výstupu HTML.

@ Když za symbolem následuje Razor vyhrazené klíčové slovo, přejde na Razorznačky specifické pro konkrétní značky. V opačném případě se převede do prostého HTML.

Pokud chcete uchvátit @ symbol ve Razor značkách, použijte druhý @ symbol:

<p>@@Username</p>

Kód se vykreslí ve formátu HTML s jedním @ symbolem:

<p>@Username</p>

Atributy HTML a obsah obsahující e-mailové adresy nezachází se @ symbolem jako s přechodovým znakem. E-mailové adresy v následujícím příkladu nejsou parsováním nedotčené Razor :

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

SvG (Scalable Vector Graphics)

Podporují se 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>

Implicitní Razor výrazy

Implicitní Razor výrazy začínají kódem @ jazyka C#:

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

S výjimkou klíčového slova jazyka C# await nesmí implicitní výrazy obsahovat mezery. Pokud má příkaz jazyka C# jasný konec, můžou být mezery prolínané:

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

Implicitní výrazy nemohou obsahovat obecné typy jazyka C#, protože znaky uvnitř závorek (<>) jsou interpretovány jako značka HTML. Následující kód není platný:

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

Předchozí kód vygeneruje chybu kompilátoru podobnou jedné z následujících:

  • Prvek "int" nebyl zavřený. Všechny prvky musí být buď samozavírací, nebo musí mít odpovídající koncovou značku.
  • Nelze převést skupinu metod GenericMethod na typ "object", který není delegován. Chtěli jste vyvolat metodu?

Volání obecné metody musí být zabalena do explicitního Razor výrazu Razor nebo bloku kódu.

Explicitní Razor výrazy

Explicitní Razor výrazy se skládají ze symbolu @ s vyváženou závorkou. K vykreslení času posledního týdne se používá následující Razor kód:

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

Veškerý obsah v závorkách @() se vyhodnotí a vykreslí do výstupu.

Implicitní výrazy popsané v předchozí části obecně nemohou obsahovat mezery. V následujícím kódu se od aktuálního času neodčítá jeden týden:

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

Kód vykreslí následující kód HTML:

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

Explicitní výrazy lze použít ke zřetězení textu s výsledkem výrazu:

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

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

Bez explicitního výrazu <p>Age@joe.Age</p> se považuje za e-mailovou adresu a <p>Age@joe.Age</p> vykreslí se. Při zápisu jako explicitního výrazu <p>Age33</p> se vykreslí.

Explicitní výrazy lze použít k vykreslení výstupu z obecných metod v .cshtml souborech. Následující kód ukazuje, jak opravit chybu zobrazenou dříve způsobenou hranatými závorkami obecného jazyka C#. Kód se zapíše jako explicitní výraz:

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

Kódování výrazů

Výrazy jazyka C#, které se vyhodnotí jako řetězec, jsou kódovány kódem HTML. Výrazy jazyka C#, které se vyhodnotí jako IHtmlContent , se vykreslují přímo přes IHtmlContent.WriteTo. Výrazy jazyka C#, které se nevyhodnocují, IHtmlContent se před vykreslením ToString převedou na řetězec a zakódují se.

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

Předchozí kód vykreslí následující kód HTML:

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

Html se v prohlížeči zobrazuje jako prostý text:

<span>Hello World</span>

HtmlHelper.Raw výstup není kódovaný, ale vykreslený jako kód HTML.

Upozorňující

Použití HtmlHelper.Raw na nesanitizovaném vstupu uživatele představuje bezpečnostní riziko. Uživatelský vstup může obsahovat škodlivý JavaScript nebo jiné zneužití. Sanitizace uživatelského vstupu je obtížná. Nepoužívejte s HtmlHelper.Raw uživatelským vstupem.

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

Kód vykreslí následující kód HTML:

<span>Hello World</span>

Razor bloky kódu

Razorbloky kódu začínají @ a jsou uzavřeny .{} Na rozdíl od výrazů se kód jazyka C# uvnitř bloků kódu nevykreslí. Bloky kódu a výrazy v zobrazení sdílejí stejný obor a jsou definovány v pořadí:

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

Kód vykreslí následující kód 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>

V blocích kódu deklarujte místní funkce s kódem, které budou sloužit jako metody šablon:

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

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

Kód vykreslí následující kód HTML:

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

Implicitní přechody

Výchozí jazyk bloku kódu je C#, ale Razor stránka se může vrátit zpět do HTML:

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

Explicitní oddělený přechod

Pokud chcete definovat pododdíl bloku kódu, který by měl vykreslit kód HTML, ohraničujte znaky pro vykreslení značkou Razor<text> :

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

Tento přístup použijte k vykreslení kódu HTML, který není obklopen značkou HTML. Bez kódu HTML nebo Razor značky dojde k Razor chybě za běhu.

Značka <text> je užitečná k řízení prázdných znaků při vykreslování obsahu:

  • Vykreslí se jenom obsah mezi značkou <text> .
  • Ve výstupu HTML se nezobrazí žádné prázdné znaky před nebo za značkou <text> .

Explicitní přechod čáry

Pokud chcete vykreslit rest celý řádek jako HTML uvnitř bloku kódu, použijte @: syntaxi:

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

@: Bez kódu Razor se vygeneruje chyba modulu runtime.

Nadbytečné @ znaky v Razor souboru můžou způsobit chyby kompilátoru v příkazech později v bloku. Tyto další @ chyby kompilátoru:

  • Může být obtížné pochopit, protože skutečná chyba nastane před nahlášenou chybou.
  • Je běžné po kombinování více implicitních a explicitních výrazů do jednoho bloku kódu.

Vykreslování podmíněného atributu

Razor automaticky vynechá atributy, které nejsou potřeba. Pokud je null hodnota předaná nebo false, atribut se nevykreslí.

Představte si například následující 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" />

Předchozí Razor kód vygeneruje následující kód 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">

Řídicí struktury

Řídicí struktury jsou rozšířením bloků kódu. Všechny aspekty bloků kódu (přechod na kód, vložený C#) se vztahují také na následující struktury:

Podmínky @if, else if, else, and @switch

@if ovládací prvky při spuštění kódu:

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

else a else if nevyžadují @ symbol:

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

Následující kód ukazuje, jak použít příkaz 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;
}

Smyčkování @for, @foreach, @while, and @do while

Šablona HTML lze vykreslit pomocí příkazů ovládacího prvku smyčky. Vykreslení seznamu osob:

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

Podporují se následující příkazy smyčky:

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

Složenina @using

V jazyce C# using se k zajištění odstranění objektu používá příkaz. Stejný Razormechanismus se používá k vytvoření pomocných rutin HTML, které obsahují další obsah. V následujícím kódu vykreslují <form> pomocné rutiny HTML značku pomocí @using příkazu:

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

@try, catch, finally

Zpracování výjimek je podobné jazyku 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 má schopnost chránit kritické oddíly pomocí příkazů lock:

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

Komentáře

Razor podporuje komentáře jazyka C# a HTML:

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

Kód vykreslí následující kód HTML:

<!-- HTML comment -->

Razor před vykreslením webové stránky se serverem odeberou komentáře. Razor používá @* *@ k oddělovači komentářů. Následující kód je zakomentován, takže server nevykresluje žádné revize:

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

Direktivy

Razor direktivy jsou reprezentovány implicitními výrazy s vyhrazenými klíčovými slovy za @ symbolem. Direktiva obvykle mění způsob kompilace zobrazení nebo funkcí.

Pochopení toho, jak Razor generuje kód pro zobrazení, usnadňuje pochopení fungování direktiv.

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

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

Kód vygeneruje třídu podobnou následující:

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

Dále v tomto článku část Kontrola třídy jazyka Razor C# vygenerovaná pro zobrazení vysvětluje, jak zobrazit tuto vygenerovanou třídu.

@attribute

Direktiva @attribute přidá daný atribut do třídy vygenerované stránky nebo zobrazení. Následující příklad přidá [Authorize] atribut:

@attribute [Authorize]

Direktivu @attribute lze také použít k zadání šablony trasy založené na konstantě v komponentě Razor . V následujícím příkladu se direktiva @page v komponentě nahrazuje @attribute direktivou a šablonou trasy založenou na konstantě, Constants.CounterRoutekterá je nastavena jinde v aplikaci na "/counter":

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

@code

Tento scénář platí jenom pro Razor komponenty (.razor).

Blok @code umožňuje komponentě Razor přidat členy jazyka C# (pole, vlastnosti a metody) do komponenty:

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

Pro Razor komponenty je alias @functions a doporučuje se v průběhu @functions@code . Je povoleno více než jeden @code blok.

@functions

Direktiva @functions umožňuje přidání členů jazyka C# (pole, vlastnosti a metody) do vygenerované třídy:

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

V Razor komponentách můžete přidávat @code @functions členy jazyka C#.

Příklad:

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

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

Kód vygeneruje následující kód HTML:

<div>From method: Hello</div>

Následující kód je vygenerovaná Razor třída jazyka 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 slouží jako metody šablon, pokud mají značky:

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

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

Kód vykreslí následující kód HTML:

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

@implements

Direktiva @implements implementuje rozhraní pro vygenerovanou třídu.

Následující příklad implementuje System.IDisposable , aby Dispose metoda může být volána:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

@inherits

Direktiva @inherits poskytuje úplnou kontrolu nad třídou, kterou zobrazení dědí:

@inherits TypeNameOfClassToInheritFrom

Následující kód je vlastní Razor typ stránky:

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

Zobrazí CustomText se v zobrazení:

@inherits CustomRazorPage<TModel>

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

Kód vykreslí následující kód HTML:

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

@model a @inherits lze ho použít ve stejném zobrazení. @inherits může být v _ViewImports.cshtml souboru, který zobrazení importuje:

@inherits CustomRazorPage<TModel>

Následující kód je příkladem zobrazení silného typu:

@inherits CustomRazorPage<TModel>

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

Pokud se v modelu předá "rick@contoso.com", vygeneruje zobrazení následující kód 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

Direktiva @inject Razor umožňuje stránkám vložit službu z kontejneru služby do zobrazení. Další informace naleznete v tématu Injektáž závislostí do zobrazení.

@layout

Tento scénář platí jenom pro Razor komponenty (.razor).

Direktiva @layout určuje rozložení směrovatelných Razor komponent, které mají direktivu @page . Komponenty rozložení se používají k zabránění duplikaci kódu a nekonzistence. Další informace najdete v tématu ASP.NET rozložení jádraBlazor.

@model

Tento scénář platí jenom pro zobrazení MVC a Razor stránky (.cshtml).

Direktiva @model určuje typ modelu předaného zobrazení nebo stránce:

@model TypeNameOfModel

V aplikaci ASP.NET Core MVC nebo Razor Pages vytvořená pomocí jednotlivých uživatelských účtů Views/Account/Login.cshtml obsahuje následující deklaraci modelu:

@model LoginViewModel

Třída vygenerovaná zdědí z RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

RazorModel zveřejňuje vlastnost pro přístup k modelu předaného do zobrazení:

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

Direktiva @model určuje typ Model vlastnosti. Direktiva určuje T vygenerovanou RazorPage<T> třídu, ze které je zobrazení odvozeno. Pokud není zadána @model direktiva Model , vlastnost je typu dynamic. Další informace najdete na webu Strongly typed models and the @model keyword.

@namespace

Direktiva @namespace :

  • Nastaví obor názvů třídy vygenerované Razor stránky, zobrazení MVC nebo Razor komponenty.
  • Nastaví kořenové odvozené obory názvů stránek, zobrazení nebo komponent třídy z nejbližšího importového souboru ve stromu adresáře ( _ViewImports.cshtml zobrazení nebo stránky) nebo _Imports.razor (Razor komponenty).
@namespace Your.Namespace.Here

Razor Příklad Stránky zobrazený v následující tabulce:

  • Každá stránka naimportuje Pages/_ViewImports.cshtml.
  • Pages/_ViewImports.cshtml obsahuje @namespace Hello.World.
  • Každá stránka má Hello.World jako kořen oboru názvů.
Page Obor názvů
Pages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml Hello.World.MorePages.EvenMorePages

Předchozí relace platí pro import souborů používaných se zobrazeními a Razor komponentami MVC.

Pokud má více importovaných souborů direktivu @namespace , použije se k nastavení kořenového oboru názvů soubor nejblíže stránce, zobrazení nebo komponentě ve stromu adresáře.

Pokud má EvenMorePages složka v předchozím příkladu soubor importu s @namespace Another.Planet (nebo Pages/MorePages/EvenMorePages/Page.cshtml soubor obsahuje @namespace Another.Planet), výsledek se zobrazí v následující tabulce.

Page Obor názvů
Pages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml Another.Planet

@page

Direktiva @page má různé účinky v závislosti na typu souboru, na kterém se zobrazuje. Direktiva:

@preservewhitespace

Tento scénář platí jenom pro Razor komponenty (.razor).

Pokud je tato možnost nastavená na false (výchozí), odebere se prázdné znaky vykreslené značky ze Razor součástí (.razor), pokud:

  • Na začátku nebo na konci elementu
  • Počáteční nebo koncové hodnoty v rámci parametru RenderFragment Například podřízený obsah předaný jiné komponentě.
  • Před nebo za blokem kódu jazyka C#, například @if nebo @foreach

@rendermode

Tento scénář platí jenom pro Razor komponenty (.razor).

Nastaví režim Razor vykreslování komponenty:

  • InteractiveServer: Použije interaktivní vykreslování serveru pomocí .Blazor Server
  • InteractiveWebAssembly: Použije interaktivní vykreslování WebAssembly pomocí Blazor WebAssembly.
  • InteractiveAuto: Zpočátku použije interaktivní vykreslování WebAssembly pomocí Blazor Servera potom použije interaktivní vykreslování WebAssembly pomocí WebAssembly při následných návštěvách po Blazor stažení sady.

Pro instanci komponenty:

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

V definici komponenty:

@rendermode InteractiveServer

Poznámka:

Blazor šablony obsahují statickou using direktivu pro RenderMode soubor aplikace _Imports (Components/_Imports.razor) pro kratší @rendermode syntaxi:

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

Bez předchozí direktivy musí komponenty explicitně zadat statickou RenderMode třídu v @rendermode syntaxi:

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

Další informace, včetně pokynů k zakázání předběžného vykreslování s atributem direktivy/direktivy, najdete v tématu ASP.NET režimy vykreslování CoreBlazor.

@section

Tento scénář platí jenom pro zobrazení MVC a Razor stránky (.cshtml).

Direktiva @section se používá ve spojení s rozloženími MVC a Razor Pages, které umožňují zobrazení nebo stránky vykreslovat obsah v různých částech stránky HTML. Další informace najdete v tématu Rozložení v ASP.NET Core.

@typeparam

Tento scénář platí jenom pro Razor komponenty (.razor).

Direktiva @typeparam deklaruje pro generovanou třídu komponenty parametr obecného typu:

@typeparam TEntity

Podporují se obecné typy s omezeními where typu:

@typeparam TEntity where TEntity : IEntity

Další informace najdete v následujících článcích:

@using

Direktiva @using přidá direktivu jazyka C# using do vygenerovaného zobrazení:

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

V Razor komponentách také řídí, @using které komponenty jsou v oboru.

Atributy direktiv

Razor atributy direktiv jsou reprezentovány implicitními výrazy s vyhrazenými klíčovými slovy za @ symbolem. Atribut direktivy obvykle mění způsob kompilace elementu nebo funkce.

@attributes

Tento scénář platí jenom pro Razor komponenty (.razor).

@attributes umožňuje komponentě vykreslit ne deklarované atributy. Další informace najdete v tématu ASP.NET splatting atributu Core Blazor a libovolné parametry.

@bind

Tento scénář platí jenom pro Razor komponenty (.razor).

Datová vazba v komponentách se provádí pomocí atributu @bind . Další informace najdete v tématu ASP.NET Základní Blazor datová vazba.

@bind:culture

Tento scénář platí jenom pro Razor komponenty (.razor).

@bind:culture Atribut s atributem @bind slouží k analýze System.Globalization.CultureInfo a formátování hodnoty. Další informace najdete v tématu ASP.NET globalizace a lokalizace jádraBlazor.

@formname

Tento scénář platí jenom pro Razor komponenty (.razor).

@formname přiřadí název Razor formuláře k prostému html formuláři nebo formuláři komponenty na EditForm základě (Editform dokumentace). Hodnota @formname by měla být jedinečná, což brání kolizím formulářů v následujících situacích:

  • Formulář je umístěn v komponentě s více formuláři.
  • Formulář je zdroj z externí knihovny tříd, obvykle balíček NuGet, pro komponentu s více formuláři a autor aplikace neřídí zdrojový kód knihovny tak, aby nastavil jiný název externího formuláře než název používaný jiným formulářem v komponentě.

Další informace a příklady najdete v přehledu formulářů ASP.NET CoreBlazor.

@on{EVENT}

Tento scénář platí jenom pro Razor komponenty (.razor).

Razor poskytuje funkce zpracování událostí pro komponenty. Další informace najdete v tématu ASP.NET Zpracování událostí CoreBlazor.

@on{EVENT}:preventDefault

Tento scénář platí jenom pro Razor komponenty (.razor).

Zabrání výchozí akci události.

@on{EVENT}:stopPropagation

Tento scénář platí jenom pro Razor komponenty (.razor).

Zastaví šíření události pro událost.

@key

Tento scénář platí jenom pro Razor komponenty (.razor).

Atribut @key direktivy způsobí, že algoritmus rozdílu komponent zaručuje zachování prvků nebo komponent na základě hodnoty klíče. Další informace naleznete v tématu Zachování elementu, komponenty a relace modelu v ASP.NET Core Blazor.

@ref

Tento scénář platí jenom pro Razor komponenty (.razor).

Odkazy na komponenty (@ref) poskytují způsob, jak odkazovat na instanci komponenty, abyste mohli vydat příkazy pro danou instanci. Další informace najdete v tématu ASP.NET základní Razor komponenty.

Šablonované Razor delegáty

Tento scénář platí jenom pro zobrazení MVC a Razor stránky (.cshtml).

Razor Šablony umožňují definovat fragment kódu uživatelského rozhraní s následujícím formátem:

@<tag>...</tag>

Následující příklad ukazuje, jak zadat šablony Razor delegáta jako Func<T,TResult>. Dynamický typ je určen pro parametr metody, který delegát zapouzdřuje. Typ objektu je určen jako návratová hodnota delegáta. Šablona se používá s vlastností List<T> , která PetName vlastnost.

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

Šablona se vykreslí se zadaným pets příkazem foreach :

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

Vykreslený výstup:

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

Vloženou Razor šablonu můžete také zadat jako argument metody. V následujícím příkladu Repeat metoda obdrží Razor šablonu. Metoda používá šablonu k vytvoření obsahu HTML s opakováním položek zadaných ze seznamu:

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

Při použití seznamu domácích zvířat z předchozího příkladu je Repeat volána metoda s:

  • List<T> z Pet.
  • Počet opakování každého domácího mazlíčka
  • Vložená šablona, která se má použít pro položky seznamu neuspořádaného seznamu.
<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

Vykreslený výstup:

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

Pomocné rutiny značek

Tento scénář platí jenom pro zobrazení MVC a Razor stránky (.cshtml).

Existují tři direktivy, které se týkají pomocných rutin značek.

Direktiva Function
@addTagHelper Zpřístupní pomocné rutiny značek pro zobrazení.
@removeTagHelper Odebere pomocné rutiny značek dříve přidané ze zobrazení.
@tagHelperPrefix Určuje předponu značky, která povolí podporu pomocné rutiny značek a aby byla explicitní použití pomocné rutiny značek.

Razor rezervovaná klíčová slova

Razor klíčová slova

  • page
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper (V současné době není podporováno službou ASP.NET Core)

Razor klíčová slova jsou uniknuta @(Razor Keyword) (například @(functions)).

Klíčová slova jazyka C# Razor

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

Klíčová slova jazyka C# Razor musí být dvojitě uvozována @(@C# Razor Keyword) (například @(@case)). První @ uteče parser.Razor @ Druhý unikne analyzátoru jazyka C#.

Vyhrazená klíčová slova, která nepoužívají Razor

  • class

Kontrola třídy jazyka Razor C# vygenerované pro zobrazení

Sada Razor SDK zpracovává kompilaci Razor souborů. Ve výchozím nastavení se vygenerované soubory kódu nevygenerují. Pokud chcete povolit generování souborů kódu, nastavte EmitCompilerGeneratedFiles direktivu v souboru projektu (.csproj) na true:

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

Při sestavování projektu 6.0 (net6.0) v Debug konfiguraci Razor sestavení sada SDK vygeneruje obj/Debug/net6.0/generated/ adresář v kořenovém adresáři projektu. Jeho podadresář obsahuje vygenerované Razor soubory kódu stránky.

Sada Razor SDK zpracovává kompilaci Razor souborů. Při sestavování projektu Razor sada SDK vygeneruje obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor adresář v kořenovém adresáři projektu. Adresářová struktura v rámci Razor adresáře zrcadlí adresářovou strukturu projektu.

V projektu ASP.NET Core Razor Pages 2.1 zvažte následující adresářovou strukturu:

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

Sestavení projektu v Debug konfiguraci přináší následující obj adresář:

 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

Chcete-li zobrazit vygenerovanou třídu pro Pages/Index.cshtml, otevřete obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Zobrazení citlivosti vyhledávání a velikosti písmen

Modul Razor zobrazení provádí vyhledávání s rozlišováním velkých a malých písmen pro zobrazení. Skutečné vyhledávání je však určeno základním systémem souborů:

  • Zdroj založený na souborech:
    • V operačních systémech, u kterých se nerozlišují malá a velká písmena (například Windows), vyhledávání fyzických poskytovatelů souborů nerozlišují malá a velká písmena. Výsledkem jsou například return View("Test") shody pro /Views/Home/Test.cshtml, /Views/home/test.cshtmla všechny ostatní varianty velikostí.
    • V systémech souborů s rozlišováním malých a velkých písmen (například Linux, OSX a with EmbeddedFileProvider) se rozlišují malá a velká písmena. Například konkrétně return View("Test") odpovídá /Views/Home/Test.cshtml.
  • Předkompilovaná zobrazení: Při použití ASP.NET Core 2.0 a novějších zobrazení se při vyhledávání předkompilovaných zobrazení nerozlišují velká a malá písmena ve všech operačních systémech. Chování je stejné jako chování fyzického poskytovatele souborů ve Windows. Pokud se dvě předkompilovaná zobrazení liší pouze v případě, že výsledek vyhledávání není deterministický.

Vývojářům se doporučuje, aby odpovídali velikostí písmen názvů souborů a adresářů a velikostí písmen:

  • Názvy oblastí, kontroleru a akcí
  • Razor Stránky.

Odpovídající případ zajišťuje, že nasazení najdou svá zobrazení bez ohledu na základní systém souborů.

Importy používané Razor

Následující importy jsou generovány webovými šablonami ASP.NET Core pro podporu Razor souborů:

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;

Další materiály

Úvod do ASP.NET webového programování pomocí Razor syntaxe poskytuje mnoho ukázek programování pomocí Razor syntaxe.