Get json object with ajax asp.net mvc

Question

I have a model. I used it for a while webform. But I am new on asp.net mvc. Little knowledge on this subject. I want you to help me with this. I have to get the data with ajax.Please help me.

public class BasketModel
    {

        public int id { get; set; }
        public int name { get; set; }
        public int summary { get; set; }
        public int price { get; set; }
        public int quantity { get; set; }
        public int image { get; set; }

    }

I used to my model on controller. And converted to json. and returned.

public JsonResult Test()
        {
            BasketModel basket = new BasketModel
            {
                id = 1,
                name = 1,
                image = 1,
                price = 1,
                quantity = 1,
                summary = 1
            };
            var jsonSerializer = new JavaScriptSerializer();
            var jsonbasket = jsonSerializer.Serialize(basket);

            return Json(jsonbasket,JsonRequestBehavior.AllowGet);
        }

I want the script object to be as follows on index.cshtml

 $('.my-cart-btn').myCart({
                        showCheckoutModal: true,
                        cartItems : {
                                    "id":1,
                                    "name":1,
                                    "summary":1,
                                    "price":1,
                                    "quantity":1,
                                    "image":1
                                    }
                            }),

I want to do this with ajax like below.

                 cartItems :
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                url: '/Product/Test',
                                success: function (data) {
                                    alert(data);
                                } ,                                
                                data: JSON.stringify(data),
                                error: function(jqXHR, textStatus, errorThrown)                           {
                                    alert('Error - ' + errorThrown);
                                }
                            }),

Answer 1

Looks like you are unnecessarily serializing it. The Json method is capable of sending the object as JSON back to the client.

public JsonResult Test()
{
     var basket = new BasketModel
         {
            id = 1,
            name = 1,
            image = 1,
            price = 1,
            quantity = 1,
            summary = 1
         };
     return Json(basket,JsonRequestBehavior.AllowGet);
}

The latest versions of MVC uses Newtonsoft Json.NET serializer behind the screen. The msdn documentation of JavaScriptSerializer also recommends to use JSON.NET

Now in your success event, you can use the JSON object as needed.

success: function (data) {
                                $('.my-cart-btn').myCart({
                                    showCheckoutModal: true,
                                    cartItems : data
                                });
                            } ,