Razor ASP.NET Core szintaxishivatkozása

Rick Anderson, Taylor Mullen, és Dan Vicarel

Razor egy jelölőszintaxis a .NET-alapú kód weblapokba való beágyazásához. A Razor szintaxis Razor korrektúrából, C#-ból és HTML-ből áll. A Razor tartalmazó fájlok általában .cshtml fájlkiterjesztéssel rendelkeznek. Razor Razor összetevő fájlokban (.razor) is megtalálható. Razor szintaxisa hasonló a különböző JavaScript egyoldalas alkalmazások (SPA) keretrendszereinek sablongenerátoraihoz, például az Angular, a React, a VueJs és a Svelte esetében. További információ: A cikkben ismertetett funkciók elavultak ASP.NET Core 3.0.

A ASP.NET webes programozás Razor szintaxissal használata számos, Razor szintaxissal rendelkező programozási mintát tartalmaz. Bár a témakör a Core ASP.NET helyett ASP.NET lett megírva, a minták többsége ASP.NET Core-ra vonatkozik.

HTML renderelése

Az alapértelmezett Razor nyelv a HTML. A HTML megjelenítése Razor korrektúra alapján nem különbözik a HTML-fájlok HTML-fájlból való megjelenítésétől. A .cshtmlRazor fájlokban található HTML-jelölést a kiszolgáló változatlanul jeleníti meg.

Razor szintaxis

Razor támogatja a C#-t, és a @ szimbólummal vált át HTML-ről C#-ra. Razor kiértékeli a C#-kifejezéseket, és megjeleníti őket a HTML-kimenetben.

Ha egy @ szimbólumot egy Razor fenntartott kulcsszókövet, az Razor-specifikus megjelöléssé alakul. Ellenkező esetben egyszerű HTML-formátumra vált.

Ha egy @ szimbólumot szeretne kódolni a Razor jelölésben, használjon egy második @ szimbólumot:

<p>@@Username</p>

A kód html formátumban jelenik meg egyetlen @ szimbólummal:

<p>@Username</p>

Az e-mail-címeket tartalmazó HTML-attribútumok és -tartalmak nem átmeneti karakterként kezelik a @ szimbólumot. Az alábbi példában szereplő e-mail-címeket Razor elemzések nem érintik:

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

Méretezhető vektorgrafika (SVG)

SVG foreignObject elemek támogatottak:

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

Implicit Razor kifejezések

Az implicit Razor kifejezések @ és C# kóddal kezdődnek:

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

A C# await kulcsszó kivételével az implicit kifejezések nem tartalmazhatnak szóközöket. Ha a C#-utasításnak egyértelmű vége van, a szóközök a következő módon használhatók:

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

Az implicit kifejezések nem tartalmazhatnak C#-generikusokat, mivel a zárójelek (<>) karakterei HTML-címkeként vannak értelmezve. Az alábbi kód nem érvényes:

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

Az előző kód az alábbihoz hasonló fordítóhibát okoz:

A "int" elem nem volt bezárva. Minden elemnek önzárónak kell lennie, vagy rendelkeznie kell egyező zárócímkével.
A "GenericMethod" metóduscsoport nem delegált típusú objektummá nem konvertálható. Meg akarta hívni a metódust?

Az általános metódushívásokat explicit Razor kifejezési vagy Razor kódblokkbakell csomagolni.

Explicit Razor kifejezések

Az explicit Razor kifejezések egy @ szimbólumból állnak, amely kiegyensúlyozott zárójelet tartalmaz. A múlt heti idő megjelenítéséhez a következő Razor korrektúrát használjuk:

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

A @() zárójelben lévő tartalmak kiértékelése és megjelenítése a kimenetben történik.

Az előző szakaszban ismertetett implicit kifejezések általában nem tartalmazhatnak szóközöket. Az alábbi kódban egy hét nincs kivonva az aktuális időből:

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

A kód a következő HTML-t jeleníti meg:

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

Explicit kifejezések használhatók szöveg összefűzésére egy kifejezés eredményével:

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

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

A explicit kifejezés nélkül a Age@joe.Age e-mail-címként lesz kezelve, és Age@joe.Age jelenik meg. Explicit kifejezésként írva Age33 jelenik meg.

Az explicit kifejezések .cshtml fájlok általános metódusaiból származó kimenet megjelenítésére használhatók. Az alábbi kód mutatja be, hogyan lehet kijavítani a korábban bemutatott hibát, amit a C# generikus zárójelei okoztak. A kód explicit kifejezésként van megírva:

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

Kifejezéskódolás

A sztringre kiértékelt C#-kifejezések HTML-kódolásúak. A C#-kifejezések, amelyek IHtmlContent eredményre értékelődnek ki, közvetlenül megjelennek IHtmlContent.WriteToáltal. A nem IHtmlContent kiértékelt C#-kifejezéseket ToString konvertálja sztringgé, és a renderelés előtt kódolja őket.

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

Az előző kód a következő HTML-t jeleníti meg:

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

A HTML egyszerű szövegként jelenik meg a böngészőben:

< >Helló Világ

HtmlHelper.Raw kimenet nem kódolt, hanem HTML-jelölésként jelenik meg.

Figyelmeztetés

Az HtmlHelper.Raw nem felügyelt felhasználói bemeneten való használata biztonsági kockázatot jelent. A felhasználói bemenetek rosszindulatú JavaScript- vagy egyéb biztonsági réseket tartalmazhatnak. A felhasználói bevitel megtisztítása bonyolult feladat. Kerülje a HtmlHelper.Raw felhasználói bemenettel való használatát.

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

A kód a következő HTML-t jeleníti meg:

<span>Hello World</span>

Razor kódblokkok

Razor kódblokkok @-el kezdődnek, és {}közé vannak zárva. A kifejezésektől eltérően a kódblokkokban lévő C#-kód nem jelenik meg. A nézetben lévő kódblokkok és kifejezések azonos hatókörrel rendelkeznek, és sorrendben vannak definiálva:

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

A kód a következő HTML-t jeleníti meg:

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

Kódblokkokban deklaráljon helyi függvényeket jelölővel, hogy sablonmetódusként szolgáljanak.

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

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

A kód a következő HTML-t jeleníti meg:

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

Implicit áttűnések

A kódblokkok alapértelmezett nyelve a C#, de a Razor lap vissza tud váltani a HTML-fájlra:

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

Explicit tagolt átmenet

A HTML-t megjelenítő kódblokk alszakaszának meghatározásához vegye körül a Razor<text> címkével való megjelenítéshez szükséges karaktereket:

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

Ezzel a módszerrel html-címkékkel nem körülvett HTML-kódokat jeleníthet meg. HTML- vagy Razor-címke nélkül Razor futásidejű hiba lép fel.

A <text> címke hasznos a tartalom renderelése során a szóköz szabályozásához:

Csak a <text> címke közötti tartalom jelenik meg.
A HTML-kimenetben nem jelenik meg a <text> címke előtti vagy utáni szóköz.

Explicit vonalátmenet

Ha a teljes sor többi részét HTML-ként szeretné megjeleníteni egy kódblokkon belül, használja @: szintaxist:

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

A kódban szereplő @: nélkül, Razor futásidejű hiba generálódik.

A @ fájlban lévő további Razor karakterek fordítási hibákat okozhatnak a blokk későbbi utasításaiban. Ezek a további @ fordítóhibák:

Nehéz lehet megérteni, mert a tényleges hiba a jelentett hiba előtt következik be.
Gyakori, ha több implicit és explicit kifejezést egyesít egyetlen kódblokkban.

Feltételes attribútumok renderelése

Razor automatikusan kihagyja a nem kötelező attribútumokat. Ha az átadott érték null vagy false, az attribútum nem jelenik meg.

Vegyük például a következő Razor jelölést:

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

Az előző Razor korrektúra a következő HTML-fájlt hozza létre:

<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 megtartja az data- attribútumokat, ha az értékük null vagy false.

Vegye figyelembe a következő Razor jelölést:

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

Az előző Razor korrektúra a következő HTML-fájlt hozza létre:

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

Szerkezetek vezérlése

A vezérlőstruktúrák a kódblokkok kiterjesztései. A kódblokkok minden aspektusa (átmenet a jelölőnyelvre, beágyazott C#) a következő struktúrákra is érvényes:

Feltételes `@if, else if, else, and @switch`

@if meghatározza, mikor fut a kód:

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

else és else if nincs szükség a @ szimbólumra:

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

Az alábbi jelölés a kapcsolóutasítás használatát mutatja be:

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

Hurkolás `@for, @foreach, @while, and @do while`

A sablonos HTML-kód ciklusvezérlési utasításokkal jeleníthető meg. Személyek listájának megjelenítése:

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

A következő cikluskimutatások támogatottak:

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

Összetett `@using`

C#-ban egy using utasítást használnak az objektum megsemmisítésének biztosítására. A Razorugyanezzel a mechanizmusokkal hozhat létre további tartalmakat tartalmazó HTML-segédeket. Az alábbi kódban a HTML-segítők egy <form> címkét jelenítenek meg a @using utasítással:

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

`@try, catch, finally`

A kivételkezelés a C#-hoz hasonló:

@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 képes a kritikus szakaszok zárolási utasításokkal való védelmére:

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

Megjegyzések

Razor támogatja a C#- és HTML-megjegyzéseket:

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

A kód a következő HTML-t jeleníti meg:

<!-- HTML comment -->

Razor megjegyzéseket a kiszolgáló eltávolítja a weblap megjelenítése előtt. A(z) Razor a @* *@-es karaktert használja a megjegyzések elválasztására. A következő kód ki van kommentelve, ezért a kiszolgáló nem jelenít meg semmilyen kódot.

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

Irányelvek

Razor irányelveket a @ szimbólumot követő fenntartott kulcsszavakkal rendelkező implicit kifejezések jelölik. Az irányelv általában megváltoztatja a nézet fordításának vagy működésének módját.

Annak megértése, hogy Razor hogyan hoz létre kódot egy nézethez, megkönnyíti az irányelvek működésének megértését.

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

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

A kód a következőhöz hasonló osztályt hoz létre:

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

A cikk későbbi részében a Nézethez létrehozott Razor C#-osztály vizsgálata ismerteti, hogyan tekintheti meg ezt a létrehozott osztályt.

`@attribute`

A @attribute irányelv hozzáadja a megadott attribútumot a létrehozott oldal vagy nézet osztályához. Az alábbi példa hozzáadja a [Authorize] attribútumot:

@attribute [Authorize]

A @attribute irányelv egy állandó alapú útvonalsablon Razor összetevőben való megadására is használható. Az alábbi példában egy összetevő @page irányelve helyébe a @attribute irányelv és a Constants.CounterRouteállandóalapú útvonalsablonja lép, amely az alkalmazás más részein a következőre van állítva: "/counter":

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

`@code`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

A @code blokk lehetővé teszi, hogy egy Razor összetevő C#-tagokat (mezőket, tulajdonságokat és metódusokat) vegyen fel egy összetevőbe:

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

Razor összetevők esetében a @code a @functions aliasa, és a @code a helyett ajánlott. Egynél több @code blokk megengedett.

`@functions`

A @functions irányelv lehetővé teszi C#-tagok (mezők, tulajdonságok és metódusok) hozzáadását a létrehozott osztályhoz:

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

Használja a Razor-at a helyett a @codeelemeiben C# tagok hozzáadására.

Például:

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

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

A kód a következő HTML-kódot hozza létre:

<div>From method: Hello</div>

A következő kód a létrehozott Razor C# osztály:

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

A @functions metódusok sablonkészítő módszerként szolgálnak, ha van markup:

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

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

A kód a következő HTML-t jeleníti meg:

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

`@implements`

A @implements irányelv egy felületet implementál a létrehozott osztályhoz.

Az alábbi példa System.IDisposable valósít meg, hogy a Dispose metódus meghívható legyen:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

`@inherits`

A @inherits irányelv lehetővé teszi a teljes ellenőrzést a nézet által örökölt osztály felett.

@inherits TypeNameOfClassToInheritFrom

Az alábbi kód egy egyéni Razor oldaltípus:

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

A CustomText egy nézetben jelenik meg:

@inherits CustomRazorPage<TModel>

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

A kód a következő HTML-t jeleníti meg:

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

@model és @inherits ugyanabban a nézetben használhatók. @inherits lehet egy _ViewImports.cshtml fájlban, amelyet a nézet importál:

@inherits CustomRazorPage<TModel>

Az alábbi kód egy erősen típusos nézet példája:

@inherits CustomRazorPage<TModel>

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

Ha a modellben "rick@contoso.com" van megadva, a nézet a következő HTML-jelölést hozza létre:

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

A @inject irányelv lehetővé teszi, hogy a Razor oldal beszúrjon egy szolgáltatást a szolgáltatástárolóból egy nézetbe. További információ: Függőséginjektálás a nézetekbe.

`@layout`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

A @layout irányelv meghatározza az Razor irányelvvel rendelkező routable @page összetevők elrendezését. Az elrendezési összetevők a kódismétlés és az inkonzisztencia elkerülésére szolgálnak. További információ: ASP.NET Core Blazor elrendezések.

`@model`

Ez a forgatókönyv csak az MVC-nézetekre és Razor lapokra (.cshtml) vonatkozik.

A @model irányelv meghatározza a nézetnek vagy lapnak átadott modell típusát:

@model TypeNameOfModel

Az egyéni fiókokkal Razor létrehozott ASP.NET Core MVC- vagy Views/Account/Login.cshtml Pages-alkalmazásokban a következő modelldeklarációt tartalmazza:

@model LoginViewModel

A létrehozott osztály örökli RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor egy Model tulajdonságot tesz elérhetővé a nézetnek átadott modell eléréséhez:

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

A @model irányelv meghatározza a Model tulajdonság típusát. Az irányelv meghatározza, hogy az T az RazorPage<T>-ben az a generált osztály, amelyből a nézet származik. Ha a @model irányelv nincs megadva, a Model tulajdonság dynamictípusú. További információ: Strongly typed models and the @model keyword.

`@namespace`

Az @namespace irányelv:

Beállítja a létrehozott Razor lap, MVC nézet vagy Razor összetevő osztályának névterét.
Beállítja a lapok, nézetek vagy összetevők osztályainak a gyökérből származtatott névtereit a legközelebbi importfájlból a könyvtárfában, _ViewImports.cshtml (nézetek vagy lapok) vagy _Imports.razor (Razor összetevők).

@namespace Your.Namespace.Here

A következő táblázatban látható Razor oldalak példája:

Minden oldal importál Pages/_ViewImports.cshtml.
Pages/_ViewImports.cshtml @namespace Hello.Worldtartalmaz.
Minden lap esetében Hello.World a névtér gyökere.

Oldal	Namespace
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

Az előző kapcsolatok az MVC-nézetekkel és Razor összetevőkkel használt fájlok importálására vonatkoznak.

Ha több importálási fájl rendelkezik @namespace irányelvvel, a rendszer a könyvtárfa laphoz, nézethez vagy összetevőhöz legközelebbi fájllal állítja be a gyökérnévteret.

Ha az előző példában szereplő EvenMorePages mappában @namespace Another.Planet importáló fájl található (vagy a Pages/MorePages/EvenMorePages/Page.cshtml fájl @namespace Another.Planettartalmaz), az eredmény az alábbi táblázatban látható.

Oldal	Namespace
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Another.Planet`

`@page`

A @page irányelvnek eltérő hatása van attól függően, hogy milyen típusú fájl jelenik meg. Az irányelv:

Egy .cshtml fájl azt jelzi, hogy a fájl egy Razor oldal. További információ: Egyéni útvonalak és Razor lapok architektúrája és fogalmak a ASP.NET Core-ban.
Azt határozza meg, hogy egy Razor összetevőnek közvetlenül kell kezelnie a kéréseket. További információkért lásd: ASP.NET Core Blazor útválasztási és navigációs.

`@preservewhitespace`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Ha false-ra (alapértelmezett) van állítva, a renderelt kódban található szóközök eltávolításra kerülnek a Razor összetevőkből (.razor), ha:

Bevezető vagy záró elemen belül.
Bevezető vagy záró egy RenderFragment paraméteren belül. Például gyermektartalom egy másik összetevőhöz lett átadva.
C#-kódblokkot előz meg vagy követ, például @if vagy @foreach.

`@rendermode`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Egy Razor összetevő renderelési módját állítja be:

InteractiveServer: Az interaktív szerveroldali renderelés alkalmazása Blazor Serversegítségével.
InteractiveWebAssembly: Interaktív WebAssembly-renderelés alkalmazása Blazor WebAssemblyhasználatával.
InteractiveAuto: Először az interaktív WebAssembly-renderelést alkalmazza a Blazor Serverhasználatával, majd a Blazor csomag letöltése után alkalmazza az interaktív WebAssembly-renderelést a WebAssembly használatával.

Egy összetevőpéldány esetén:

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

Az összetevő definíciójában:

@rendermode InteractiveServer

Jegyzet

Blazor sablonok az alkalmazás using fájljában (RenderMode) lévő _Imports statikus Components/_Imports.razor irányelvét tartalmazzák a rövidebb @rendermode szintaxis érdekében:

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

Az előző irányelv nélkül az összetevőknek explicit módon kell megadniuk a statikus RenderMode osztályt @rendermode szintaxisban:

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

További információkért, beleértve a prerenderelés letiltására vonatkozó útmutatást irányelvvel vagy irányelvattribútummal, tekintse meg az ASP.NET Core renderelési módok részleteit Blazor.

`@section`

Ez a forgatókönyv csak az MVC-nézetekre és Razor lapokra (.cshtml) vonatkozik.

A @section irányelv MVC-vel és Razor Oldalak elrendezéssel együtt lehetővé teszi, hogy a nézetek vagy oldalak a HTML-oldal különböző részeiben jeleníthessék meg a tartalmat. További információért lásd az ASP.NET Core elrendezését.

`@typeparam`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

A @typeparam irányelv deklarál egy általános típusparamétert a létrehozott összetevőosztályhoz:

@typeparam TEntity

A where típusú korlátozásokkal rendelkező általános típusok támogatottak:

@typeparam TEntity where TEntity : IEntity

További információkért lásd a következő cikkeket:

`@using`

A @using irányelv hozzáadja a C# using irányelvet a létrehozott nézethez:

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

Az Razor összetevők, @using azt is szabályozza, hogy mely összetevők tartoznak a hatókörbe.

Irányelvattribútumok

Razor irányelvattribútumokat a @ szimbólumot követő fenntartott kulcsszavakkal rendelkező implicit kifejezések jelölik. Az irányelvattribútumok általában megváltoztatják az elemek fordításának vagy működésének módját.

`@attributes`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

@attributes lehetővé teszi egy összetevő számára a nem deklarált attribútumok megjelenítését. További információ: ASP.NET Core Blazor attribútum kiterjesztés és tetszőleges paraméterek.

`@bind`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Az összetevők adatkötése a @bind attribútummal történik. További információkért lásd: ASP.NET Core Blazor adatkötés.

`@bind:culture`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Az @bind:culture attribútumot az @bind attribútummal együtt használja egy System.Globalization.CultureInfo megadására, amelyet egy érték elemzéséhez és formázásához használnak. További információ a ASP.NET Core Blazor globalizáció és lokalizáció témakörében.

`@formname`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

@formname űrlapnevet rendel hozzá Razor összetevő egyszerű HTML-űrlapjához vagy EditForm alapján készült űrlaphoz (Editform dokumentáció). A @formname értékének egyedinek kell lennie, amely megakadályozza az űrlapok ütközését a következő esetekben:

Egy űrlap elhelyezkedik egy több űrlapot tartalmazó összetevőben.
Az űrlapok egy külső osztálytárból származnak, általában NuGet-csomagból, több űrlapot tartalmazó összetevőhöz, és az alkalmazás szerzője nem szabályozza a kódtár forráskódját, hogy más külső űrlapnevet állítson be, mint egy másik űrlap által használt név az összetevőben.

További információkért és példákért lásd ASP.NET Core Blazor űrlapok áttekintését.

`@on{EVENT}`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Razor eseménykezelési funkciókat biztosít az összetevőkhöz. További információ a ASP.NET Core Blazor eseménykezelés témakörében.

`@on{EVENT}:preventDefault`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Megakadályozza az esemény alapértelmezett műveletét.

`@on{EVENT}:stopPropagation`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Megállítja az esemény további terjedését.

`@key`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

A @key direktíva attribútum hatására az összetevők különbség algoritmusa garantálja az elemek vagy összetevők megőrzését a kulcs értékére alapozva. További információ: Elem-, összetevő- és modellkapcsolatok megőrzése ASP.NET Core Blazor.

`@ref`

Ez a forgatókönyv csak Razor összetevőkre (.razor) vonatkozik.

Az összetevő-hivatkozások (@ref) lehetővé teszik az összetevőpéldányokra való hivatkozást, hogy parancsokat adjon ki az adott példánynak. További információ: ASP.NET Core Razor-összetevők.

Sablonalapú Razor meghatalmazottak

Ez a forgatókönyv csak az MVC-nézetekre és Razor lapokra (.cshtml) vonatkozik.

Razor sablonok lehetővé teszik egy felhasználói felület kódrészletének meghatározását az alábbi formátumban:

@<tag>...</tag>

Az alábbi példa bemutatja, hogyan lehet egy sablonként megadni a Razor delegáltat Func<T,TResult>-ként. A metódus, amelyet a delegált beágyaz, paraméteréhez a dinamikus típus van megadva. Egy objektumtípus van megadva a meghatalmazott visszatérési értékeként. A sablon akkor használható, ha egy List<T> rendelkezik Pet tulajdonsággal Name-val együtt.

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

A sablon a pets utasítás által megadott foreach-val kerül megjelenítésre.

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

Renderelt kimenet:

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

Beágyazott Razor sablont is megadhat argumentumként egy metódushoz. Az alábbi példában a Repeat metódus Razor sablont kap. A metódus a sablonnal html-tartalmat hoz létre a listából származó elemek ismétlésével:

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

Az előző példában szereplő háziállatok listájának használatával a Repeat metódus neve a következő:

List<T> Pet.
Hányszor ismételjük meg az egyes kisállatokat.
Beágyazott sablon egy rendezetlen lista listaelemeihez.

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

Renderelt kimenet:

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

Címkesegítők

Ez a forgatókönyv csak az MVC-nézetekre és Razor lapokra (.cshtml) vonatkozik.

Három irányelv vonatkozik Címkesegítők.

Irányelv	Funkció
`@addTagHelper`	A címkesegítők elérhetővé válnak a nézet számára.
`@removeTagHelper`	Eltávolítja a nézetből korábban hozzáadott címkesegítőket.
`@tagHelperPrefix`	Egy címkeelőtagot ad meg, amely engedélyezi a Címkesegítő támogatását, és explicitvé teszi a címkesegítő használatát.

fenntartott kulcsszavak Razor

Razor kulcsszavak

page
namespace
functions
inherits
model
section
helper (ASP.NET Core jelenleg nem támogatja)

A Razor kulcsszavak @(Razor Keyword) jelekkel vannak megjelölve (például @(functions)).

C# Razor kulcsszavak

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

C# Razor kulcsszavakat @(@C# Razor Keyword) dupla backslash-szal kell megadni (például @(@case)). Az első @ kimenekül a Razor elemzőből. A második @ kikerül a C# fordítóból.

A Razor által nem használt fenntartott kulcsszavak

class

A nézethez létrehozott Razor C#-osztály vizsgálata

A Razor SDK kezeli Razor fájlok fordítását. Alapértelmezés szerint a létrehozott kódfájlok nem lesznek kibocsátva. A kódfájlok generálásának lehetővé tételéhez állítsa be a projektfájlban a EmitCompilerGeneratedFiles direktívát (.csproj) true-re:

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

Amikor 6.0-s projektet (net6.0) készít a Debug buildkonfigurációban, a Razor SDK létrehoz egy obj/Debug/net6.0/generated/ könyvtárat a projekt gyökérkönyvtárában. Az alkönyvtár tartalmazza a generált Razor lapkód fájlokat.

A Razor SDK kezeli Razor fájlok fordítását. Projekt létrehozásakor a Razor SDK létrehoz egy obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor könyvtárat a projekt gyökérkönyvtárában. A Razor könyvtárban lévő címtárstruktúra tükrözi a projekt könyvtárszerkezetét.

Fontolja meg a következő könyvtárstruktúrát egy ASP.NET Core Razor Pages 2.1-projektben:

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

A projekt Debug konfigurációban való létrehozása a következő obj könyvtárat eredményezi:

 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

A Pages/Index.cshtmllétrehozott osztályának megtekintéséhez nyissa meg a obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Keresések és kis- és nagybetűk érzékenységének megtekintése

A Razor nézetmotor kis- és nagybetűket megkülönböztető kereséseket végez a nézetekhez. A tényleges keresést azonban a mögöttes fájlrendszer határozza meg:

Fájlalapú forrás:
- A kis- és nagybetűket nem érzékelyítő fájlrendszerekkel (például Windows) rendelkező operációs rendszereken a fizikai fájlszolgáltatói keresések nem érzéketlenek. A return View("Test") például /Views/Home/Test.cshtml, /Views/home/test.cshtmlés bármely más burkolatvariáns egyezését eredményezi.
- A kis- és nagybetűket megkülönböztető fájlrendszereken (például Linux, OSX és EmbeddedFileProvider) a keresések megkülönböztetik a kis- és nagybetűket. Például a return View("Test") pontosan illik a /Views/Home/Test.cshtml-hez.
Az ASP.NET Core 2.0 vagy újabb verziójával az előre lefordított nézetek keresése nem érzékeny a kis- és nagybetűkre minden operációs rendszeren. A viselkedés megegyezik a fizikai fájlszolgáltató windowsos viselkedésével. Ha két előre összeállított nézet csak abban az esetben különbözik, a keresés eredménye nem determinisztikus.

A fejlesztőknek javasoljuk, hogy a fájl- és könyvtárnevek burkolatát a következőkhöz hasonlítják:

Terület-, vezérlő- és műveletnevek.
Razor lapok.

Az egyező eset biztosítja, hogy az üzemelő példányok a mögöttes fájlrendszertől függetlenül megtalálják a nézeteiket.

A Razor által használt importálások

A ASP.NET Core-websablonok a következő importálásokat generálják Razor fájlok támogatásához:

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;

További erőforrások

A ASP.NET webes programozás Razor szintaxissal használata számos, Razor szintaxissal rendelkező programozási mintát tartalmaz.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-03-30

Megosztás a következőn keresztül:

Razor ASP.NET Core szintaxishivatkozása

HTML renderelése

Razor szintaxis

Méretezhető vektorgrafika (SVG)

Implicit Razor kifejezések

Explicit Razor kifejezések

Kifejezéskódolás

Razor kódblokkok

Implicit áttűnések

Explicit tagolt átmenet

Explicit vonalátmenet

Feltételes attribútumok renderelése

Szerkezetek vezérlése

Feltételes @if, else if, else, and @switch

Hurkolás @for, @foreach, @while, and @do while

Összetett @using

@try, catch, finally

@lock

Megjegyzések

Irányelvek

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@rendermode

@section

@typeparam

@using

Irányelvattribútumok

@attributes

@bind

@bind:culture

@formname

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

Sablonalapú Razor meghatalmazottak

Címkesegítők

fenntartott kulcsszavak Razor

Razor kulcsszavak

C# Razor kulcsszavak

A Razor által nem használt fenntartott kulcsszavak

A nézethez létrehozott Razor C#-osztály vizsgálata

Keresések és kis- és nagybetűk érzékenységének megtekintése

A Razor által használt importálások

További erőforrások

Visszajelzés

További források

Feltételes `@if, else if, else, and @switch`

Hurkolás `@for, @foreach, @while, and @do while`

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