Alap Razor szintaxis

Ebben a fejezetben megtekintjük a Razor szintaxis alapjelveit.

A legegyszerűbb dolog amit Razorrel tehetsz hogy egy szerveroldali dologhoz hozzáférsz az @ előtag segítségével. Pár példát láttunk erre az előző fejezetben, ahol HTML-t, szöveget és szerveroldali változókat kevertünk, ehhez hasonlóan:

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

A fenti kifejezés szöveget ír ki, keverve a name változóval (amit persze máshol kellett deklarálni) majd hozzáadja a jelenlegi dátumot a DateTime osztály Now tulajdonságával. Az egyszerű szintaxisnak köszönhetően könnyen olvasható a kód.

Az @ előtag azonban nem csak változók és tulajdonságok elérésére használható. Szinte mindenre ezt használjuk Razorben, beleértve a sorközbeni állításokat, kódblokkokat, kommenteket és még sok mást, ahogy azt hamarosan látni fogod.

HTML kódolás

Figyelembe kell venni hogy amikor implicit módon használod a Razor szintaxist, ahogy fent is használtuk, akkor a kimenet automatikusan HTML-kódolva lesz. Általában ez a kívánt viselkedés, de előfordulhat, hogy hogy HTML kimenetet szeretnél amit a böngésző akként is értelmez, nem egyszerű kimenetként. Ehhez a Raw() metódust kell használni a Html osztályból. Itt egy példa a különbség illusztrálására:

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

Így fog kinézni az eredmény, láthatod hogy az első soron a HTML a stringben csak szövegként van kezelve (HTML-kódolva van), míg a második sor értelmezve van és félkövéren jelenik meg:

<b>Hello, world!</b>

Hello, world!

Explicit kifejezések

A fenti példában úgynevezett implicit kifejezést használtunk, de vannak helyzetek, amikor nyíltabb változathoz kell folyamodnunk, hogy a fordító tudja, pontosan mire is gondolunk. A Razornek van egy explicit kifejezés szintaxusa is, pontosan ezekre a helyzetekre. Alapvetően csak arról szól, hogy a kifejezésedet zárójelek közé teszed. Ez segít a szintaktikai elemzőnek megérteni, hogy mit csinálsz, és lehetővé teszi számítások és módosítások elvégzésére Razor kifejezéseken belül is.

Itt egy példa:

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

Figyeld a szintaxist: az @ karaktert egy pár zárójel követi. Kétszer is használjuk, először a string változón a Substring metódus hozzáféréséhez, majd egy egyszerű matematikai kifejezéshez, közvetlen a Razor kifejezésen belül. Az eredmény így néz ki:

Hello, John. Your age is: 42.

Többkifejezéses Razor blokkok

Ha többre van szükséged mint például egy változóhoz való hozzáféréshez, a Razor lehetővé teszi többsoros kódblokkok megadását azzal, hogy az @ operátor után kapcsos zárójelet teszel. Itt egy példa:

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

Ahogy látható, általános C# kódot használok a blokkon belül, beleértve ebbe ciklusokat, feltételes állításokat és minden mást, ami a C# nyelvben megtalálható. Egy fontos különbség hogy még egysoros vezérlő állításoknál is szükséges a kapcsos zárójelek megadása, különben megzavarhatod a szintaktikai elemzőt.

Szintén fontos, hogy deklarálhatok egy változót a blokkon belül, tetszés szerint módosíthatom, majd a blokkon kívül is használhatom az értékét!

HTML tagek és egyszerű szöveg kódblokkokon belül

Kódblokkon belül is szükséged lehet egyszerű szöveg leadására - mi több, az általános szükséglet. Ahelyett, hogy ki- és be kéne lépned kódblokkok között, a Razor lehetővé teszi HTML tagek közvetlen használatát a kódblokkokon belül:

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

Ha a Razor lát egy HTML taget, feltételezi, hogy azzal olyan szöveget is adsz neki kimenetnek, nem pedig feldolgozandó kódot. De mi van, ha nem akarod tagek közé tenni a szöveget? Erre is van lehetőség, méghozzá az @: operátor segítségével:

@:This is plain text!

Ha több mint egy sor egyszerű szövegről van szó, körbeveheted azt <text> tagekkel. Itt egy teljesebb példa, ahol mindkét opciót használom:

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

Láthatod hogy könnyen keverhetünk kódot, HTML-t és egyszerű szöveget is!

Razor szerveroldai kommentek

Olykor kommentálni szeretnéd a kódodat, vagy kikommentálni pár sor kódot, hogy tesztelj valamit. Emiatt a legtöbb programozási nyelvbe be van építve a kommentírás szintaxisa, és ez a Razorre is igaz. Használhatnál HTML kommenteket is, de ahogy azt tudjuk, azok megjelennek a böngésző oldalán is, tehát a "Forrás megtekintése" lehetőséggel azok mind láthatóvá válnak a kliens oldalán. A Razor kommentek ezzel szemben sosem jelennek meg a böngészőben, egyszerűen figyelmen kívül vannak hagyva az oldal kiértékelésekor.

Itt láthatod hogyan használhatsz Razor kommenteket a nézeteidben:

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

Kódblokkon belül C# típusú kommenteket is használhatsz:

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

    // C# style single-line comment

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

Összefoglalás

Ezek voltak a legalapvetőbb dolgok amiket a Razorről tudhatsz. A következő cikkben már haladó technikákat veszünk szemügyre.