Napredni HTML Helpers i Partial Views

Modul 4 - Lekcija 2

Partial Views, Child Actions i napredni HTML Helpers

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

📖 Partial Views (Djelomični Pogledi)

Partial Views su fragmenti korisničkog interfejsa dizajnirani za ponovnu upotrebu na više različitih stranica (reusability).

Ako razvijete složenu formu za unos podataka o korisniku u _CustomerForm.cshtml, možete njome pored standardne stranice za edit popunjavati i razne druge Popup i Modal ekrane.

Kreiranje Partial View-a

@* Views/Shared/_MinistryCard.cshtml *@
@model JavnaUprava.Models.Department

<div class="ministry-card">
    <h3>@Model.DepartmentName (@Model.DepartmentCode)</h3>
    <p>Budžet: @Model.Budget.ToString("C")</p>
    <p>Broj zaposlenih: @Model.Employees.Count</p>
</div>

⚡ Renderovanje Partial View-a (Mehanizmi iscrtavanja)

Kako iskoristiti gore kreiran view iz Glavnog view-a u Listi?

Html.Partial vs. Html.RenderPartial

  • Html.Partial("_Naziv"): Kompajlira View, pretvara ga HTML element, kešira i ubacuje nazad u View.
  • Html.RenderPartial("_Naziv"): Lakši i Znatno Brži! Upisuje HTML tagove direktno u HTTP Response bez zadržavanja memorije za C# operacije.
@* KLASIČNA SINTAKSA - Lakša za pisanje: *@
@foreach (var dept in Model)
{
    @Html.Partial("_MinistryCard", dept)
}

@* BRZA SINTAKSA - Za velike tabele: *@
@foreach (var dept in Model)
{
    // Budući da metoda ne vraća string (void type), ne pišemo je uz @ znak!
    Html.RenderPartial("_MinistryCard", dept); 
}

🎯 Child Actions (Pod-akcije, Widgeti)

Dok su Partial Views samo gluhe komponente čiji je posao da vizualizuju poslanu listu/objekat, Child Actions dozvoljavaju da "komponenta" ima sopstvenu poslovnu logiku koja dobavlja podatke iz baze!

Ovi se mehanizmi koriste za "widgete": Sidebar Meni Kategorija u Shopovima, Prikaz posljednjih 5 Vijesti na desnoj margini, ili pregled Korpe proizvoda.

MVC Child Actions

🔒 Osiguravanje Child Akcija i Implementacija

Sigurnosni Aspekt: [ChildActionOnly]

Korisnici bi mogli pokušati da ukucaju www.../Kategorija/Meni i time učitaju na cijeli ekran samo onaj komad HTML isječka predviđenog za lijevu stranu. Da to spriječimo i učinimo rutu dozvoljenom isključivo unutar MVC infrastrukture koristimo naznačeni parametar. 

// --- CONTROLLER ---
[ChildActionOnly]
public ActionResult SidebarMenu()
{
    // Komponenta sama pristupa Bazi Podataka i vadi potrebne izvore!
    var departments = db.Departments.ToList();
    return PartialView("_SidebarMenu", departments);
}

// --- GLAVNI VIEW (Ili Master _Layout stranica) ---
<div class="left-sidebar">
    @* Ovdje automatski pokrećemo drugu logiku koja kreira svoje nezavisno drvo *@
    @Html.Action("SidebarMenu", "Common")
</div>

🛠️ Napredni Helpers: DisplayFor i EditorFor

Mijenjamo ponašanje sa TextBoxFor rješenjem na EditorFor jer je inteligentnije i samo prepoznaje DataType iz klase te nam generira TextBox za klasnične atribute, TextBox(passwordType) ispod haube, DateTime picker za propery DatumRodjenja... itd. 

@* DisplayFor - Formatira Label-u i read-only ispis za Detail poglede *@
@Html.DisplayFor(m => m.DepartmentName)
@Html.DisplayFor(m => m.Budget)

@* EditorFor - Gradi aktivne INPUT komponente *@
@Html.EditorFor(m => m.DepartmentName)
@* Zavisno od tipa generisaće  <input type="text">, ili <input type="date"> *@
@Html.EditorFor(m => m.FoundedDate)

🛠️ Napredni Helpers: Validacija iz Modela

Ako ste u klasi Entity Model objavili Annotations (Data Annotations poput [Required] sa custom porukom o grešci), Razor pomoću Validation helpers-a ispisuje te textove bez da IF-ujete greške. 

<div class="form-group">
    @Html.LabelFor(m => m.Email)
    @Html.TextBoxFor(m => m.Email)
    
    @* Ako EMAIL nije poslan ka serveru, i ModelState padne na serveru... *@
    @* Ispod inputa generiraće se Labela "Unos email adrese je obavezan!" *@
    
    @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
</div>

🛠️ Custom HTML Helper Extenzije

U velikim poslovnim sistemima nerijetko C# developeri i tim inžinjera sami grade svoje Helpers funkcije (Umjesto Html.BeginForm, kreiraju neku Html.GridBoxUprava funkciju!). 

// Helper mora biti objavljen kao Statička Klasa i Extenzija HtmlHelper klase!
public static class StatusHelper
{
    public static MvcHtmlString LabelZaposlen(this HtmlHelper helper, bool isActive)
    {
        var tag = new TagBuilder("span");
        tag.AddCssClass(isActive ? "label label-success" : "label label-danger");
        tag.SetInnerText(isActive ? "Zaposleni Aktivan" : "Ugašen / Penzija");
        
        return new MvcHtmlString(tag.ToString());
    }
}
@* Gornju extenziju direktno koristite kroz "@Html..." na Vašem portalu : *@
@Html.LabelZaposlen(item.IsActive)

✅ Zaključak

  • ✅ Partial Views olakšavaju kod, smanjujući ponavljanje komponenti u viewovima, jer se kartice/tabele dizanjiraju u posebnim View fajlovima.
  • ✅ Metoda RenderPartial se izvršava bez kreiranja i gomilanja privremenih String Objeata u memoriji, čineći aplikaciju osjetno bržom.
  • ✅ Child Actions dozvoljavaju da "komponenta" (Partial View widget na strani) može samostalno raditi "hit" na bazu i na backend kroz Controller.
  • ✅ Napredni EditorFor helperi su pametna klasa za automatsku realizaciju specifičnih input komponenta bazirano na podatkovnom tipu!
🏠 Home
1 / 9