Question

我正在使用asp.net mvc开发购物车。我已经完成了购物车的完整功能，用户可以通过文本框删除产品或更新数量。但我不喜欢我在购物车中每个产品右侧有2个额外链接的部分（更新数量和删除产品）。我很好删除产品链接因为删除每个产品的链接是有意义的。现在我想只有一个名为保存更改的按钮或链接。单击该按钮/链接，我想从每个数量文本框中收集值，将其传递给控制器并执行需要完成的操作并从控制器返回为json对象。问题是我到目前为止仅使用ajax几天，并且不知道如何在我的视图中从文本框迭代/收集值并将它们发送到控制器。

这就是我购物车的样子。

这是我的观点

@model OnlineShop.ViewModels.ShopingCartViewModel
....
<p class="button">
    @Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout")
</p>

    <table class="table-bordered">
    <tr>
        headers
    </tr>

    @for (int i = 0; i < Model.CartItems.Count; i++)
    {


        <tr id="row-@Model.CartItems[i].RecordID">
            <td>
                <img src="@Url.Content(Model.CartItems[i].Product.ProductImg)" class="img-responsive" style="width:60px;height:60px;padding:5px;"/>
            </td>
            @*need to be done later*@ 
            <td>

                @Html.ActionLink(Model.CartItems[i].Product.ProductName, "Details", "Store", new{id =Model.CartItems[i].ProductID}, null) 
            </td>
            <td>
                @Model.CartItems[i].Product.ProductPrice
            </td>
            <td>
                @Html.TextBoxFor(model=>model.CartItems[i].CartCount,new { style="width:60px;text-align:center;"})
            </td>
            <td>
                <a href="#" class="UpdateLink" data-id="@Model.CartItems[i].RecordID" txt-id="CartItems_@(i)__CartCount">
                    Update Quantity

                </a>&nbsp;|&nbsp;
            </td>
            <td>
                <a href="#" class="RemoveLink" data-id="@Model.CartItems[i].RecordID">
                    Remove from
                    cart
                </a>
            </td>
        </tr>


    }

    <tr>
        <td>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td align="center"> <b>Total</b></td>

        <td id="cart-total" align="center">
           <b> @Model.CartTotal</b>
        </td>
    </tr>
</table>
</div>

脚本

@section scripts {
<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");
            if (recordToDelete != '') {
                // Perform the ajax post
                $.post("/ShopingCart/RemoveFromCart", { "id": recordToDelete }, function (data) {
                    // Successful requests get here
                    // Update the page elements
                    if (data.ItemCount == 0) {
                        $('#row-' + data.DeleteID).fadeOut('slow');
                    } else {
                        $('#item-count-' + data.DeleteID).text(data.ItemCount);
                    }
                    $('#cart-total').text(data.CartTotal);
                    $('#update-message').text(data.Message);
                    $('#cart-status').text('Cart (' + data.CartCount + ')');
                });
            }
        });
    });
    $(function () {
        // Document.ready -> link up remove event handler
        $(".UpdateLink").click(function () {
            // Get the id from the link
            var recordToUpdate = $(this).attr("data-id");
            var countToUpdate=$("#" + $(this).attr("txt-id")).val();
            if (recordToUpdate != '') {
                // Perform the ajax post
                $.post("/ShopingCart/UpdateCartQuantity", { "id": recordToUpdate, "cartCount": countToUpdate}, function (data) {
                    // Successful requests get here
                    // Update the page elements
                    if (data.ItemCount == 0) {
                        $('#row-' + data.DeleteID).fadeOut('slow');
                    } else {
                        $('#item-count-' + data.DeleteID).text(data.ItemCount);
                    }
                    $('#cart-total').text(data.CartTotal);
                    $('#update-message').text(data.Message);
                    $('#cart-status').text('Cart (' + data.CartCount + ')');
                });
            }
        });
    });
    function handleUpdate() {
        // Load and deserialize the returned JSON data
        var json = context.get_data();
        var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);
        // Update the page elements
        if (data.ItemCount == 0) {
            $('#row-' + data.DeleteID).fadeOut('slow');
        } else {
            $('#item-count-' + data.DeleteID).text(data.ItemCount);
        }
        $('#cart-total').text(data.CartTotal);
        $('#update-message').text(data.Message);
        $('#cart-status').text('Cart (' + data.CartCount + ')');
    }
</script>
}

感谢您的辛勤工作，但这让我更加困惑:) ...我会尝试更好地解释我想要实现的目标......这是我的控制器方法

[HttpPost]
        public ActionResult UpdateCartQuantity(int id , int cartCount)
        {
            var cart = ShopingCart.GetCart(this.HttpContext);

            string productName = storeDB.Carts.Single(
                item => item.RecordID == id).Product.ProductName;

            Product product = storeDB.Carts.Single(
                item => item.RecordID == id).Product;

            int oldCount = (int)storeDB.Carts.Single(
                item => item.RecordID == id).CartCount;

            int itemCount = 0;
            if (oldCount==cartCount)
            {
                itemCount = oldCount;
            }
            else if (cartCount>oldCount)
            {
                itemCount = oldCount;
                int sub = cartCount-oldCount;
                for (int i = 0; i < sub; i++)
                {
                    cart.AddToCart(product);
                    itemCount++;
                }
            }
            else
            {

                itemCount = (int)cart.UpdateCartCount(id, cartCount);

            }
            var results = new ShopingCartRemoveViewModel
            {
                Message = Server.HtmlEncode(productName) +
                " has quantity updated.",
                CartTotal = cart.GetTotal(),
                CartCount = (int)cart.GetCount(),
                ItemCount = itemCount,
                DeleteID = id
            };


            return Json(results);
        }

所以我正在查看一些教程，并考虑使用<input type="text">字段而不是@html.TextBoxFor(model=>model.CartItems[i].CartCount)和$ajax()来发布每个<input>的recordID和值...我可能这样做可能是一个具有唯一名称/ id或类的cartitem但是考虑到我有CartItems列表我需要动态地为每个cartitem生成<input>数量字段和for语句。所以当用户按下保存更改按钮时它需要从每个输入字段读取值并使用方法UpdateCartQuantity和recordID进行处理。对我来说主要的问题是如何动态处理<input>的类/ id，因此每个都有唯一的id以及如何读取/发送recordID和输入值。此外，我现在编辑了我的观点，我现在有了陈述，而不是像你能看到的那样。

Answer 1

jquery textbox的带有ajax调用的focusout（）事件应该这样做。
aleksander也有一个好处。
你试图保存单个文本框对象状态活泼。我看不到用途。除了你试图追踪对象状态。毕竟他必须张贴他的页面。

Answer 2

为您的产品列表提供课程。
validate是用户输入的数字输入。
只读价格。
使用focusout（）事件和jquery更新此视图的小计和总计。

我认为这个功能正是您所寻找的。

为什么代码比这更复杂。在您的提交中，您需要ID产品ID和计数。此页面显示的所有其他内容都已完成。

Answer 3

只是猜测一切。有更好的方法，但这会给你一个想法。

a = np.random.random((3, 2, 2))
# array([[[ 0.28623689,  0.96406455],
#         [ 0.55002183,  0.73325715]],
#
#        [[ 0.44293834,  0.08118479],
#         [ 0.28732176,  0.94749812]],
#
#        [[ 0.40169829,  0.0265604 ],
#         [ 0.07904701,  0.19342463]]])
x = np.ravel()
# array([ 0.28623689,  0.96406455,  0.55002183,  0.73325715,  0.44293834,
#         0.08118479,  0.28732176,  0.94749812,  0.40169829,  0.0265604 ,
#         0.07904701,  0.19342463])
print(x.reshape((2, 2, 3)))
# array([[[ 0.28623689,  0.96406455,  0.55002183],
#         [ 0.73325715,  0.44293834,  0.08118479]],

#        [[ 0.28732176,  0.94749812,  0.40169829],
#         [ 0.0265604 ,  0.07904701,  0.19342463]]])
print(x.reshape((3, 2, 2)))
# array([[[ 0.28623689,  0.96406455],
#         [ 0.55002183,  0.73325715]],
#
#        [[ 0.44293834,  0.08118479],
#         [ 0.28732176,  0.94749812]],
#
#        [[ 0.40169829,  0.0265604 ],
#         [ 0.07904701,  0.19342463]]])

//因为你有更新的页面，上面的代码。 //在这里执行ajax调用以使用产品ID和数量更新行的数据库。因为产品数量是独特的。返回一个int或boolean以显示更新的用户（如果有）。你的ajax调用动作应该接受productid数量。如果需要发送一些用户凭证，如果不需要它的帖子。

会自动更新。
使用信息更新购物车数据库的ajax调用。
显示已更新给用户。
如果用户点击提交。邮政行动将处理购物车物品并检查过程继续......
如果您想要ajax调用可以在每次用户进行更改时发送整个列表（购物车项目），您的选择......

上面的代码，它应该没问题。

public class Product
    {
        //unique
        public int Id
        {
            get;
            set;
        }
        public String Name
        {
            get;
            set;
        }
        public Decimal Price
        {
            get;
            set;
        }
        public Int32 Quantity
        {
            get;
            set;
        }

        public Decimal SubTotal
        {
            get
            {
                return Price * Quantity;
            }
        }

    }

public class ProductList
    {
        public List<Product> productList = new List<Product>
        {
            new Product{Id=1, Name="Product 1", Quantity=4, Price=100},
            new Product{Id=2,Name="Product 2", Quantity=3, Price=200},
            new Product{Id=3,Name="Product 3", Quantity=2, Price=300},
            new Product{Id=4,Name="Product 4", Quantity=1, Price=400}
        };

        public Decimal Total
        {
            get
            {
                Decimal total = 0M;
                foreach( var item in productList )
                {
                    total += item. SubTotal;
                }

                return total;
            }
        }

    }
    <script type="text/javascript">
        function UpdateSubANdTotal(price, quantity, subid) {
            $(subid).html($(quantity).html() * $(price).prop("value"));

            var elems = document.getElementsByClassName('subtotal');
            var tTotal = 0;
            for (var i = 0; i < elems.length; i++) {
                if (typeof elems[i].innerHTML !== null) {
                    tTotal = Number(tTotal) + Number(elems[i].innerHTML);
                }
            }
            $('#ABTotal').text(tTotal);

给我发布支票代码，如果可以的话，我想看一看。希望这段代码可以。

如何迭代文本框的值，并使用ajax将它们发送到控制器？

3 个答案: