電子商取引ショッピングカートで$（ "form"）serialize（）を使用

Question

私は電子商取引アプリケーションのショッピングカートで作業しています。私は、製品のリストとその複数のカテゴリーの価格を表示する価格設定ページを持っています。ユーザーは複数の商品をショッピングカートに追加することができます（アクティブなショッピングカートはページの右側に表示されています）。カートにアイテムを追加するためにAjax/jQueryを使用しようとしています。私は私の機能とコントローラに渡したい複数の隠しフィールドを含む各製品の周りに包まれたフォームを持っています。あなたは以下のコードでこれらすべてを見ることができます：私は、ページ上の複数のフォームを持っているので

<% foreach (var _category in Model) { %> 
    <% foreach (var _product in _category.Products) 
     { %> 
     <tr> 
      <td align="left" valign="top"><% = _product.Description %> (<% = _product.Code %>)</td> 
      <td valign="top" align="center">$<% = _product.TotalPrice %></td> 
      <td align="left"> 
       <form id="frmProduct_<%=_product.Code%>"> 
        <input type="button" onclick="JavaScript:addProductToBasket(this.form);" value="+ Add to cart" /> 
        <input type="text" id="hProductCode" value="<% = _product.Code %>" /> 
        <input type="text" id="Text1" value="<% = _product.TotalPrice %>" /> 
        <!--Other hidden fields for passing data --> 
       </form> 
      </td> 
     </tr> 
    <% } %>  
<% } %>  

、私は私のjavascript関数の内部で特定のフォームにアクセスして苦労しています。このシナリオを処理する最良の方法は何ですか？

<script type="text/javascript"> 
    function addProductToBasket(_form) { 
     alert('Hi'); 
     var str = $('#_form').serialize(); 
     alert(str); 
    } 
</script> 

私はASP.NET MVC 2.0を使用していますが、現時点ではMVC 3.0に移行できません。

Answer 1

は、フォームが最初にJavaScriptを使用しなくても操作できるようにしてください。次に、すべてのajaxとjQueryのことについて考え始めます。

• フォームからid属性を削除し、アクション属性を追加します（またはMVCメソッドを使用します：Html.BeginFormを使用）。フォームタグにクラス属性を追加します。
• Totalpriceフィールドを削除し、あなたは常にこのサーバー側を計算する必要があります、あなたが提出する必要がある唯一のフィールドは製品コード（および数量）です。
• javascriptボタンを削除し、従来の送信ボタンに置​​き換えます。

フォームをajaxifyしたい場合は、このような何かしてみてください：

$(function() { 
$(".addproductform").submit(function() { // turn all forms with the addproductform class into an ajax version 
    $.post($(this).attr("action"), $(this).serialize(), function (data) { 
    // data contains the confirmation or failure that the product was added to your cart, update the cart html on this page 
    }); 

    return false; // form already submitted using ajax, don't submit it again the regular way 
}); 
});