unable to get updated cookie value in jquery after ajax call

Question

I have made a simple cart example in mvc. what I'm doing is , after clicking on Add to cart span , I'm calling a Controller Action method.

And then updating the cookie value with Total no of item in cart. but it give me initial value of cookie.

This is my Ajax Code to call Controller Action

   $(document).delegate('.addCart','click', function () {
            var getId = parseInt($(this).attr('id').slice(3));
            $.ajax({
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                url: '/Comments/CartDetailsSetGet',
                data: { Id: getId },
                success: function (data) {
                    var count = parseInt(data);
                    if (isNaN(count)){
                        alert(data);
                    }else{
                        var getCookies=  @HttpContext.Current.Request.Cookies["CartCookie"].Value;
                        $('.cartNum').html(getCookies);
                    }
                },
                error: function (data) {
                    alert("Error In Adding Item To Cart");
                }
            });
        });

There is span > with class cartNum in which I'm showing Total no of item in cart .

addCart is span on which I'm Clicking to Add Item In Cart.

This is my Action Method , which is My default Action

HttpCookie ck = new HttpCookie("CartCookie");
        public ActionResult Index()
        {
            if (Request.Cookies["CartCookie"] == null)
            {
                ck.Value = "0";
                Response.SetCookie(ck);
            }
            IList<Comment> commentList = db.Comments.ToList();
            return View(commentList);
        }

This Action Which is getting called On Ajax Request.

static List<int?> CartItemsId = new List<int?>();
        public string CartDetailsSetGet(int? Id)
        {
              if (CartItemsId.Contains(Id) != true)
                {
                    CartItemsId.Add(Id);
                    int getCount = CartItemsId.Count();
                    System.Web.HttpContext.Current.Request.Cookies["CartCookie"].Value = getCount.ToString();
                    ck.Expires = DateTime.Now.AddDays(-1);
                    var d = "";
                    if (System.Web.HttpContext.Current.Request.Cookies["CartCookie"] != null)
                    {
                        d = System.Web.HttpContext.Current.Request.Cookies["CartCookie"].Value;
                    }
                    return d.ToString();
                }
                else
                {
                    return "This Item Is Already In Cart";
                }            
        }

Here in d I'm getting updated cookie value but in Ajax Success , this line giving me Initial value, i.e 0.

var getCookies= @HttpContext.Current.Request.Cookies["CartCookie"].Value;

Answer 1

In you script, var getCookies = '@HttpContext.Current.Request.Cookies["CartCookie"].Value' is razor code and is parsed server side prior to be the browser. If you inspect the page source you will see that the value of getCookies is already set to "0".

Rather than trying to set or update a cookie, return JSON data in the CartDetailsSetGet that contains the values you want to render, for example

public JsonResult CartDetailsSetGet(int? Id)
{
  if (CartItemsId.Contains(Id) != true)
  {
    ....
    int getCount = CartItemsId.Count();
    var data = new { count = getCount , message = "some message" };
    return Json(data, JsonRequestBehavior.AllowGet);
  }
  {
    var data = new { count = null, message = "This Item Is Already In Cart" };
    return Json(data, JsonRequestBehavior.AllowGet);
  }
}

Script

$.ajax({
  ....
  success: function (data) {
    if (data.count) {
      $('.cartNum').html(data.count);
    } else {
      alert(data.message);
    }
  },
  ....