FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:

Diskuze: .net core web app - klik na button bez reloadování

V předchozím kvízu, Test znalostí C# .NET online, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Pavel Skála
Člen
Avatar
Pavel Skála:13.11.2018 17:59

Nazdárek všeci,
pustil jsem se už před nějakou dobou do eshopu v .net core. Jen v rámci výuky, abych měl na čem pracovat, zkoušet a učit se. Mám to propojené s databází, mám tam uživatelské účty, mám tam přidávání a editaci itemů adminem, a teď jsem se pustil do přidávání itemů do košíku a trochu jsem si zavařil, protože jsem zaseklý a nevím jak dál. Berte prosim v potaz, že se programovat učím a C# je můj první jazyk, takže je možné, že přehlížím nějaké očividné řešení.
Nechci po vás hotové řešení mého problému, stačí mě trochu nasměrovat. Díky :-)

Chci docílit: Chci, aby uživatel u libovolného itemu mohl klepnout na button "Add to cart" a web by na to zareagoval tak, že by se mu zobrazil v košíku, řekněme vpravo nahoře u jeho uživatelského jména. Ty detaily asi nejsou důležité, co je důležité je, že to chci udělat bez reloadování stránky. Už jsem přičuchnul k JavaScriptu, tak vím, že pomocí něho je celkem jednoduché zareagovat na stisk buttonu bez reloadování stránky, ale jak to udělat, aby zároveň s tím dostal vědět server, že uživatel kliknul na button a opravdu mu ten item přidal do košíku? Idéální by asi bylo, kdyby mohl server nějak reagovat na kliknutí na button (bez reloadování), přidal item do košíku a dal vědět JavaScriptu, že uživatel má v košíku nový item, který by ho pak už jen zobrazil.

 
Odpovědět
13.11.2018 17:59
Avatar
Filip Němeček
Tvůrce
Avatar
Filip Němeček:13.11.2018 18:43

Ahoj, JavaScriptu se nevyhneš. Rovnou bych doporučil rozšířenou knihovnu jQuery, která je na tyto běžné věci mnohem přátelštější.

Pokud to máš přes formulář, tak koukni sem: "https://api.jqu­ery.com/submit/ ":https://api.jquery.com/submit/

Ty vlastně přes tento submit zavoláš úplně stejný view jako při klasickém kliknutí, ale důležitá metoda

preventDefault()

zajistí, že se nebude reloadovat celá stránka.

Z tvého .net backendu si potom jako výsledek pošleš libovolná data a pomocí těch třeba upravíš vizuální podobu košíku.

 
Nahoru Odpovědět
13.11.2018 18:43
Avatar
Pavel Skála
Člen
Avatar
Odpovídá na Filip Němeček
Pavel Skála:17.11.2018 23:20

V tvém podání to zní tak jednodušše, ale já se s tím strašně peru:
První fuška pro mě bylo vůbec přimět JavaScript něco dělat, pak reagovat na klepnutí na submit... no nicméně teď už tuhle část mám a ušpěšně dokážu reagovat na submit bez reloadu.
Takže co teď potřebuju dál, je z toho JavaScriptu zavolat .net metodu pro přidání Itemu do kušíku. Provedl jsem menší výzkum a můj momentální dojem je, že pokud opravdu nechci reloadovat stránku, ale zároveň budu chtít odeslat data na server, nebude mi stačit JavaScript, ale budu potřebovat AJAX. Kdybych se mýlil a přes AJAX by to bylo zbytečně komplikované (případně zastaralé, některé tutoriály, co jsem našel jsou z roku 2008), tak mě případně oprav, nicméně v tuhle chvíli si o téhle technologii jdu zjišťovat víc. To co teď potřebuji snad nebude zas až tak složité a budou mi stačit nějaké základy.
Jo a samozřejmě děkuju za nasměrování. Po delší době jsem s tím konečně aspoň trochu pohnul :)

 
Nahoru Odpovědět
17.11.2018 23:20
Avatar
Filip Němeček
Tvůrce
Avatar
Odpovídá na Pavel Skála
Filip Němeček:18.11.2018 12:47

Aha, já nevěděl, jak moc/málo mám radit...

Samotný AJAX neřeš, to je pouze označení pro asynchronní JavaScript věci. Tedy to, co se přes JS dělá běžně. Níže příklad kódu z jedné mé webové appky, kde přes AJAX mažu data a předtím se ptám přes modal dialog, jestli opravdu smazat.:

$('form#modal-delete-confirm-form').submit(function (e) {
       e.preventDefault();

       var form = $(this);
       let url = form.attr('action');

       $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(),
           success: function (data) {
               console.log(data);


               $('#delete-confirmation').modal('hide');
           }
       });
   });

Tímto vlasně jQuery řeknu, aby reagovalo, když je formulář submittnutý na server, což znamená že uživatel stiskl Submit tlačítko. preventDefault zakáže tradiční reload stránky. Pomocí jQuery získám data z formuláře a taky url adresu, na kterou to budu posílat. To je .net metoda v tvém případě, kam se to pošle při tradičním reloadnutí stránky (to jsme teď zakázali přes preventDefault).

Success parametr je potom metoda, co se vykoná, když se to celé povede. Tady data loguju do konzole. Je to klasický JSON, který si posílám z webové appky, takže podle toho bys přes jQuery upravil obsah košíku uživateli a to je celé :-)

Lepší takto? ;-)

Akceptované řešení
+20 Zkušeností
Řešení problému
 
Nahoru Odpovědět
18.11.2018 12:47
Avatar
Pavel Skála
Člen
Avatar
Pavel Skála:1.12.2018 11:34

Zpětně ještě jedno děkuji, takhle mi to funguje pěkně :)

 
Nahoru Odpovědět
1.12.2018 11:34
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.