Sintaxa de bază Razor

În acest capitol, veți aprofunda principiile de bază ale sintaxei Razor.

Cel mai simplu lucru pe care puteți să il faceți cu sintaxa Razor este să accesați ceva din partea serverului prin adăugarea prexiului @ (caracterul A rond) la o variabilă sau numele unei funcții. Ați văzut câteva exemple în capitolele anterioare, unde puteați combina HTML, text și variabile din server la un loc, precum în felul următor:

<p>Hello, world - my name is @name and the current date is: @DateTime.Now.ToString()</p>

Expresia de mai sus afișează text, amestecat cu variabila name (ce va fi declarată în altă parte) și apoi acceseaza data curentă din propritatea Now a structurii DateTime, și mulțumită sintaxei simple, codul este foarte ușor de citit.

Dar prefixul @ nu accesează variabile simple sau proprietăți a unei clase. Este folosit peste tot în Razor, incluzând declarații de control în linia textului (en: inline), blocuri de cod, comentarii și multe altele, așa cum veți vedea în următoarele exemple.

Codarea HTML

Ar trebui să știți că atunci când folosiți sintaxa implicita a expresiei Razor de mai sus, rezultatul va fi automat codat în HTML. Acesta este comportamentul pe care îl doriți, dar în anumite cazuri, vreți să fiți capabil să transmiteți HTML și să lăsați browser-ul să îl interpreteze în loc să fie redat ca rezultat. Ca să faceți asta puteți folosi metoda Raw() în clasa Html și mai jos aveți un exemplu unde puteți vedea diferența:

@{
    var helloWorld = "<b>Hello, world!</b>";
}
<p>@helloWorld</p>
<p>@Html.Raw(helloWorld)</p>

Rezultatul va arăta în felul următor, unde puteți vedea pe prima linie, HTML-ul din string este afișat ca text (a fost codat HTML), în timp ce linia a doua este interpretată și astfel face textul îngroșat (en: bold):

<b>Hello, world!</b>

Hello, world!

Expresii explicite

În primul exemplu de mai sus, am folosit o așa numită expresie implicită, dar anumite situație cer o variantă mai explicită, pentru a arata exact parserului care sunt intențiile dvs. Razor vine cu o expresie explicită a sintaxei pentru acele situații și practic asta înseamnă încapsularea expresiei dvs. cu un set de paranteze. Asta face mai ușor parserului să înțeleagă ce faceți și permite anumite lucruri cum ar fi calcule sau modificări în expresia Razor.

Mai jos este un exemplu:

@{
    var name = "John Doe";
}
Hello, @(name.Substring(0,4)). Your age is: <b>@(37 + 5).</b>

Observați sintaxa, unde caracterul @ este urmat de un set de paranteze înconjurătoare. O folosim de două ori, mai întâi accesează metoda Substring pe o variabilă string și apoi va face o matematică simplă într-o expresie Razor. Rezultatul afișat va arăta în modul următor:

Hello, John. Your age is: 42.

Blocuri Razor cu multiple declarații

Dacă trebuie să faci mai mult decât să accesezi de exemplu o variabilă, Razor vă permite să intrați într-un bloc de cod dedicat cu multiple linii prin adăugarea unei acolade de început după operatorul @. Mai jos este un exemplu:

@{
    var sum = 32 + 10;
    var greeting = "Hello, world!";
    var text = "";
    for(int i = 0; i < 3; i++)
    { 
    text += greeting + " The result is: " + sum + "\n";
    }
}

<h2>CodeBlocks</h2>
Text: @text

Observați cum s-a scris cod C# obișnuit înăuntrul unui bloc de cod, incluzând bucle, declarații condiționale și orice erați obișnuit din limbajul C#. O importantă diferență este că trebuie să aveți acolade în jurul declarațiilor de control din blocurile de cod, chiar dacă au doar o linie - alfel veți deruta parserul.

Observați se asemenea cum definesc o variabilă într-un bloc de cod, modificați-l după cum credeți că este necesar și folosiți-l în afara blocului de cod!

Taguri HTML și text simplu în blocuri de cod

Atunci când sunteți într-un bloc de cod, ca în exemplul de mai sus, poate că aveți nevoie să afișați text - de fapt, este chiar normal. Dar în loc să vă forțeze în și în afara blocului de cod, Razor permite să amestecați tagurile HTML în blocurile dvs. de cod în felul următor:

@{
    var helloWorld = "This is a code block...";
    
    <p>This is a tag with plain text and <b>markup</b> inside of it...</p>   
}

Razor vede tag-urile HTML și asumă că îi oferiți markup pentru afișare în loc de cod pentru procesare. Dar dacă nu vreți să împachetați textul dvs. în taguri? Razor are o opțiune și pentru asta, folosind operatorul „@:”:

@:This is plain text!

Dacă aveți nevoie mai mult de o linie de simplu text, puteți să le înconjurați cu un set de taguri <text>. Mai jos este un exemplu mai complex, unde veți vedea ambele sintaxe:

@{
    var helloWorld = "This is a code block...";
    
 
    @:This is plain text!
    <br><br>
    <text>This is plain text as well, and we can
    even span multiple lines, if needed!</text>
}

Observați cum amestecăm codul, HTML și text simplu, foarte ușor!

Comentarii Razor în partea server

Câteodată vreți să lăsați comentarii în codul dvs., sau să comentați temporar anumite linii pentru a testa anumite lucuri. Astfel cele mai multe limbaje de programare includ sintaxă pentru comentarea codului și asta face si Razor. Puteți folosi comentarii HTML, dar cum știm cu toți, acestea sunt afișate în browser și pot fi văzute dacă opțiunea "View source" este folosită. Pe de altă parte comentariile Razor nu vor fi afișate în browser, dar vor fi ignorate atunci când este parsată pagina.

Mai jos este un exemplu despre cum puteți folosi comentarii Razor în view-uri:

@*
    Here's a Razor server-side comment
    It won't be rendered to the browser
    It can span multiple lines
*@

Dacă sunteți într-un bloc de cod Razor, puteți folosi și comentarii normale în stil C#.

@{
    @*
    Here's a Razor server-side comment
    *@

    // C# style single-line comment

    /* 
    C# style multiline comment
    It can span multiple lines
    */    
}

În concluzie

Acestea au fost lucrurile cele mai de bază pe care trebuie să le știți despre Razor și ar trebui să vă ajute să vă porniți. În capitolul următor, vă vor fi prezentate lucruri mult mai avansate.