Prikazivanje Validacijskih Poruka

Modul 6 - Lekcija 2

ModelState Rječnik, Client vs Server validacija i jQuery Unobtrusive

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

📖 Šta je ModelState Rječnik?

ModelState je ugrađeni ASP.NET MVC rječnik (Dictionary objekt) koji ima dvije ključne uloge dok podaci prelaze iz Preglednika na Server:

  1. Sadrži sve vrijednosti poslane sa forme natrag u Controlera kako bi "Upamtio" unos prilikom eventualno neuspješnog popunjavanja formulara i napunio TextBoxove vrijednostima umjesto da ostanu prazni po padu.
  2. Sadrži strukturu Generisanih Grešaka (Errors) za pojedinačno slomljeno Entity/ViewModel Polje!

⚙️ Kako Controller koristi ModelState?

MVC će kod pokretanja akcije prvenstveno testirati je li pristigla klasa u skladu s DataAnnotations i postaviti varijablu validnosti na false ako jedno padne. 

[HttpPost]
public ActionResult KreirajRjesenje(RjesenjeVM model)
{
    // SERVER-BAZIRANA Validacija (Provjera protiv Baze - JMBG uniq)
    if (db.Zaposleni.Any(z => z.JMBG == model.JMBG))
    {
        // Ručno poticanje specifične greške prema tačnom Polju na formi!
        ModelState.AddModelError("JMBG", "Ovaj JMBG već postoji u bazi!");
    }

    // IsValid provjerava DataAnnotations ali i ručno dodane Greške od gore!
    if (ModelState.IsValid)
    {
        // Spasi u bazu operaciju...
        return RedirectToAction("Index");
    }

    // VRATITI KORISNIKA NA FORMULAR JER SU PODACI NEUVAŽENI
    // Zbog prosljeđivanja ISTOG `modela`, View će znati prikazati upisano!
    return View(model); 
}

⚖️ Klijentska vs Serverska Validacija

Zlatno Pravilo

Klijentsku provjeru kroz JavaScript pišemo isključivo zbog modernog UX OSJEĆAJA i brzine unosa. Serverska Data validacija ostaje glavni sigurni branik cijelog IT Projekta jer se JS isključuje na klik!

Klijentska Validacija (Browser) Serverska Validacija (ASP.NET)
Trenutno brza reakcija, JS ne traži relokaciju. HTTP Zahtjev i mrežni delay je zagarantovan.
Sprječava opterećenje IIS Server instanci. Ima kapacitet komunicirati s API-em i bazom.
Nesigurno! Bot / API Poziv to zaobilazi glatko. Apsolutna Integritetska Zaštita baze na snazi!

🛠️ jQuery Unobtrusive JavaScript (Magija klijenta)

ASP.NET MVC ne upisuje vlastiti kodirani JavaScript kod. On umjesto toga ubacuje standardne HTML5 data-val-* parametre unutar Input Tagova koristeći vaše DataAnnotations klase! 


@Html.TextBoxFor(m => m.JMBG)


<input type="text" 
       name="JMBG" 
       id="JMBG" 
       data-val="true" 
       data-val-required="JMBG polje je uslov obaveznog unosa!"
       data-val-regex="JMBG mora imati tačno 13 cifara"
       data-val-regex-pattern="^\d{13}$">

Mala jquery.validate.unobtrusive.min.js biblioteka naknadno skenira te tagove i izvodi željeni JS Blocked form submission na crveno!

✅ Validation HTML Helperi

MVC ima ugrađene helpere za crtanje Crvenih Tekstova ukoliko ModelState ispravnost ima grešku na polju! 

@* 1) ValidationMessageFor - Povezan direktno ispod konkretnog polja, reagira *Samo* na njega! *@
<div class="form-group">
    @Html.LabelFor(m => m.DepartmentCode)
    @Html.TextBoxFor(m => m.DepartmentCode, new { @class = "form-control" })
    
    @* Prikazuje se isključivo sa padom i farba Tekst u ugradjeni Bootstrap Danger klasi *@
    @Html.ValidationMessageFor(m => m.DepartmentCode, "", new { @class = "text-danger" })
</div>



@* 2) ValidationSummary - Služi kao "Glavi Panel Upozorenja" Na Vrhu forme (Sumarno sve greške)*@
@* TRUE - znači da ispisuje Opcionalne greške (One koje nemaju ključ) *@
@* FALSE - znači da rekapitulira po redu listu SVIH propusta sa forme! *@
@Html.ValidationSummary(false, "Sistemska Greška:", new { @class = "alert alert-danger" })

✅ Zaključak

  • ✅ ModelState rječnik drži i proslijeđuje podatke i detektovane devijacije između Front i Backenda! On omogućava da korisnik ne mora prepisivati formu redovno poslije validacijskog server pada.
  • ✅ Mi programiramo jedinstvenu DataAnnotations Klasu, a MVC uz Unobtrusive JavaScript automatski kreira paralelnu JavaScript logiku bez naše ruke koristeći inovativne HTML Data elemente.
  • ✅ Ne zaboravite iskoristiti ValidationMessageFor pored važnih Form polja zbog interaktivnosti.
🏠 Home
1 / 7