Razor Sintaksa i Layout Stranice

Modul 4 - Lekcija 1

Osnove Razor sintakse, Layout stranice i HTML Helpers

⏱️ Trajanje: ~3 časa | 📚 Nivo: Srednji | 🎯 Praktični primjeri: 4

📖 Šta je Razor?

Razor je napredni view engine ugrađen u ASP.NET MVC koji omogućava glatko i elegantno kombinovanje HTML markup-a sa serverskim C# kodom.

Prelazak između HTML-a i C# koda dešava se gotovo neprimjetno pomoću @ simbola. Posebno je koristan u kompleksnim portalima jer omogućava Type Safety kompajlerske provjere za prikazne stranice.

🔑 Prednosti

  • Kompajliranje u memoriji: JIT kompajliran kao C# klasa za brže naknadno učitavanje.
  • Čista sintaksa: Eliminaciju nezgrapnih <% %> web forms oznaka.
  • IntelliSense podrška: Visual Studio autocomplete tokom kucanja.
  • XSS Zaštita: Automatsko HTML enkodiranje promjenjivih (zastita od script napada).

⚙️ Životni ciklus renderovanja Razor stranice

Kada korisnik prvi put pristupi stranici, desi se mali "delay" dok server generiše i kompajlira novu C# klasu na bazi .cshtml falja.

Ova klasa nasljeđuje jezgrenu WebViewPage klasu. Naknadni pozivi su trenutni jer se kod izvršava direktno iz memorijske relacije.

1. .cshtml fajl 2. C# Klasa 3. Kompajliranje 4. HTML

🔤 Osnovna @ Sintaksa (Inline)

Koristi se za evaluaciju i ispis vrijednosti ili poziv metode direktno na mjesto na kojem se nalazi. Nema potrebe za ručnim zatvaranjem tagova. 

@* Prikazivanje obične vrijednosti preko ViewBag-a *@
<p>Nadležno ministarstvo: <strong>@ViewBag.MinistryName</strong></p>

@* Izračunavanje budžeta sa ugrađenim automatskim množenjem (koristite zagrade) *@
<p>Ukupan trošak (sa porezom): <strong>@(item.Budget * 1.17) KM</strong></p>

@* Pristup globalnim .NET objektima poput DateTime *@
<p>Datum generisanja izvještaja: <strong>@DateTime.Now.ToString("dd.MM.yyyy HH:mm")</strong></p>

🔤 Višelinijski @{ } Blokovi

Kada trebate napisati složeniju logiku koja ne vraća izlaz na stranici (deklariranje varijabli), koristite kodni blok. 

@{
    /* Ovaj kod se izvršava na serveru i NE ispisuje ništa direktno korisniku */
    string porukaSemafora = "Sistem za upravljanje ljudskim resursima";
    
    // Obračun dnevnica za sluzbeni put
    int brojDana = 5;
    decimal dnevnicaIznos = 50.0m;
    decimal ukupnoZaIsplatu = brojDana * dnevnicaIznos;
    
    // Provjera nivoa pristupa
    bool jeAdministrator = User.IsInRole("Admin");
}
<div class="info-panel">
    <h4>@porukaSemafora</h4>
    <p>Naknada za isplatu iz budžeta: @ukupnoZaIsplatu.ToString("C")</p>
</div>

🔀 Kontrolne Strukture: Uslovi (@if)

Razor razumije C# logiku za uslove (if, else). Automatski će preći ponovno u HTML "isporuku" cim naide na HTML Tag element unutra. 

@* IF-ELSE za uslovni prikaz podataka zavisno od uloge korisnika *@
@if (User.Identity.IsAuthenticated)
{
    <div class="alert alert-success">
        Uspješno ste prijavljeni kao operater: <strong>@User.Identity.Name</strong>
    </div>
}
else
{
    <div class="alert alert-warning">
        Neregistrovani korisnici (korisnici) mogu vidjeti samo javne dokumente ministarstava.
    </div>
}

🔄 Kontrolne Strukture: Petlje (@foreach, @for)

Ovo su najviše korištene linije za iscrtavanje dugih izvještaja, gridova sa radnicima ili iscrtavanje dropdown menija 

@* FOREACH petlja je ključna za rendering listi i tabela iz baze *@
<table class="table">
    <tbody>
    @foreach (var emp in Model.Employees)
    {
        <tr>
            <td>@emp.FirstName @emp.LastName</td>
            <td>
                @if(emp.IsActive) { <span class="badge">Aktivan</span> }
            </td>
        </tr>
    }
    </tbody>
</table>

@* FOR petlja - Iscrtava 5 godina za Filter pretragu unazad *@
<select name="Year">
@for (int year = 2020; year <= DateTime.Now.Year; year++)
{
    <option value="@year">Budžetska godina: @year</option>
}
</select>

📐 Template: Layout Stranice (Master)

Layout stranice (_Layout.cshtml) drže centralni kostur HTML file-a, uključujući HTML zaglavlja, učitavanje JS i CSS fileova, te podnožje (footer).

Tako da kada promijenite Logo grba institucije u _Layoutu, mijenja se momentalno na 200 podstranica portala.

@* Views/Shared/_Layout.cshtml *@
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - e-Uprava</title>
    @Styles.Render("~/Content/css")
</head>
<body>
    <nav>
        @Html.ActionLink("Početna", "Index", "Home")
    </nav>

    <div class="container body-content">
        
        @RenderBody() 
        
    </div>

    @Scripts.Render("~/bundles/jquery")
</body>
</html>

🛠️ HTML Helpers: Forme i Linkovi

HTML Helpers su extenzijske C# metode koje primaju klasu (Model) i sigurno prevode njene atribute u savršeno sintaksirani i validirani standardni HTML kod (form tagove). 

@* KREIRA A HREF LINK -> Npr. /Employees/Create *@
@Html.ActionLink("Novi Zaposlenik", "Create", "Employees", null, new { @class = "btn" })

@* FORM OPENING: Stvara <form action="..." method="POST">  *@
@using (Html.BeginForm("Create", "Ministry", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    
    <div class="form-group">
        @Html.LabelFor(m => m.DepartmentName)
        @* Stvara <input type="text" name="DepartmentName" value=""> *@
        @Html.TextBoxFor(m => m.DepartmentName, new { @class = "form-control" })
    </div>
    
    <button type="submit">Sačuvaj</button>
}

✅ Zaključak

  • ✅ Razor spaja serversko izračunavanje vrijednosti sa brzim iscrtavanjem HTML elemenata držeći C# sintaksu prepoznatljivom.
  • ✅ Izbjegavanje grešaka je lako jer parser prevodi .cshtml u .cs klasu prije kompajliranja dll-a.
  • ✅ Layout stranice rješavaju dupliranje sadržaja. Svaka stranica navede ko joj je Layout, a roditeljski _layout na lokaciji poziva komandu @RenderBody().
  • ✅ HTML Helpers (ActionLink, TextBoxFor, BeginForm) ubrzavaju izgradnju UI komponenata i povezuju atribute C# klasa sa finalnim `name=""` value u HTML generisanom prozoru.

📚 Sljedeća Lekcija

U lekciji 4.2 idemo u naprednije elemente Layout dizajniranja - Partijalni pogledi za kreiranje Widgets (Poput sidebara).

🏠 Home
1 / 10