ASP .NET MVC – silnik renderujący Razor

Widok jest nieodłącznym elementem aplikacji ASP .Net MVC czym byłby on jednak bez odwołań do kodu C#? W tym wpisie przybliżymy sobie ten temat, serdecznie zapraszam.

Począwszy od 3 wersji MVC wprowadzona została składnia Razor – silnik renderujący pozwalający nam na łatwe wprowadzanie elementów kodu aplikacji do plików HTML. Rozszerzenia plików mają teraz postać .cshtml i są znacznie czytelniejsze od wcześniej stosowanych .aspx

Podstawy składni Razor

ASPX vs Razor

Kiedyś wyświetlanie danych z modelu za pomocą ASPX wyglądało następująco:

<h1>
        Hello <%=ViewBag.UserName %> Date: <%=DateTime.Now %>
</h1>

składnia Razor upraszcza powyższy kod do

<h1>
        Hello @ViewBag.Name Date: @DateTime.Now
</h1>

Jak widzimy do używania wystarczy nam stosowanie znaku @ zamiast tagów <% %>. Wewnątrz plików .cshtml @ powoduje, że przełączamy się na pisanie w języku C#.

Działania wewnątrz składni Razor

Zwróć uwagę, że nawiasy mogą mieć tu istotne znaczenie

@item.rating / 10 //10/10

Natomiast

@(item.rating/10) //1
Adresy email a Razor

Użycie znacznika @ nie zawsze będzie oznaczało kod C# tuż za nim. W przypadkach gdy przed @ umieścimy jakiś znak/tekst – Razor uzna to wyrażenie jako adres email i nie będzie wykonywać ewentualnego kodu który byłby za nim.

Test@item.Rating // Test@item.Rating

bezpośrednie użycie składni Razor za tekstem – konieczne nawiasy

Test@(item.Rating) // Test10

zastosowanie znaku białego przed składnią Razor

Test @item.Rating // Test 10
Konkatenacja

Razor pozwala nam na łączenie kilku wyrażeń w jedno

@("Concat test" + ViewBag.Name)
Bloki kodu

Użycie nawiasów klamrowych za znakiem @ pozwoli nam na pisanie bloków kodu C# wewnątrz plików .cshtml

@{
    ViewBag.Title = "Index";
    var firstReview = Model.First();
}

Należy jednak pamiętać, by nie umieszczać tam logiki biznesowej ani nadmiarowej ilości kodu. Widok powinien być oddzielony od warstwy zawierającej logikę zgodnie z założeniami wzorca architektonicznego MVC.

Instrukcja warunkowa if

Kod pomiędzy klamrami musi zostać umieszczony w tagach HTML bądź za pomocą specjalnego elementu

@if (Model.Length == 1)
{
    <p>True</p>
}
else
{
    <text>False</text>
}
Pętla foreach

Przykłąd użycia za pomocą składni Razor.

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.City)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Country)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Rating)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}

aby użyć zwykłego tekstu wewnątrz pętli for stosujemy przed nim znacznik @:

@foreach (var item in Model)
{
	@:To jest zwykly tekst
	<div>
		<h4>@item.Name</h4>
		<p>@item.City, @item.Country</p>
	</div>
}
Podwójny znak @@

Jeśli chcemy by znak @ został potraktowany przez perser jako treść, a nie odwołanie do kodu C# wystarczy zastosować podwójny znak @.

@@Test // @Test
Zakończenie

Razor to połączenie prostoty i czytelności, ułatwia on tworzenie widoków. Niewątpliwym atutem jest wsparcie w postaci Intelliscense oferowane przez Visual Studio.

Zaprezentowana została tu jedynie część możliwości składni Razor, głodnych wiedzy odsyłam do dokumentacji technicznej. Dziękuję za dotarcie do tego miejsca i zapraszam do dyskusji w komentarzach.

Wojtek