Question

我一直在开发我的购物车程序，但在将商品添加到购物车时一直遇到问题

这是我的代码；

HomeController 类

    [HttpPost]
    public ActionResult AddToBasket(int id)
    {
        var basketJson = HttpContext.Session.GetString(SESSION_KEY);
        List<SepetProduct> sepet;
        if (basketJson == null)
        {
            sepet = new List<SepetProduct>();
        }
        else
        {
            sepet = JsonSerializer.Deserialize<List<SepetProduct>>(basketJson);
        }

        if (sepet.Any(x=> x.id == id))
        {
            sepet.Single(x => x.id == id).Toplam++;
        }
        else
        {
            sepet.Add(new SepetProduct { id = id, Toplam = 1 });
        }
        basketJson = JsonSerializer.Serialize(sepet);
        HttpContext.Session.SetString(SESSION_KEY, basketJson);
        return Json(new { status = true, Msg = "Ürün Sepete Eklendi", Data = sepet });
    }

'''

这是我的按钮操作代码

<form action="@Url.Action("addToBasket","Home")" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="Id" value="@urun.UrunId" />
                            <button type="submit" class="btn btn-dark">
                                <span class="fa fa-shopping-cart"></span>Sepete ekle
                            </button>
                        </form>

问题是，当我按下“sepete ekle”按钮时，商品已添加到购物车，但它会将我们引导至名为“https://localhost:44302/Home/addToBasket”的新页面并向我们展示这些数据

''' 状态为真 msg "Urün Sepete Eklendi" 数据
0
编号 2 托普兰1

'''

我希望当我按下“sepete ekle”按钮时，页面保持不变，但产品已添加到购物篮中。它只是向我们显示一条消息说已添加。

我怎么能做到这一点。谢谢你的有趣和帮助

Answer 1

您可以尝试使用 ajax 替换表单 post。这是一个工作演示：

TestBasket.cshtml(我使用value="1"进行测试。并在隐藏输入中添加id="Id"。此外，我需要更改按钮的类型，以便单击它时不会提交表单,它将转到 submitData() 函数。）：

<form action="@Url.Action("addToBasket","Home")" method="post" enctype="multipart/form-data">
    <input type="hidden" id="Id" name="Id" value="1" />
    <button type="button" onclick="submitData()" class="btn btn-dark">
        <span class="fa fa-shopping-cart"></span>Sepete ekle
    </button>
</form>
<script>
    function submitData() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("addToBasket","Home")',
            data: { "id": $("#Id").val() }
            }).done(function (data) {
                console.log(data.msg);
            });
    }
    </script>

家庭控制器：

public IActionResult TestBasket()
        {
            return View();
        }
        [HttpPost]
        public ActionResult AddToBasket(int id)
        {
           
            return Json(new { status = true, Msg = "Ürün Sepete Eklendi", Data = new List<SepetProduct>() });
        }

结果：

在购物车中添加商品

1 个答案: