Modul 8 - Lekcija 1
Asinkrone forme, AJAX zahtjevi i dinamičko osvježavanje stranica
⏱️ Trajanje: ~3 časa | 📚 Nivo: Srednji | 🎯 Praktični primjeri: 5
AJAX (Asynchronous JavaScript and XML) označava spospobnost portala da preko sekundarnih mrežnih linija pozove server samo sa malim dijelom stranice, te refresha samo određeni prozor u web pregledniku bez trzaja i obaranja cijelog sajta na sekund!
Zamislite pretragu od 5.000 javnih ustanova. Bez AJAXA padala bi cijela stranica dok AJAX za svako kucano slovo elegantno vrti samo listu naziva na samom listanju umjesto cijelog Layouta!
Aplikacija ASP.NET MVC donosi koncept "Unobtrusive" ("Nenametljiv") AJAX. Nema potrebe za predugačkim JQuery skriptama, MVC kroz svoje Data tagove rješava presretanje submitta klikova!
Za funkcionalan domet ovoga na view strani potrebno je instalirati mali skočni NuGet paket
Microsoft.jQuery.Unobtrusive.Ajax
te u Layout Importovati skriptu jquery.unobtrusive-ajax.min.js.
@* AJAX BEGIN FORM umjesto HTML BEGIN FORM *@
@using (Ajax.BeginForm("Pretraga", "OrganiUprave",
new AjaxOptions
{
UpdateTargetId = "divPrikazMete", // U ovu div kantu poistuje Result html
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace, // Naredba da ZAMIJENI a Ne Dodaje Html na rep
LoadingElementId = "loadingIKonicaLogo" // Ovo se pojavi sve dok odgovor ne sleti nazad
}))
{
@Html.TextBox("pojamZaPretragu", null)
<button type="submit">Pretraži</button>
}
<div id="loadingIKonicaLogo" style="display:none;"> ⏳ Učitavanje baze podataka... </div>
<!-- OVDJE "SLETI" ODGOVOR -->
<div id="divPrikazMete"></div>
Kontroler zadužen za primanje ovog iznenadnog Ajaxa NE SMIJE vratiti potpuni HTML ekran. On bi
poduplao Menu!
Vrati se isključivo ogoljena tabela odnosno PartialView klasa!
public class OrganiUpraveController : Controller
{
[HttpGet]
public ActionResult Pretraga(string pojamZaPretragu)
{
// 1. Spavanje cisto da pokazemo loading spinner mada je prebrzo (:
System.Threading.Thread.Sleep(500);
var rezultatiObjekata = db.Ustanove
.Where(d => d.Naziv.Contains(pojamZaPretragu))
.ToList();
// 2. VRACA PARCIONU MASKU SA UBACENIM OBJEKTIMA, NE CEO EKRAN!!!
return PartialView("_TabelaPojmovaPartial", rezultatiObjekata);
}
}
Kada Unobtrusive Ajax.BeginForm ne odgovara specifičnim zahtjevima formulara (recimo
validacija na polju nakon klika "Blur"-a bez klika Submit). Moramo PISATI direktni jQuery $.ajax:
$(document).ready(function() {
$('#JMBG').on('blur', function() {
var prekopiranIspi = $(this).val();
if (prekopiranIspi.length === 13) {
$.ajax({
url: '/Uposlenik/ProvjeraJMBG', // Api EndPoint
type: 'POST',
dataType: 'json', // JSON Kominikacija bez vracanja maski!
data: { ucitaniJmbg: prekopiranIspi },
success: function(dogovorNiz) {
if (dogovorNiz.zauzetToJesteOvajJMBGVector) {
$('#UpozorenjaBox').text('Već postoji JMBG!');
$('#btnKreiraj').prop('disabled', true); // Onemogući Spasavanje!
} else {
$('#btnKreiraj').prop('disabled', false); // Dozvoli
}
}
});
}
});
});
Za gornji Custom primjer direktnog JS Poziva mi necemo vracati ni Parcijalne Ekrančiće. Samo čiste Gole Podatke (JSON formatirane)!
[HttpPost]
public JsonResult ProvjeraJMBG(string ucitaniJmbg)
{
var metaObjekat = db.Zaposleni.FirstOrDefault(e => e.JMBG == ucitaniJmbg);
if (metaObjekat != null)
{
// Vraca "Dinamički Anonimni Array" (True - da postvoji takav) (Json() je MVC komanda za konvert)
return Json(new { zauzetToJesteOvajJMBGVector = true });
}
return Json(new { zauzetToJesteOvajJMBGVector = false });
}