Vánoční nadílka Vánoční nadílka
Vánoční akce! Daruj lepší budoucnost blízkým nebo sobě. Až +50 % zdarma na dárkové poukazy. Více informací
Avatar
pavlass2
Člen
Avatar
pavlass2:13. listopadu 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. listopadu 17:59
Avatar
Filip Němeček
Redaktor
Avatar
Filip Němeček:13. listopadu 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. listopadu 18:43
Avatar
pavlass2
Člen
Avatar
Odpovídá na Filip Němeček
pavlass2:17. listopadu 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. listopadu 23:20
Avatar
Filip Němeček
Redaktor
Avatar
Odpovídá na pavlass2
Filip Němeček:18. listopadu 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. listopadu 12:47
Avatar
pavlass2
Člen
Avatar
pavlass2:1. prosince 11:34

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

 
Nahoru Odpovědět  +1 1. prosince 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.