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属性并添加一个action属性（或使用MVC方法：使用Html.BeginForm），将一个class属性添加到表单标记。
删除Totalprice字段，您应该始终计算此服务器端，您需要提交的唯一字段是产品代码（和数量）。
删除javascript按钮并将其替换为经典提交按钮。

当您想要表单时，请尝试以下内容：

$(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
 });
});

在电子商务购物车中使用$（“form”）。serialize（）

1 个答案: