首页 > 解决方案 > Asp .Net Core 2.2 - JSON.stringify(data) 不工作

问题描述

我正在使用 Asp .Net Core 2.2 创建购物车。所以,当用户点击添加到购物车按钮时,我想在购物车上添加商品。如您所见,以下代码运行良好。我检查了“mydata”变量正在获取所有数据,但Json.Stringify(data)没有将任何数据传递给控制器​​。

$(".addtocart").click(function (event) {
    event.preventDefault();
    var mydata = {
        "CartItemID": $(this).data("pid"),
        "Name": $("#name").text(),
        "ImageUrl": $("#mainimage").attr("src"),
        "Amount": $("#price").val(),
    };
    $.ajax(
        {
            url: "/cart/add",
            type: "post",
            contentType: "application/json",
            data: JSON.stringify(mydata)
        }
    ).done(function (addresult) {
        $("#cartItemCount").text(addresult.items)
        $("#cartItemCountInner").text(result.Items)
    });
});

下面是控制器代码。模型显示为空:

        [HttpPost]
        public ActionResult Add(CartItem item)
         {
            Cart cart = HttpContext.Session.GetObjectFromJson<Cart>("_Cart");
            if (cart == null)
                cart = new Cart();
            cart.Add(item);
            HttpContext.Session.SetObjectAsJson("_Cart", cart);
            JsonResult result = new JsonResult(new { Items = cart.NumberOfItems });
            return result;
}

还请检查会话是否正确使用,因为我是 Asp .Net Core 的新手,对 asp .net 核心会话不太了解。

下面是处理复杂对象到会话的 SessionExtension 代码:

 public static class SessionExtension
    {
        public static void SetObjectAsJson(this ISession session, string key, object value)
        {
            session.SetString(key, JsonConvert.SerializeObject(value));
        }

        public static T GetObjectFromJson<T>(this ISession session, string key)
        {
            var value = session.GetString(key);
            return value == null ? default(T) : JsonConvert.DeserializeObject<T>(value);
        }
    }

标签: c#jqueryajaxasp.net-mvcasp.net-core

解决方案


这是一个工作演示,如下所示:

1.型号:

public class CartItem
{
    public int CartItemID { get; set; }
    public string Name { get; set; }
    public string ImageUrl { get; set; }
    public int Amount { get; set; }
}

2.查看:

@model IEnumerable<CartItem>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ImageUrl)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Amount)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                <div id="name">@item.Name</div>
            </td>
            <td>
                <img id="mainimage" src="@item.ImageUrl" />
            </td>
            <td>
                <input id="price" value="@item.Amount" />
            </td>
            <td>
                <input type="button" class="addtocart" data-pid="@item.CartItemID" value="add to cart"/>
            </td>
        </tr>
        }
    </tbody>
</table>
@section Scripts
{
<script>
    $(".addtocart").click(function (event) {
        event.preventDefault();
        var mydata = {
            "CartItemID": $(this).data("pid"),
            "Name": $("#name").text(),
            "ImageUrl": $("#mainimage").attr("src"),
            "Amount": $("#price").val(),
            };
            console.log(JSON.stringify(mydata));
        $.ajax(
            {
                url: "/cart/add",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(mydata)
            }
        ).done(function (addresult) {
            $("#cartItemCount").text(addresult.items)
            $("#cartItemCountInner").text(result.Items)
        });
});
</script>
}

3.Controller(您需要添加FromBody到您的操作):

    [HttpPost]
    public ActionResult Add([FromBody]CartItem item)
    {
        //...
    }

4.结果: 在此处输入图像描述


推荐阅读