Basic Razor syntax

W tym rozdziale przyjrzymy się wszystkim podstawowym zasadom składni Razor.

Najbardziej podstawową rzeczą jaką można zrobić ze składnią Razor jest dostęp do czegoś od strony serwera poprzez prefiksowanie zmiennej lub nazwy funkcji znakiem @ (znak małpy). Widzieliśmy tego kilka przykładów w poprzednim rozdziale, gdzie możemy po prostu mieszać zmienne HTML, tekstowe oraz po stronie serwera razem w ten sposób:

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

Powyższe wyrażenie wyprowadza tekst, zmieszany ze zmienną name (musi być zadeklarowana gdzie indziej), a następnie uzyskuje dostęp do aktualnej daty z właściwości Now struktury DateTime, a dzięki prostej składni, kod jest właściwie dość łatwy do odczytania.

Ale przedrostek @ nie służy tylko do dostępu do prostych zmiennych lub właściwości w danej klasie. Jest używany do prawie wszystkiego w Razor, włączając w to polecenia sterujące inline, bloki kodu, komentarze i wiele innych rzeczy, jak zobaczysz w poniższych przykładach.

Kodowanie HTML

Powinieneś być świadomy, że gdy używasz domyślnej składni wyrażenia Razor przedstawionej powyżej, wyjście zostanie automatycznie zakodowane w HTML. Zazwyczaj jest to zachowanie, które chcesz, ale w niektórych przypadkach, chcesz mieć możliwość wypisania kodu HTML i zlecić jego interpretację przez przeglądarkę zamiast renderowania go jako wyjścia. W tym celu, możesz użyć metody Raw() w klasie Html i oto przykład, gdzie możesz zobaczyć różnicę:

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

Wynik będzie wyglądał tak, że w pierwszym wierszu, HTML w łańcuchu jest po prostu renderowany jako tekst (został zakodowany w HTML), podczas gdy drugi wiersz jest interpretowany i tym samym tekst jest pogrubiony:

<b>Hello, world!</b>

Hello, world!

Jawne wyrażenia

W pierwszym przykładzie powyżej, użyliśmy tak zwanego wyrażenia domyślnego, ale niektóre sytuacje wymagają bardziej wyraźnego wariantu, aby pokazać parserowi dokładnie, jakie są twoje intencje. Razor posiada jawną składnię wyrażenia tylko dla tych sytuacji i w zasadzie chodzi o to, aby zawinąć wyrażenie w zestaw nawiasów. Ułatwia to parserowi zrozumienie, co robisz, i pozwala na takie rzeczy jak obliczenia i modyfikacje wewnątrz wyrażenia Razor.

Oto przykład:

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

Zwróć uwagę na składnię, gdzie po znaku @ następuje zestaw nawiasów otaczających. Używamy go dwa razy, najpierw by uzyskać dostęp do metody Substring na zmiennej łańcuchowej, a następnie by zrobić kawałek bardzo prostej matematyki bezpośrednio wewnątrz wyrażenia Razor. Wynikające z tego wyjście wygląda tak:

Hello, John. Your age is: 42.

Wieloliniowe bloki Razor

Jeśli musisz zrobić coś więcej niż tylko uzyskać dostęp np. do zmiennej, Razor pozwala na wprowadzenie dedykowanego, wielowierszowego kodu-bloku poprzez wpisanie startowego nawiasu klamrowego za operatorem @. Oto przykład:

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

Zauważ jak mogę napisać zwykły kod C# wewnątrz bloku kodowego, włączając w to pętle, warunkowe wyrażenia i wszystko inne, do czego jesteś przyzwyczajony z języka C#. Ważną różnicą jest jednak to, że musisz mieć nawiasy klamrowe wokół swoich instrukcji sterujących wewnątrz bloków kodu, nawet jeśli obejmują one tylko jedną linię - w przeciwnym razie zmylisz parser.

Zauważ również, jak mogę zdefiniować zmienną wewnątrz bloku kodu, zmodyfikować ją w razie potrzeby, a następnie użyć jej poza blokiem kodu!

Tagi HTML i zwykły tekst wewnątrz bloków kodu

Tak więc, kiedy znajdujesz się w bloku kodu, jak pokazano w powyższym przykładzie, możesz nadal potrzebować wypisać tekst - w rzeczywistości jest to całkiem normalne. Ale zamiast zmuszać cię do wejścia i wyjścia z bloków kodu, Razor pozwala ci mieszać tagi HTML bezpośrednio w twoich blokach kodu, w ten sposób:

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

Razor po prostu widzi twoje znaczniki HTML i zakłada, że teraz dajesz mu znacznik do wyjścia zamiast kodu do przetworzenia. Ale co jeśli nie chcesz zawijać swojego tekstu wewnątrz znaczników? Razor ma możliwość zrobienia tego również za pomocą operatora @::

@:This is plain text!

Jeśli potrzebujesz więcej niż jeden wiersz zwykłego tekstu, możesz otoczyć go zestawem <text> tagów. Oto bardziej kompletny przykład, gdzie pokazuję wam obie składnie:

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

Zauważ, że teraz możemy bardzo łatwo mieszać kod, HTML i zwykły tekst!

Komentarze Razor po stronie serwera

Czasami możesz chcieć zostawić komentarze w swoim kodzie lub tymczasowo skomentować linie kodu, aby przetestować rzeczy. Dlatego większość języków programowania zawiera składnię do komentowania Twojego kodu, podobnie jak Razor. Możesz po prostu używać komentarzy HTML, ale jak wszyscy wiemy, są one renderowane w przeglądarce i dlatego można je zobaczyć, jeśli użyta jest opcja "Zobacz źródło". Z drugiej strony, komentarze Razor nigdy nie są renderowane w przeglądarce, lecz po prostu ignorowane podczas parsowania strony.

Oto przykład, jak można mieć komentarz Razor w swoich plikach:

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

Jeśli znajdujesz się wewnątrz bloku z kodem Razor, możesz nawet użyć zwykłych komentarzy w stylu C#:

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

    // C# style single-line comment

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

Podsumowanie

To była najbardziej podstawowa rzecz, którą musisz wiedzieć o Razor i powinieneś przez to być gotowy. W następnym rozdziale, zajmiemy się bardziej zaawansowanymi sprawami.