Form Beitrag, aber laden Sie nicht die Seite

Question

Ich bin in diesem stecken wie ich noch nie zuvor.

Meine Situation: Ich mache einen Einkaufswagen. Wenn der Benutzer auf die Schaltfläche "Hinzufügen" klickt, wird das Formular und auf der Serverseite, d. H. Innerhalb von if (IsPost) {....}, das entsprechende Element in der Warenkorb-Tabelle in meiner Datenbank hinzugefügt.

Alles ist in Ordnung, außer es lädt die Seite neu und scrollt zurück nach oben. Mit ein wenig Recherche habe ich erfahren, dass Ajax vielleicht helfen könnte. Dann habe ich eine neue .cshtml-Seite add-to-cart.cshtnl erstellt. Jetzt wird meine aktuelle Seite nicht neu geladen, aber es öffnet sich "add-to-cart.cshtml", was nicht so ist, wie ich es wollte. Jetzt habe ich sogar versucht AJAX zu lernen und versuche Dinge zu tun, die Beispiele betrachten. Nichts hilft. Bitte helfen Sie!

So sieht mein Code aus: P.S Ich benutze Rasierer in der Webmatrix.

<form method="post" id="productForm" action="~/add-to-cart.cshtml"> 
<input ............"Input Something.............../> 
<button type="submit" id="add-button" >ADD</button> 
</form> 

Bei meiner add-to-cart.cshtml habe ich nichts auf der Benutzeroberfläche. Es verarbeitet nur Daten. Ich möchte nicht, dass diese Seite jemals geladen wird. Es sieht ungefähr so ​​aus:

ifIsPost(){ 
............ADD item to the cart table of database.............. 
} 

Jetzt bin ich davon überzeugt, AJAX ist meine Lösung aber wie ???? Bitte geben Sie mir keine unvollständigen Antworten. Ich habe bereits 3 Tage verschwendet:/

Answer 1

Versuchen Sie, diese

$('#productForm').submit(function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     data : $(this).serialize(), 
     success : function(response) { 
      //write your code here 
     }, 
     error : fucntion(response) { 
      //write your code here 
     } 
    }); 
}); 

dieses Skript setzen in <script> Tag.

Hinweis: Vergessen Sie nicht, jquery in Ihre Seite aufzunehmen.

Answer 2

Dies ist die komplette Arbeitslösung:

$(function() { 
      $('#productForm').submit(function (ev) { 
       var frm = $(this);  
       $.ajax({ 
        type: frm.attr('method'), 
        url: frm.attr('action'), 
        data: frm.serialize(), 
        success: function (data) { 
         //Do What Ever You Wanna Do 
        } 
       }); 
       ev.preventDefault(); 
      }); 
     });