Razor Informazioni di riferimento sulla sintassi per ASP.NET Core

Di Rick Anderson, Taylor Mullen e Dan Vicarel

Razor è una sintassi di markup per l'incorporamento di codice basato su .NET in pagine Web. La Razor sintassi è costituita da Razor markup, C# e HTML. I file contenenti Razor generalmente hanno un'estensione file di .cshtml. Razor è disponibile anche nei Razor file dei componenti (.razor). Razor la sintassi è simile a quella dei motori di templating di vari framework SPA JavaScript, come Angular, React, VueJs e Svelte. Per altre informazioni, vedere Le funzionalità descritte in questo articolo sono obsolete a partire da ASP.NET Core 3.0.

Introduzione alla programmazione Web ASP.NET utilizzando la Razor sintassi fornisce molti esempi di programmazione con la Razor sintassi. Sebbene l'argomento sia stato scritto per ASP.NET anziché ASP.NET Core, la maggior parte degli esempi si applica a ASP.NET Core.

Rendering HTML

La lingua predefinita Razor è HTML. Il rendering dell'HTML a partire dal markup Razor non è diverso da quello da un file HTML. Il rendering del markup HTML nei .cshtmlRazor file viene eseguito dal server senza modifiche.

Sintassi Razor

Razor supporta C# e usa il @ simbolo per passare da HTML a C#. Razor valuta le espressioni C# ed esegue il rendering nell'output HTML.

Quando un @ simbolo è seguito da una Razor parola chiave riservata, passa a specifico Razor markup. Altrimenti, si converte in HTML semplice.

Per sfuggire un @ simbolo nel Razor markup, utilizzare un secondo @ simbolo:

<p>@@Username</p>

Il rendering del codice viene eseguito in HTML con un solo simbolo @:

<p>@Username</p>

Gli attributi e il contenuto HTML contenenti indirizzi di posta elettronica non considerano il simbolo @ come un carattere di transizione. Gli indirizzi di posta elettronica nell'esempio seguente non vengono toccati dall'analisi Razor :

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

Grafica vettoriale scalabile (SVG)

Gli elementi foreignObject SVGsono supportati:

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

Espressioni implicite Razor

Le espressioni implicite Razor iniziano con @ seguito dal codice C#:

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

Fatta eccezione per la parola chiave await di C#, le espressioni implicite non devono contenere spazi. Se l'istruzione C# ha una fine chiaramente definita, gli spazi possono essere mescolati.

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

Le espressioni implicite non possono contenere generics C#, poiché i caratteri all'interno delle parentesi (<>) vengono interpretati come un tag HTML. Il codice seguente non è valido:

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

Il codice precedente genera un errore del compilatore simile a uno dei seguenti:

• L'elemento "int" non è stato chiuso. Tutti gli elementi devono essere a chiusura automatica o avere un tag di fine corrispondente.
• Non è possibile convertire il gruppo di metodi 'GenericMethod' nel tipo non delegato 'object'. Hai intenzione di invocare il metodo?

Le chiamate di metodi generici devono essere incluse in un'espressione esplicita Razor oppure in un blocco Razor codice.

Espressioni esplicite Razor

Le espressioni esplicite Razor sono costituite da un @ simbolo con parentesi bilanciate. Per rendere l'ora della settimana scorsa, viene utilizzato il seguente markup Razor.

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

Qualsiasi contenuto all'interno delle parentesi @() viene valutato e sottoposto a rendering nell'output.

Le espressioni implicite, descritte nella sezione precedente, in genere non possono contenere spazi. Nel codice seguente, una settimana non viene sottratta dall'ora corrente:

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

Il codice esegue il rendering dell'HTML seguente:

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

È possibile usare le espressioni esplicite per concatenare testo con un risultato dell'espressione:

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

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

Senza l'espressione esplicita, <p>Age@joe.Age</p> viene considerato come un indirizzo di posta elettronica e <p>Age@joe.Age</p> viene sottoposto a rendering. Se viene scritto come espressione esplicita, <p>Age33</p> viene sottoposto a rendering.

Le espressioni esplicite possono essere usate per eseguire il rendering dell'output dai metodi generici nei .cshtml file. Il markup seguente illustra come correggere l'errore riportato in precedenza, causato dalle parentesi quadre di un oggetto generico C#. Il codice viene scritto come un'espressione esplicita:

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

Codifica di espressioni

Le espressioni C# che restituiscono una stringa sono codificate in HTML. Le espressioni C# che restituiscono IHtmlContent vengono renderizzate direttamente con IHtmlContent.WriteTo. Le espressioni C# che non restituiscono IHtmlContent vengono convertite in una stringa da ToString e codificate prima di essere sottoposte a rendering.

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

Il codice precedente esegue il rendering del codice HTML seguente:

<span>Hello World</span>

Il codice HTML viene visualizzato nel browser come testo normale:

<span>Hello World</span>

L'output HtmlHelper.Raw non è codificato ma viene sottoposto a rendering come markup HTML.

Avviso

L'uso di HtmlHelper.Raw su input utente non purificato costituisce un rischio per la sicurezza. L'input utente potrebbe contenere JavaScript dannoso o altri attacchi. La purificazione degli input utente è difficile. Evitare l'uso di HtmlHelper.Raw con l'input utente.

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

Il codice esegue il rendering dell'HTML seguente:

<span>Hello World</span>

Razor blocchi di codice

Razor i blocchi di codice iniziano con @ e sono racchiusi tra {}. A differenza delle espressioni, il codice C# all'interno di blocchi di codice non viene sottoposto a rendering. I blocchi di codice e le espressioni in una visualizzazione condividono lo stesso ambito e vengono definiti in ordine:

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

Il codice esegue il rendering dell'HTML seguente:

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

Nei blocchi di codice dichiarare funzioni locali con markup da usare come metodi per la creazione di modelli:

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

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

Il codice esegue il rendering dell'HTML seguente:

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

Transizioni implicite

Il linguaggio predefinito in un blocco di codice è C#, ma la Razor pagina può tornare al codice HTML:

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

Transizione esplicita delimitata

Per definire una sottosezione di un blocco di codice che deve eseguire il rendering HTML, racchiudere i caratteri per il rendering con il Razor<text> tag :

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

Usare questo approccio per visualizzare HTML che non è racchiuso da tag HTML. Senza un codice HTML o Razor tag, si verifica un Razor errore di runtime.

Il tag <text> è utile per controllare gli spazi vuoti durante il rendering del contenuto:

• Solo il contenuto all'interno del tag <text> viene sottoposto a rendering.
• Non vengono visualizzati spazi vuoti prima o dopo il tag <text> nell'output HTML.

Transizione di riga esplicita

Per eseguire il rendering del resto di un'intera riga come HTML all'interno di un blocco di codice, usare la sintassi @:.

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

Senza il @: nel codice, viene generato un errore a Razor runtime.

I caratteri aggiuntivi @ in un Razor file possono causare errori del compilatore nelle istruzioni più avanti nel blocco. Errori aggiuntivi del compilatore:@

• Può essere difficile da comprendere perché l'errore effettivo si verifica prima dell'errore segnalato.
• È comune dopo la combinazione di più espressioni implicite ed esplicite in un singolo blocco di codice.

Rendering dell'attributo condizionale

Razor omette automaticamente gli attributi non necessari. Se il valore passato in è null o false, il rendering dell'attributo non viene eseguito.

Si consideri ad esempio il seguente rasoio:

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

Il markup precedente Razor genera il codice HTML seguente:

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

Strutture di controllo

Le strutture di controllo sono un'estensione dei blocchi di codice. Tutti gli aspetti dei blocchi di codice (transizione al markup, C# inline) sono validi anche per le strutture seguenti:

Condizionali @if, else if, else, and @switch

@if controlla quando viene eseguito il codice:

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

else e else if non richiedono il simbolo @:

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

Nel markup seguente viene illustrato come usare un'istruzione 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;
}

Eseguendo il loop @for, @foreach, @while, and @do while

È possibile eseguire il rendering di HTML basato su modelli con le istruzioni di controllo dei cicli. Per visualizzare un elenco di persone:

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

Le istruzioni di ciclo supportate sono le seguenti:

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

Composto @using

In C# viene usata un'istruzione using per verificare che un oggetto sia stato eliminato. In Razorlo stesso meccanismo viene usato per creare helper HTML che contengono contenuto aggiuntivo. Nel codice seguente, gli helper HTML rendono un tag <form> con l'istruzione @using:

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

@try, catch, finally

La gestione delle eccezioni è simile a 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 offre la possibilità di proteggere le sezioni critiche con istruzioni di blocco:

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

Commenti

Razor supporta commenti C# e HTML:

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

Il codice esegue il rendering dell'HTML seguente:

<!-- HTML comment -->

Razor i commenti vengono rimossi dal server prima del rendering della pagina Web. Razor utilizza @* *@ per delimitare i commenti. Il codice seguente è commentato, pertanto il server non rende alcun markup.

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

Direttive

Razor le direttive sono rappresentate da espressioni implicite con parole chiave riservate che seguono il @ simbolo. Una direttiva modifica in genere il modo in cui una vista viene compilata o funzioni.

Comprendere come Razor genera codice per una visualizzazione semplifica la comprensione del funzionamento delle direttive.

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

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

Il codice genera una classe simile alla seguente:

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

Più avanti in questo articolo, la sezione Esaminare la Razor classe C# generata per una visualizzazione illustra come visualizzare questa classe generata.

@attribute

La direttiva @attribute aggiunge l'attributo specificato alla classe della pagina o della visualizzazione generata. L'esempio seguente aggiunge l'attributo [Authorize]:

@attribute [Authorize]

La @attribute direttiva può anche essere usata per fornire un modello di route basato su una costante in un componente Razor. Nell'esempio seguente la @page direttiva in un componente viene sostituita con la @attribute direttiva e il modello di route basato su costante in Constants.CounterRoute, che viene impostato altrove nell'app su "/counter":

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

@code

Questo scenario si applica solo ai Razor componenti (.razor).

Il @code blocco consente a un Razor componente di aggiungere membri C# (campi, proprietà e metodi) a un componente:

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

Per Razor componenti, @code è un alias di @functions e consigliato rispetto a @functions. È consentito più di un blocco @code.

@functions

La direttiva @functions consente di aggiungere membri C# (campi, proprietà e metodi) alla classe generata:

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

Nei Razor componenti, usare @code anziché @functions per aggiungere membri C#.

Ad esempio:

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

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

Il codice genera il markup HTML seguente:

<div>From method: Hello</div>

Il codice seguente è la classe C# generata Razor :

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

I metodi @functions fungono da metodi per la creazione di modelli quando includono markup:

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

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

Il codice esegue il rendering dell'HTML seguente:

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

@implements

La direttiva @implements implementa un'interfaccia per la classe generata.

L'esempio seguente implementa System.IDisposable in modo che sia possibile chiamare il metodo Dispose:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

@inherits

La direttiva @inherits offre il controllo completo della classe che viene ereditata dalla visualizzazione:

@inherits TypeNameOfClassToInheritFrom

Il codice seguente è un tipo di pagina personalizzato Razor :

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

L'elemento CustomText viene visualizzato in una vista.

@inherits CustomRazorPage<TModel>

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

Il codice esegue il rendering dell'HTML seguente:

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

È possibile usare @model e @inherits nella stessa visualizzazione. @inherits può trovarsi in un _ViewImports.cshtml file importato dalla vista:

@inherits CustomRazorPage<TModel>

Il codice seguente è un esempio di visualizzazione fortemente tipizzata:

@inherits CustomRazorPage<TModel>

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

Se "rick@contoso.com" viene passato nel modello, la visualizzazione genera il markup HTML seguente:

<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

La direttiva @inject consente alla pagina Razor di inserire un servizio dal contenitore dei servizi in una visualizzazione. Per altre informazioni, vedere Inserimento di dipendenze in visualizzazioni.

@layout

Questo scenario si applica solo ai Razor componenti (.razor).

La direttiva @layout specifica un layout per i componenti Razor che possono essere instradati e che dispongono di una direttiva @page. I componenti di layout vengono usati per evitare la duplicazione e l'incoerenza del codice. Per altre informazioni, vedere layout ASP.NET CoreBlazor.

@model

Questo scenario si applica solo alle visualizzazioni MVC e Razor alle pagine (.cshtml).

La direttiva @model definisce il tipo di modello passato a una vista o a una pagina.

@model TypeNameOfModel

In un'app ASP.NET Core MVC o Razor Pages creata con singoli account utente, Views/Account/Login.cshtml contiene la seguente dichiarazione di modello:

@model LoginViewModel

La classe generata eredita da RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor espone una Model proprietà per l'accesso al modello passato alla vista:

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

La direttiva @model specifica il tipo della proprietà Model. La direttiva specifica l'elemento T in RazorPage<T> che ha generato la classe da cui deriva la visualizzazione. Se la direttiva @model non è specificata, la proprietà Model è di tipo dynamic. Per ulteriori informazioni, vedere Strongly typed models and the @model keyword.

@namespace

La direttiva @namespace:

• Imposta lo spazio dei nomi della classe della pagina generata, Razor, della visualizzazione MVC o del componente Razor.
• Imposta gli spazi dei nomi derivati dalla radice di pagine, visualizzazioni o classi di componenti dal file import più vicino nell'albero delle directory, _ViewImports.cshtml (visualizzazioni o pagine) o _Imports.razor (Razor componenti).

@namespace Your.Namespace.Here

Per l'esempio Razor Pages illustrato nella tabella seguente:

• Ogni pagina importa Pages/_ViewImports.cshtml.
• Pages/_ViewImports.cshtml contiene @namespace Hello.World.
• Ogni pagina ha Hello.World come radice dello spazio dei nomi.

Pagina	Namespace (Spazio dei nomi)
Pages/Index.cshtml	Hello.World
Pages/MorePages/Page.cshtml	Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml	Hello.World.MorePages.EvenMorePages

Le relazioni precedenti si applicano ai file di importazione usati con visualizzazioni e Razor componenti MVC.

Quando più file di importazione hanno una direttiva @namespace, per impostare lo spazio dei nomi radice, viene usato il file più vicino alla pagina, alla vista o al componente nell'albero di directory.

Se la EvenMorePages cartella nell'esempio precedente contiene un file imports con @namespace Another.Planet (o il Pages/MorePages/EvenMorePages/Page.cshtml file contiene @namespace Another.Planet), il risultato viene mostrato nella tabella seguente.

Pagina	Namespace (Spazio dei nomi)
Pages/Index.cshtml	Hello.World
Pages/MorePages/Page.cshtml	Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml	Another.Planet

@page

La direttiva @page ha effetti diversi a seconda del tipo del file in cui viene visualizzata. La direttiva:

• La presenza di .cshtml in un file indica che il file è una Razor pagina. Per altre informazioni, vedere Route personalizzate e Introduzione alle Razor pagine in ASP.NET Core.
• Specifica che un Razor componente deve gestire direttamente le richieste. Per ulteriori informazioni, vedere ASP.NET Core Blazor routing e navigazione.

@preservewhitespace

Questo scenario si applica solo ai Razor componenti (.razor).

Se impostato su false (impostazione predefinita), gli spazi bianchi nel markup sottoposto a rendering dai Razor componenti (.razor) vengono rimossi se:

• Si trova all'inizio o alla fine di un elemento.
• Antecedenti o conseguenti all'interno di un parametro RenderFragment. Ad esempio, contenuto figlio passato a un altro componente.
• Precede o segue un blocco di codice C#, ad esempio @if o @foreach.

@rendermode

Questo scenario si applica solo ai Razor componenti (.razor).

Imposta la modalità di rendering di un Razor componente:

• InteractiveServer: applica il rendering interattivo del server usando Blazor Server.
• InteractiveWebAssembly: applica il rendering interattivo di WebAssembly usando Blazor WebAssembly.
• InteractiveAuto: inizialmente applica il rendering interattivo WebAssembly usando Blazor Server e quindi applica il rendering interattivo WebAssembly nelle visite successive dopo che il bundle Blazor è stato scaricato.

Per un'istanza del componente:

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

Nella definizione del componente:

@rendermode InteractiveServer

Nota

Blazor I modelli includono una direttiva statica using per RenderMode nel file dell'app _Imports (Components/_Imports.razor) per una sintassi più breve @rendermode:

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

Senza la direttiva precedente, i componenti devono specificare esplicitamente la classe statica nella sintassi RenderMode@rendermode.

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

Per ulteriori informazioni, incluse le indicazioni sulla disabilitazione del prerendering con l'attributo/direttiva direttiva, vedere i Blazor.

@section

Questo scenario si applica solo alle visualizzazioni MVC e Razor alle pagine (.cshtml).

La @section direttiva viene usata insieme ai layout MVC e Razor Pages per consentire alle visualizzazioni o alle pagine di eseguire il rendering del contenuto in parti diverse della pagina HTML. Per altre informazioni, vedere Layout in ASP.NET Core.

@typeparam

Questo scenario si applica solo ai Razor componenti (.razor).

La direttiva @typeparam dichiara un parametro di tipo generico per la classe del componente generata:

@typeparam TEntity

I tipi generici con where vincoli di tipo sono supportati:

@typeparam TEntity where TEntity : IEntity

Per altre informazioni, vedere gli articoli seguenti:

• supporto del tipo generico per i componenti di Razor ASP.NET Core
• Componenti basati su modelli di ASP.NET Core Blazor

@using

La direttiva @using aggiunge la direttiva C# using alla visualizzazione generata:

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

Nei Razor componenti, @using controlla anche quali componenti si trovano nell'ambito.

Attributi delle direttive

Razor gli attributi di direttiva sono rappresentati da espressioni implicite con parole chiave riservate che seguono il @ simbolo. Un attributo di direttiva modifica in genere la modalità di compilazione o funzioni di un elemento.

@attributes

Questo scenario si applica solo ai Razor componenti (.razor).

@attributes consente a un componente di eseguire il rendering di attributi non dichiarati. Per ulteriori informazioni, vedere ASP.NET Core Blazor attribute splatting e parametri arbitrari.

@bind

Questo scenario si applica solo ai Razor componenti (.razor).

Il data binding nei componenti viene eseguito con l'attributo @bind. Per ulteriori informazioni, vedere ASP.NET Core Blazor data binding.

@bind:culture

Questo scenario si applica solo ai Razor componenti (.razor).

Usare l'attributo @bind:culture con l'attributo @bind per fornire un System.Globalization.CultureInfo per l'analisi e la formattazione di un valore. Per ulteriori informazioni, vedere ASP.NET Core Blazor globalizzazione e localizzazione.

@formname

Questo scenario si applica solo ai Razor componenti (.razor).

@formname assegna un nome di modulo al formato HTML normale di un Razor componente o a un modulo basato su EditForm (Editform documentazione). Il valore di @formname deve essere univoco, che impedisce conflitti di forma nelle situazioni seguenti:

• Un modulo viene inserito in un componente con più moduli.
• Un modulo viene originato da una libreria di classi esterna, in genere un pacchetto NuGet, per un componente con più moduli e l'autore dell'app non controlla il codice sorgente della libreria per impostare un nome di modulo esterno diverso rispetto a un nome usato da un altro modulo nel componente.

Per ulteriori informazioni ed esempi, vedere Panoramica dei moduli di ASP.NET CoreBlazor.

@on{EVENT}

Questo scenario si applica solo ai Razor componenti (.razor).

Razor fornisce funzionalità di gestione degli eventi per i componenti. Per altre informazioni, vedere ASP.NET Core gestione degli eventiBlazor.

@on{EVENT}:preventDefault

Questo scenario si applica solo ai Razor componenti (.razor).

Impedisce l'azione predefinita per l'evento.

@on{EVENT}:stopPropagation

Questo scenario si applica solo ai Razor componenti (.razor).

Interrompe la propagazione dell'evento.

@key

Questo scenario si applica solo ai Razor componenti (.razor).

L'attributo della direttiva @key fa in modo che l'algoritmo di controllo delle differenze tra componenti garantisca la conservazione degli elementi o dei componenti in base al valore della chiave. Per altre informazioni, vedere Mantenere le relazioni tra elementi, componenti e modelli in ASP.NET Core Blazor.

@ref

Questo scenario si applica solo ai Razor componenti (.razor).

I riferimenti ai componenti (@ref) consentono di fare riferimento a un'istanza di un componente in modo che sia possibile eseguire comandi su tale istanza. Per ulteriori informazioni, vedere i componenti di ASP.NET CoreRazor.

Delegati con modelli Razor

Questo scenario si applica solo alle visualizzazioni MVC e Razor alle pagine (.cshtml).

Razor I modelli consentono di definire un frammento di interfaccia utente con il formato seguente:

@<tag>...</tag>

Nell'esempio seguente viene illustrato come specificare un delegato modellato Razor come Func<T,TResult>. Per il parametro del metodo incapsulato dal delegato viene specificato il tipo dinamico. Come valore restituito del delegato viene specificato un tipo di oggetto. Il modello viene usato con un oggetto List<T> di Pet dotato della proprietà 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" }
    };
}

Il modello viene reso con pets fornito da un'istruzione foreach:

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

Uscita renderizzata:

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

È anche possibile fornire un modello inline Razor come argomento a un metodo. Nell'esempio seguente il Repeat metodo riceve un Razor modello. Il metodo usa il modello per generare contenuto HTML tramite ripetizioni di elementi (item) ricavati da un elenco:

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

Usando l'elenco di animali domestici (pets) dell'esempio precedente, il metodo Repeat viene chiamato con:

• List<T> di Pet.
• Numero di volte in cui ripetere ogni animale domestico.
• Modello in linea da usare per gli elementi di un elenco non ordinato.

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

Uscita renderizzata:

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

Helper per i tag

Questo scenario si applica solo alle visualizzazioni MVC e Razor alle pagine (.cshtml).

Esistono tre direttive che riguardano i Tag Helpers.

Direttiva	Funzione
@addTagHelper	Rende gli helper tag disponibili per una visualizzazione.
@removeTagHelper	Rimuove gli helper tag aggiunti in precedenza da una visualizzazione.
@tagHelperPrefix	Specifica un prefisso del tag per abilitare il supporto dell'helper tag e renderne esplicito l'uso.

Razor parole chiave riservate

Razor Parole chiave

• page
• namespace
• functions
• inherits
• model
• section
• helper (Attualmente non supportato da ASP.NET Core)

Razor le parole chiave vengono precedute da un escape , @(Razor Keyword) ad esempio @(functions).

Parole chiave C# Razor

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

Le parole chiave C# Razor devono essere precedute da un carattere di escape doppio ( @(@C# Razor Keyword) ad esempio , @(@case)). Il primo @ scappa dal Razor parser. Il secondo @ consente di uscire dal parser di C#.

Parole chiave riservate non usate da Razor

• class

Esaminare la Razor classe C# generata per una visualizzazione

L'SDK Razor gestisce la compilazione dei Razor file. Per impostazione predefinita, i file di codice generati non vengono emessi. Per abilitare l'emissione dei file di codice, impostare la direttiva EmitCompilerGeneratedFiles nel file di progetto (.csproj) su true:

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

Quando si compila un progetto 6.0 (net6.0) nella configurazione di Debug compilazione, l'SDK Razor genera una obj/Debug/net6.0/generated/ directory nella radice del progetto. La sottodirectory contiene i file di codice pagina emessi Razor.

Viste delle ricerche e distinzione di maiuscole e minuscole

Il Razor view engine esegue ricerche case-sensitive per le visualizzazioni. La ricerca effettiva è tuttavia determinata dal file system sottostante:

• Origine basata su file:
  • Nei sistemi operativi con file system che non fanno distinzione tra maiuscole e minuscole (ad esempio, Windows), le ricerche del provider di file fisici non eseguono la distinzione tra maiuscole e minuscole. Ad esempio, return View("Test") restituisce corrispondenze per /Views/Home/Test.cshtml, /Views/home/test.cshtml, e qualsiasi altra variante di maiuscole e minuscole.
  • Nei file system che fanno distinzione tra maiuscole e minuscole (ad esempio Linux, OSX e con EmbeddedFileProvider), le ricerche sono sensibili alle maiuscole e minuscole. Ad esempio, return View("Test") corrisponde in modo specifico a /Views/Home/Test.cshtml.
• Visualizzazioni precompilate: con ASP.NET Core 2.0 e versioni successive, la ricerca di visualizzazioni precompilate non esegue la distinzione tra maiuscole e minuscole in tutti i sistemi operativi. Questo comportamento è identico al comportamento del provider di file fisici in Windows. Se due visualizzazioni precompilate differiscono solo nelle lettere maiuscole e minuscole, il risultato di ricerca è non deterministico.

Gli sviluppatori sono invitati a far corrispondere le maiuscole e minuscole dei nomi di file e directory per quanto riguarda le maiuscole e minuscole di:

• Nomi di area, controller e azione.
• Razor Pagine.

La distinzione tra maiuscole e minuscole assicura che le distribuzioni trovino le proprie visualizzazioni indipendentemente dal file system sottostante.

Importazioni utilizzate da Razor

Le importazioni seguenti vengono generate dai modelli Web ASP.NET Core per supportare Razor File:

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;

Risorse aggiuntive

Introduzione alla programmazione Web ASP.NET utilizzando la Razor sintassi fornisce molti esempi di programmazione con la Razor sintassi.