jQuery-Ajax doesn't send data

Question

I use asp.net core for my project's backend but my method doesn't get data that I sent them by jQuery ajax

These are my scripts to send data:

function ChangeCount(productId, count) {
    $.ajax({
        type: "POST",
        data: JSON.stringify({ ProductId: productId, Count: count }),
        url:'@(Url.Action("ChangeOrderCount", "Payment"))',
        contentType: "application/json;",
        dataType:"json"
    }).done(function (result) {
        if(!isNaN(result)) {
            var NewProductCount = parseInt(result)
            if (NewProductCount == 0) {
                $("#Order-" + productId).fadeOut();
            }
            else {
                $("#OrderCount-" + productId).html(NewProductCount);
            }
        } else {
            alert(result);
        }
    });
}

And this is my backend code:

public JsonResult ChangeOrderCount(int ProductId, int Count)
{
    string userId = userRepository.GetUserByEmail(User.Identity.Name).Id;
    bool result = bascketrepository.AddToCart(userId, ProductId, Count);
    if (result)
        return Json(bascketrepository.GetProductOrderCountInCurrentBascket(userId,ProductId));
    else
        return Json("خطایی رخ داده است");
}

Answer 1

In you ajax method,the contentType is “ application/json”,so the controller cannot analysis the data.If you want ajax pass data to controller,you need to change the contenttype in ajax. Here is my controller and view,and it worked.

Controller:

[HttpPost]
        public JsonResult ChangeOrderCount(int ProductId, int Count)
        {
            Console.WriteLine(ProductId + "," + Count);
            return Json("success");
        }
        [HttpGet]
        public IActionResult ChangeOrderCount()
        {
            return View();
        }

View:

@section scripts{ 
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var productId = 1;
            var count = 2;
            ChangeCount(productId, count);
        })
        function ChangeCount(productId, count) {
            $.ajax({
                type: "POST",
                data: { ProductId: productId, Count: count },
                url: '@(Url.Action("ChangeOrderCount", "Payment"))',
                contentType: "application/x-www-form-urlencoded",
            }).done(function (result) {
                if (!isNaN(result)) {
                    var NewProductCount = parseInt(result)
                    if (NewProductCount == 0) {
                        $("#Order-" + productId).fadeOut();
                    }
                    else {
                        $("#OrderCount-" + productId).html(NewProductCount);
                    }
                } else {
                    alert(result);
                }
            });
        }


    </script>
}

And this is the result: or you can just change the code of controller:

Model:

public class ProductCount
    {
        public int ProductId { get; set; }
        public int Count { get; set; }
    }

Controller:

[HttpPost]
        public JsonResult ChangeOrderCount([FromBody]ProductCount productCount)
        {
            Console.WriteLine(productCount.ProductId + "," + productCount.Count);
            return Json("success");
        }
        [HttpGet]
        public IActionResult ChangeOrderCount()
        {
            return View();
        }

View:

$(function () {
        var productId = 1;
        var count = 2;
        ChangeCount(productId, count);
    })
    function ChangeCount(productId, count) {
        $.ajax({
            type: "POST",
            data: JSON.stringify({ ProductId: productId, Count: count }),
            url: '@(Url.Action("ChangeOrderCount", "Payment"))',
            contentType: "application/json",
        }).done(function (result) {
            if (!isNaN(result)) {
                var NewProductCount = parseInt(result)
                if (NewProductCount == 0) {
                    $("#Order-" + productId).fadeOut();
                }
                else {
                    $("#OrderCount-" + productId).html(NewProductCount);
                }
            } else {
                alert(result);
            }
        });
    }

And this is the result: