Dela via


Razor syntaxreferens för ASP.NET Core

Av Rick Anderson, Taylor Mullenoch Dan Vicarel

Razor är en markeringssyntax för att bädda in .NET-baserad kod på webbsidor. Syntaxen för Razor består av Razor markering, C#och HTML. Filer som innehåller Razor har vanligtvis ett .cshtml filnamnstillägg. Razor finns också i Razor komponenten filer (.razor). Razor syntax är lik mallmotorerna i olika JavaScript-ramverk för enkelsidiga applikationer (SPA), till exempel Angular, React, VueJs och Svelte. Mer information finns i Funktionerna som beskrivs i den här artikeln är föråldrade från och med ASP.NET Core 3.0.

Introduktion till ASP.NET webbprogrammering med hjälp av Razor Syntax innehåller många exempel på programmering med Razor syntax. Även om ämnet skrevs för ASP.NET i stället för ASP.NET Core gäller de flesta av exemplen för ASP.NET Core.

Återgivning av HTML

Standardspråket Razor är HTML. Att generera HTML från Razor-uppmärkning skiljer sig inte från att generera HTML från en HTML-fil. HTML-kod i .cshtmlRazor filer återges av servern oförändrad.

Razor syntax

Razor stöder C# och använder @-symbolen för att övergå från HTML till C#. Razor utvärderar C#-uttryck och renderar dem i HTML-utdata.

När en @ symbol följs av ett Razor reserverat nyckelordövergår den till Razor-specifik markering. Annars övergår den till oformaterad HTML.

Om du vill undvika en @ symbol i Razor-markering använder du en andra @ symbol:

<p>@@Username</p>

Koden återges i HTML med en enda @ symbol:

<p>@Username</p>

HTML-attribut och innehåll som innehåller e-postadresser behandlar inte @-symbolen som ett övergångstecken. E-postadresserna i följande exempel är orörda genom Razor parsning:

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

Skalbar vektorgrafik (SVG)

SVGforeignObject-element stöds:

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

Implicita Razor uttryck

Implicita Razor uttryck börjar med @ följt av C#-kod:

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

Med undantag för nyckelordet C# await får implicita uttryck inte innehålla blanksteg. Om C#-instruktionen har ett tydligt slut kan blanksteg användas fritt:

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

Implicita uttryck kan inte innehålla C#-generiska objekt eftersom tecknen inom hakparenteserna (<>) tolkas som en HTML-tagg. Följande kod är inte giltig:

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

Föregående kod genererar ett kompilatorfel som liknar något av följande:

  • Int-elementet stängdes inte. Alla element måste antingen vara självslutande eller ha en matchande sluttagg.
  • Det går inte att konvertera metodgruppen "GenericMethod" till objekt av typen "object" som inte delegeras. Hade du för avsikt att anropa metoden?

Allmänna metodanrop måste omslutas i ett explicit Razor uttryck eller ett Razor kodblock.

Explicita Razor uttryck

Explicita Razor uttryck består av en @ symbol med balanserad parentes. För att återge förra veckans tid används följande Razor markering:

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

Allt innehåll inom @() parentes utvärderas och återges till utdata.

Implicita uttryck, som beskrivs i föregående avsnitt, får i allmänhet inte innehålla blanksteg. I följande kod subtraheras inte en vecka från den aktuella tiden:

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

Koden återger följande HTML:

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

Explicita uttryck kan användas för att sammanfoga text med ett uttrycksresultat:

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

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

Utan det explicita uttrycket behandlas <p>Age@joe.Age</p> som en e-postadress och <p>Age@joe.Age</p> återges. När det skrivs ut som ett explicit uttryck återges <p>Age33</p>.

Explicita uttryck kan användas för att återge utdata från generiska metoder i .cshtml filer. Följande markering visar hur du korrigerar det fel som visades tidigare på grund av hakparenteserna för en generisk C#-kod. Koden skrivs som ett explicit uttryck:

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

Uttryckskodning

C#-uttryck som utvärderas till en sträng är HTML-kodade. C#-uttryck som utvärderas till IHtmlContent återges direkt via IHtmlContent.WriteTo. C#-uttryck som inte utvärderas till IHtmlContent konverteras till en sträng av ToString och kodas innan de återges.

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

Föregående kod återger följande HTML:

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

HTML-koden visas i webbläsaren som oformaterad text:

<span>Hej Världen</span>

HtmlHelper.Raw utdata kodas inte utan återges som HTML-kod.

Varning

Det är en säkerhetsrisk att använda HtmlHelper.Raw på osanerad användarindata. Användarindata kan innehålla skadlig JavaScript eller andra kryphål. Det är svårt att sanera användarindata. Undvik att använda HtmlHelper.Raw med användarindata.

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

Koden återger följande HTML:

<span>Hello World</span>

Razor kodblock

Razor kodblock börjar med @ och omges av {}. Till skillnad från uttryck återges inte C#-kod inuti kodblock. Kodblock och uttryck i en vy delar samma omfång och definieras i ordning:

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

Koden återger följande 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>

I kodblock deklarerar du lokala funktioner med markering för att fungera som mallmetoder:

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

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

Koden återger följande HTML:

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

Implicita övergångar

Standardspråket i ett kodblock är C#, men Razor-sidan kan gå tillbaka till HTML:

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

Explicit avgränsad förändring

Om du vill definiera ett underavsnitt av ett kodblock som ska återge HTML omger du tecknen för återgivning med taggen Razor<text>:

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

Använd den här metoden för att återge HTML som inte omges av en HTML-tagg. Utan en HTML-tagg eller en Razor-tagg uppstår ett körningsfel av typen Razor.

Taggen <text> är användbar för att styra blanksteg vid återgivning av innehåll:

  • Endast innehållet mellan taggen <text> återges.
  • Ingen blanksteg före eller efter taggen <text> visas i HTML-utdata.

Explicit linjeövergång

Om du vill återge resten av en hel rad som HTML i ett kodblock använder du @: syntax:

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

Utan @: i koden genereras ett Razor körningsfel.

Extra @ tecken i en Razor fil kan orsaka kompilatorfel vid instruktioner senare i blocket. Dessa extra @ kompilatorfel:

  • Kan vara svårt att förstå eftersom det faktiska felet inträffar före det rapporterade felet.
  • Är vanligt när du har kombinerat flera implicita och explicita uttryck i ett enda kodblock.

Villkorsstyrd attributåtergivning

Razor utelämnar automatiskt attribut som inte krävs. Om värdet som skickas in är null eller falseåterges inte attributet.

Tänk till exempel på följande Razor markering:

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

Föregående Razor-markering genererar följande 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 behåller data- attribut om deras värden är null eller false.

Överväg följande Razor markup:

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

Föregående Razor-markering genererar följande HTML:

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

Kontrollstrukturer

Kontrollstrukturer är ett tillägg av kodblock. Alla aspekter av kodblock (övergång till markering, infogad C#) gäller även för följande strukturer:

Villkorsstyrda @if, else if, else, and @switch

@if kontrollerar när koden körs:

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

else och else if kräver inte @ symbolen:

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

Följande markering visar hur du använder en switch-instruktion:

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

Loopa @for, @foreach, @while, and @do while

Mallad HTML kan renderas med loopningskontrollinstruktioner. Så här renderar du en lista över personer:

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

Följande loopinstruktioner stöds:

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

Sammansatt @using

I C# används en using-instruktion för att säkerställa att ett objekt tas bort. I Razoranvänds samma mekanism för att skapa HTML-hjälpare som innehåller ytterligare innehåll. I följande kod renderar de specifika HTML-hjälparna en <form>-tagg genom instruktionen @using.

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

@try, catch, finally

Undantagshantering liknar 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 har förmåga att skydda kritiska avsnitt med låsanvisningar:

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

Kommentarer

Razor stöder C#- och HTML-kommentarer:

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

Koden återger följande HTML:

<!-- HTML comment -->

Razor kommentarer tas bort av servern innan webbsidan visas. Razor använder @* *@ för att avgränsa kommentarer. Följande kod kommenteras ut så att servern inte återger någon markering:

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

Direktiv

Razor-direktiv representeras av implicita uttryck med reserverade nyckelord som följer @-symbolen. Ett direktiv ändrar vanligtvis hur en vy kompileras eller fungerar.

Att förstå hur Razor genererar kod för en vy gör det lättare att förstå hur direktiv fungerar.

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

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

Koden genererar en klass som liknar följande:

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

Senare i den här artikeln beskriver avsnittet Inspektera klassen Razor C# som genererats för en vy hur du visar den här genererade klassen.

@attribute

@attribute-direktivet lägger till det angivna attributet till klassen för den genererade sidan eller vyn. Följande exempel lägger till attributet [Authorize]:

@attribute [Authorize]

@attribute-direktivet kan också användas för att tillhandahålla en konstantbaserad vägmall i en Razor komponent. I följande exempel ersätts @page-direktivet i en komponent med @attribute-direktivet och den konstantbaserade vägmallen i Constants.CounterRoute, som anges någon annanstans i appen till "/counter":

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

@code

Det här scenariot gäller endast för Razor komponenter (.razor).

Med @code-blocket kan en Razor komponent lägga till C#-medlemmar (fält, egenskaper och metoder) i en komponent:

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

För Razor komponenter är @code ett alias för @functions och rekommenderas över @functions. Mer än ett @code block är tillåtet.

@functions

Med @functions-direktivet kan du lägga till C#-medlemmar (fält, egenskaper och metoder) i den genererade klassen:

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

I Razor komponenteranvänder du @code över @functions för att lägga till C#-medlemmar.

Till exempel:

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

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

Koden genererar följande HTML-kod:

<div>From method: Hello</div>

Följande kod är den genererade klassen Razor 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 metoder fungerar som mallmetoder när de har märkning.

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

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

Koden återger följande HTML:

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

@implements

@implements-direktivet implementerar ett gränssnitt för den genererade klassen.

I följande exempel implementeras System.IDisposable så att metoden Dispose kan anropas:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

@inherits

@inherits-direktivet ger fullständig kontroll över klassen som vyn ärver:

@inherits TypeNameOfClassToInheritFrom

Följande kod är en anpassad Razor sidtyp:

using Microsoft.AspNetCore.Mvc.Razor;

public abstract class CustomRazorPage<TModel> : RazorPage<TModel>
{
    public string CustomText { get; } = 
        "Gardyloo! - A Scottish warning yelled from a window before dumping" +
        "a slop bucket on the street below.";
}

CustomText visas i en vy:

@inherits CustomRazorPage<TModel>

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

Koden återger följande HTML:

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

@model och @inherits kan användas i samma vy. @inherits kan finnas i en _ViewImports.cshtml fil som vyn importerar:

@inherits CustomRazorPage<TModel>

Följande kod är ett exempel på en starkt typad vy:

@inherits CustomRazorPage<TModel>

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

Om "rick@contoso.com" skickas i modellen genererar vyn följande HTML-kod:

<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

Med @inject-direktivet kan Razor-sidan mata in en tjänst från -tjänstcontainern i en vy. Mer information finns i Beroendeinmatning i vyer.

@layout

Det här scenariot gäller endast för Razor komponenter (.razor).

I @layout-direktivet anges en layout för dirigerbara Razor komponenter som har ett @page direktiv. Layoutkomponenter används för att undvika kodduplicering och inkonsekvens. Mer information finns i ASP.NET Core Blazor layouter.

@model

Det här scenariot gäller endast för MVC-vyer och Razor Pages (.cshtml).

I @model-direktivet anges vilken typ av modell som skickas till en vy eller sida:

@model TypeNameOfModel

I en ASP.NET Core MVC- eller Razor Pages-app som skapats med enskilda konton Views/Account/Login.cshtml innehåller följande modelldeklaration:

@model LoginViewModel

Klassen som genereras ärver från RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor exponerar en Model-egenskap för åtkomst till modellen som skickas till vyn:

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

I @model-direktivet anges typen av egenskapen Model. Direktivet anger T i RazorPage<T> som den genererade klassen som vyn härleds från. Om @model-direktivet inte anges är egenskapen Model av typen dynamic. Mer information finns i Strongly typed models and the @model keyword.

@namespace

Direktivet @namespace:

  • Anger namnområdet för klassen för den genererade Razor-sidan, MVC-vyn eller Razor komponenten.
  • Anger rotbaserade namnområden för sid-, vy- eller komponentklasser från närmaste importfil i katalogträdet, _ViewImports.cshtml (vyer eller sidor) eller _Imports.razor (Razor komponenter).
@namespace Your.Namespace.Here

För exemplet Razor Pages som visas i följande tabell:

  • Varje sida importerar Pages/_ViewImports.cshtml.
  • Pages/_ViewImports.cshtml innehåller @namespace Hello.World.
  • Varje sida har Hello.World som rot för dess namnområde.
Sida Namespace
Pages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml Hello.World.MorePages.EvenMorePages

Föregående relationer gäller för importfiler som används med MVC-vyer och Razor komponenter.

När flera importfiler har ett @namespace direktiv används filen närmast sidan, vyn eller komponenten i katalogträdet för att ange rotnamnområdet.

Om mappen EvenMorePages i föregående exempel har en importfil med @namespace Another.Planet (eller Pages/MorePages/EvenMorePages/Page.cshtml filen innehåller @namespace Another.Planet) visas resultatet i följande tabell.

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

@page

Det @page direktivet har olika effekter beroende på vilken typ av fil det visas i. Direktivet:

@preservewhitespace

Det här scenariot gäller endast för Razor komponenter (.razor).

När värdet är inställt på false (standard) tas tomt utrymme i den renderade markeringen från Razor komponenter (.razor) bort om:

  • Före eller efter inom ett element.
  • Inledande eller avslutande inom en RenderFragment parameter. Till exempel skickas barninnehåll till en annan komponent.
  • Det föregår eller följer ett C#-kodblock, till exempel @if eller @foreach.

@rendermode

Det här scenariot gäller endast för Razor komponenter (.razor).

Anger återgivningsläget för en Razor komponent:

  • InteractiveServer: Tillämpar interaktiv serverrendering med hjälp av Blazor Server.
  • InteractiveWebAssembly: Använder interaktiv WebAssembly-rendering med hjälp av Blazor WebAssembly.
  • InteractiveAuto: Tillämpar först interaktiv WebAssembly-återgivning med Blazor Serveroch tillämpar sedan interaktiv WebAssembly-rendering med WebAssembly vid efterföljande besök efter att Blazor-paketet har laddats ned.

För en komponentinstans:

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

I komponentdefinitionen:

@rendermode InteractiveServer

Not

Blazor mallar innehåller ett statiskt using-direktiv för RenderMode i appens _Imports-fil (Components/_Imports.razor) för kortare @rendermode syntax:

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

Utan föregående direktiv måste komponenterna uttryckligen ange klassen static RenderMode i @rendermode syntax:

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

Mer information, inklusive vägledning om hur du inaktiverar prerendering med attributet direktiv/direktiv, finns i ASP.NET Core Blazor återgivningslägen.

@section

Det här scenariot gäller endast för MVC-vyer och Razor Pages (.cshtml).

@section-direktivet används tillsammans med layouterna MVC och Razor Pages för att göra det möjligt för vyer eller sidor att återge innehåll i olika delar av HTML-sidan. Mer information finns i Layout i ASP.NET Core.

@typeparam

Det här scenariot gäller endast för Razor komponenter (.razor).

I @typeparam-direktivet deklareras en generisk typparameter för den genererade komponentklassen:

@typeparam TEntity

Allmänna typer med where typbegränsningar stöds:

@typeparam TEntity where TEntity : IEntity

Mer information finns i följande artiklar:

@using

@using-direktivet lägger till C#-using-direktivet i den genererade vyn:

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

I komponenter Razorkontrollerar också @using vilka komponenter som finns i omfånget.

Direktivattribut

Razor direktivattribut representeras av implicita uttryck med reserverade nyckelord som följer @-symbolen. Ett direktivattribut ändrar vanligtvis hur ett element kompileras eller fungerar.

@attributes

Det här scenariot gäller endast för Razor komponenter (.razor).

@attributes tillåter att en komponent renderar icke-deklarerade attribut. För mer information, se ASP.NET Core Blazor attributsspridning och godtyckliga parametrar.

@bind

Det här scenariot gäller endast för Razor komponenter (.razor).

Databindning i komponenter utförs med attributet @bind. Mer information finns i ASP.NET Core Blazor databindning.

@bind:culture

Det här scenariot gäller endast för Razor komponenter (.razor).

Använd attributet @bind:culture med attributet @bind för att tillhandahålla en System.Globalization.CultureInfo för parsning och formatering av ett värde. Mer information finns i ASP.NET Core Blazor globalisering och lokalisering.

@formname

Det här scenariot gäller endast för Razor komponenter (.razor).

@formname tilldelar ett formulärnamn till en Razor komponents vanliga HTML-formulär eller ett formulär baserat på EditForm (Editform dokumentation). Värdet för @formname ska vara unikt, vilket förhindrar kollisioner i följande situationer:

  • Ett formulär placeras i en komponent med flera formulär.
  • Ett formulär kommer från ett externt klassbibliotek, vanligtvis ett NuGet-paket, för en komponent med flera formulär, och appförfattaren styr inte källkoden för biblioteket för att ange ett annat externt formulärnamn än ett namn som används av ett annat formulär i komponenten.

Mer information och exempel finns i översikten över ASP.NET Core Blazor-formulär.

@on{EVENT}

Det här scenariot gäller endast för Razor komponenter (.razor).

Razor tillhandahåller funktioner för händelsehantering för komponenter. Mer information finns i ASP.NET Core Blazor händelsehantering.

@on{EVENT}:preventDefault

Det här scenariot gäller endast för Razor komponenter (.razor).

Förhindrar standardåtgärden för händelsen.

@on{EVENT}:stopPropagation

Det här scenariot gäller endast för Razor komponenter (.razor).

Stoppar spridning av händelsen.

@key

Det här scenariot gäller endast för Razor komponenter (.razor).

Attributet @key-direktiv gör att komponentens diffing-algoritm garanterar bevarande av element eller komponenter baserat på nyckelns värde. Mer information finns i Kvarhålla element-, komponent- och modellrelationer i ASP.NET Core Blazor.

@ref

Det här scenariot gäller endast för Razor komponenter (.razor).

Komponentreferenser (@ref) är ett sätt att referera till en komponentinstans så att du kan utfärda kommandon till den instansen. Mer information finns i ASP.NET Core Razor-komponenter.

Mallade Razor delegeringar

Det här scenariot gäller endast för MVC-vyer och Razor Pages (.cshtml).

Razor mallar kan du definiera ett gränssnittsfragment med följande format:

@<tag>...</tag>

I följande exempel illustreras hur du anger en delegerad mall Razor som en Func<T,TResult>. Den dynamiska typen anges för parametern för metoden som delegaten kapslar in. En objekttyp anges som returvärde för delegaten. Mallen används med en List<T> för Pet med egenskapen 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" }
    };
}

Mallen återges med pets som tillhandahålls av en foreach-instruktion:

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

Renderade utdata:

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

Du kan också ange en infogad Razor mall som ett argument till en metod. I följande exempel tar metoden Repeat emot en Razor mall. Metoden använder mallen för att skapa HTML-innehåll med upprepningar av objekt som tillhandahålls från en lista:

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

Med hjälp av listan över husdjur från föregående exempel anropas metoden Repeat med:

  • List<T> av Pet.
  • Antal gånger som varje husdjur ska upprepas.
  • Infogad mall som ska användas för listobjekt i en osorterad lista.
<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

Renderade utdata:

<ul>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>K-9</li>
    <li>K-9</li>
    <li>K-9</li>
</ul>

Tag Helpers (hjälpmedel för taggar)

Det här scenariot gäller endast för MVC-vyer och Razor Pages (.cshtml).

Det finns tre direktiv som gäller Tag Helpers.

Direktiv Funktion
@addTagHelper Gör Tag Helpers tillgängliga för en vy.
@removeTagHelper Tar bort tagghjälpare som tidigare lagts till från en vy.
@tagHelperPrefix Anger ett taggprefix för att aktivera stöd för Tag Helper och för att göra Tag Helper-användning explicit.

Razor reserverade nyckelord

Razor nyckelord

  • page
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper (stöds inte för närvarande av ASP.NET Core)

Razor nyckelord är undantagna med @(Razor Keyword) (till exempel @(functions)).

C# Razor nyckelord

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

C# Razor nyckelord måste vara dubbel-escape med @(@C# Razor Keyword) (till exempel @(@case)). Den första @ undflyr den Razor parsern. Den andra @ slipper undan C#-parsern.

Reserverade nyckelord som inte används av Razor

  • class

Granska C#-klassen Razor som genererats för en vy

Razor SDK- hanterar kompilering av Razor filer. Som standard emitteras inte de genererade kodfilerna. För att aktivera generering av kodfiler, sätt EmitCompilerGeneratedFiles-direktivet i projektfilen (.csproj) till true:

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

När du skapar ett 6.0-projekt (net6.0) i Debug build-konfigurationen genererar Razor SDK en obj/Debug/net6.0/generated/ katalog i projektroten. Dess underkatalog innehåller de avgivna Razor sidkodsfilerna.

Razor SDK- hanterar kompilering av Razor filer. När du skapar ett projekt genererar Razor SDK en obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor katalog i projektroten. Katalogstrukturen i Razor-katalogen speglar projektets katalogstruktur.

Överväg följande katalogstruktur i ett ASP.NET Core Razor Pages 2.1-projekt:

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

Att skapa projektet i Debug konfiguration ger följande 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

Om du vill visa den genererade klassen för Pages/Index.cshtmlöppnar du obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Visa uppslag och skiftlägeskänslighet

Den Razor vymotorn utför skiftlägeskänsliga sökningar för vyer. Den faktiska sökningen bestäms dock av det underliggande filsystemet:

  • Filbaserad källa:
    • På operativsystem med skiftlägesokänsliga filsystem (till exempel Windows) är fysiska filprovidersökningar skiftlägesokänsliga. Till exempel resulterar return View("Test") i matchningar för /Views/Home/Test.cshtml, /Views/home/test.cshtmloch andra höljevarianter.
    • I skiftlägeskänsliga filsystem (till exempel Linux, OSX och med EmbeddedFileProvider) är sökningar skiftlägeskänsliga. Till exempel matchar return View("Test") specifikt /Views/Home/Test.cshtml.
  • Förkompilerade vyer: Med ASP.NET Core 2.0 eller senare är det skiftlägesokänsligt att leta upp förkompilerade vyer på alla operativsystem. Beteendet är identiskt med den fysiska filleverantörens beteende i Windows. Om två förkompilerade vyer endast skiljer sig åt om resultatet av uppslag är icke-deterministiskt.

Utvecklare uppmanas att matcha höljet för fil- och katalognamn med höljet för:

  • Namn på område, kontrollant och åtgärd.
  • Razor Sidor.

Matchningsfall säkerställer att distributionerna hittar sina vyer oavsett det underliggande filsystemet.

Importer som används av Razor

Följande importer genereras av ASP.NET Core-webbmallar som stöder Razor Files:

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;

Ytterligare resurser

Introduktion till ASP.NET webbprogrammering med hjälp av Razor Syntax innehåller många exempel på programmering med Razor syntax.