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);
                                }
                            }),

If you want to display all those data in your page via ajax call, you can use partial view of MVC where you can directly bind your model with partial view. Just a thought. — Parth Ruparelia
– Parth Ruparelia, Commented Mar 6, 2017 at 11:06

Shyju · Accepted Answer · 2017-03-05 21:43:51Z

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
                                });
                            } ,

edited Mar 5, 2017 at 21:43

answered Mar 5, 2017 at 21:38

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fatih Demir Over a year ago

ok. I dont use json serializing . But I give alert error message .500 internal.

Fatih Demir Over a year ago

It does not have to be this way?

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

Shyju Over a year ago

i am not sure what your myCart method does! so cannot tell you

Collectives™ on Stack Overflow

Get json object with ajax asp.net mvc

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related