4.1 Razor Sintaksa i Layout Stranice

📖 Š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. Za razliku od starijih tehnologija (poput ASPX-a), Razor je dizajniran da minimizira "šum" u kodu – prelazak između HTML-a i C# koda dešava se gotovo neprimjetno pomoću @ simbola.

Kada inženjeri u javnoj upravi razvijaju složene portale, Razor osigurava da prezentacijski sloj ostane čist i lak za održavanje. Štaviše, Type Safety (sigurnost tipova) osigurava da se greške u view-ovima otkriju prilikom kompajliranja, prije nego sto dođu do produkcijskog okruženja.

🔑 Arhitektura i Prednosti Razor-a

Kompajliranje u memoriji: .cshtml fajlovi nisu statični HTML. Prilikom prvog zahtjeva, ASP.NET kompajlira Razor view u privremenu C# klasu koja nasljeđuje WebViewPage. Ovaj proces osigurava izuzetne performanse za sve naredne zahtjeve.
Čista sintaksa: Eliminira potrebu za nezgrapnim <% %> tagovima.
IntelliSense podrška: Visual Studio pruža puni IntelliSense za C# kod unutar HTML-a, što drastično smanjuje greške pri unosu i ubrzava razvoj za timove koji održavaju registre i baze podataka.
XSS Zaštita (Cross-Site Scripting): Razor automatski vrši HTML enkripciju (encoding) svih vrijednosti koje se ispisuju pomoću @, što je ključno za sigurnost portala e-Uprave.

Životni ciklus i kompajliranje Razor View-a

Kada korisnik prvi put pristupi stranici, desi se mali "delay" (odgoda) dok server generiše i kompajlira ovu klasu. Naknadni pozivi su trenutni jer se kod izvršava direktno iz keširane memorijske relacije.

🔤 Osnovna Razor Sintaksa

Razor omogućava glatke tranzicije između HTML oznaka i C# koda. Ključ je razumjeti kako Razor određuje šta je tekst, a šta kod.

1. @ Simbol - Inline C# Kod

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

🛠️ Inline C# u e-Upravi

@* Prikazivanje obične vrijednosti preko ViewBag-a *@
Nadležno ministarstvo: @ViewBag.MinistryName

@* Izračunavanje budžeta sa ugrađenim automatskim množenjem (koristite zagrade za složene izraze) *@
Ukupan trošak (sa porezom): @(item.Budget * 1.17) KM

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

@* NAPOMENA: Sve što @ ispiše je automatski HTML-enkodirano! 
   Ovo sprečava unos malicioznih skripti (XSS) u polja.*@

2. @{ } Blokovi - Višelinijski C# Kod

Kada trebate napisati složeniju logiku (inicijalizacija varijabli, složeni proračuni, priprema podataka za view) koja ne vraća izlaz na stranici, koristite kodni blok.

🛠️ Višelinijski blokovi

@{
    /* 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");
}

    @porukaSemafora
    Naknada za isplatu iz budžeta: @ukupnoZaIsplatu.ToString("C")

3. @if, @foreach, @while - Kontrolne Strukture

Razor razumije C# strukture kontrole toka, te inteligentno prelazi nazad na parsiranje HTML-a čim naiđe na redovni HTML tag ili prelazak u tekst.

🛠️ Kontrolne Strukture u praksi

@* IF-ELSE za uslovni prikaz podataka zavisno od uloge korisnika *@
@if (User.Identity.IsAuthenticated)
{
    
        Uspješno ste prijavljeni kao operater: @User.Identity.Name
    
}
else
{
    
        Neregistrovani korisnici (građani) mogu vidjeti samo javne dokumente ministarstava.
    
}

@* FOREACH petlja je ključna za rendering listi i tabela iz baze *@

    @foreach (var emp in Model.Employees)
    {
        
    }
    
    
        
            Ime i Prezime zaposlenog
            JMBG
            Status
        
    
    
            @emp.FirstName @emp.LastName
            @emp.JMBG
            
                @* Ugniježđena logika unutar petlje *@
                @if(emp.IsActive) {
                    Aktivan radni odnos
                } else {
                    Neaktivan / Penzionisan
                }
            
        


@* FOR petlja kreira naprednije dropdown menije *@

Ime i Prezime zaposlenog	JMBG	Status
@emp.FirstName @emp.LastName	@emp.JMBG	@* Ugniježđena logika unutar petlje *@ @if(emp.IsActive) { Aktivan radni odnos } else { Neaktivan / Penzionisan }

4. @model Direktiva

🛠️ Model Direktiva

@* Views/Ministry/Index.cshtml *@
@model IEnumerable<JavnaUprava.Models.Department>

Registar Ministarstava
@foreach (var dept in Model)
{
    @dept.DepartmentName (@dept.DepartmentCode)
}

📐 Layout Stranice (Master Pages)

Layout stranice u MVC-u rješavaju problem ponavljanja zajedničkih elemenata kao što su zaglavlja (headeri), navigacioni meniji, sidebari i fusnote. Dizajnom omogućavaju da se portal e-Uprave uredi na jednom mjestu bez preklapanja na stotine pojedinačnih modula aplikacije.

U složenim sistemima javne uprave imat ćemo jedan centralni _Layout.cshtml u kojem se nalaze CSS i JS reference, te omotač sa zaglavljima. Kada promijenimo logo u layout-u, on se mijenja na cijelom portalu.

Kreiranje Layout Stranice

🛠️ _Layout.cshtml

@* Views/Shared/_Layout.cshtml *@
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - e-Uprava</title>
    @Styles.Render("~/Content/css")
</head>
<body>
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                @Html.ActionLink("e-Uprava Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Početna", "Index", "Home")</li>
                    <li>@Html.ActionLink("Ministarstva", "Index", "Ministry")</li>
                    <li>@Html.ActionLink("Zaposleni", "Index", "Employees")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - Portal Javne Uprave</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
</body>
</html>

Korištenje Layout-a u View-u

🛠️ View sa Layout-om

@* Views/Employee/Index.cshtml *@
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Lista Zaposlenika";
}

<h2>Zaposlenici</h2>
@* Sadržaj view-a *@

_ViewStart.cshtml

_ViewStart.cshtml se automatski izvršava prije svakog view-a i postavlja default layout.

🛠️ _ViewStart.cshtml

@* Views/_ViewStart.cshtml *@
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

🛠️ HTML Helpers - Osnove

HTML Helpers su metode koje generišu HTML markup. Omogućavaju type-safe kreiranje formi i linkova.

1. Html.ActionLink - Kreiranje Linkova

🛠️ ActionLink

@* Osnovni link *@
@Html.ActionLink("Lista Ministarstava", "Index", "Ministry")

@* Link sa CSS klasom *@
@Html.ActionLink("Novi Zaposlenik", "Create", "Employees", null, new { @class = "btn btn-success" })

@* Link sa parametrima *@
@Html.ActionLink("Detalji", "Details", "Ministry", new { id = 5 }, null)

2. Html.BeginForm - Kreiranje Formi

🛠️ BeginForm

@using (Html.BeginForm("Create", "Ministry", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    
    
        @Html.LabelFor(m => m.DepartmentName)
        @Html.TextBoxFor(m => m.DepartmentName, new { @class = "form-control" })
    
    
    
        @Html.LabelFor(m => m.DepartmentCode)
        @Html.TextBoxFor(m => m.DepartmentCode, new { @class = "form-control" })
    
    
    
}

3. Html.TextBoxFor, Html.LabelFor - Form Kontrole

🛠️ Form Helpers

@model JavnaUprava.Models.Employee


    @Html.LabelFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.FirstName)



    @Html.LabelFor(m => m.JMBG)
    @Html.TextBoxFor(m => m.JMBG, new { @class = "form-control", @placeholder = "Unesite 13 cifara" })



    @Html.LabelFor(m => m.DepartmentID)
    @Html.DropDownListFor(m => m.DepartmentID, ViewBag.Departments as SelectList, "Odaberite ministarstvo", new { @class = "form-control" })

🎯 Praktična Vježba

Zadatak: Kreirajte e-Uprava Layout

Kreirajte _PublicLayout.cshtml sa navigacijom za građane i koristite ga u Public/Index.cshtml.

💡 Rješenje

@* Views/Shared/_PublicLayout.cshtml *@
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - Građanski Portal</title>
</head>
<body>
    <header>
        <h1>Dobrodošli na portal e-Uprava</h1>
        <nav>
            <a href="/">Početna</a>
            <a href="/Services">Usluge</a>
            <a href="/Contact">Kontakt</a>
        </nav>
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        <p>Kontakt telefon: 123-456</p>
    </footer>
</body>
</html>

✅ Zaključak

Naučili ste:

✅ Osnovnu Razor sintaksu (@, @{}, @if, @foreach)
✅ Kako kreirati i koristiti Layout stranice
✅ Osnovne HTML Helpers (ActionLink, BeginForm, TextBoxFor)

← Prethodni Modul Sljedeća Lekcija →