CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-4
Ayo Adesina
Ayo Adesina

Reputation: 2395

MVC4 - When Passing Complex model to the Controller using Ajax

This is a Java Script function that is called when a user clicks add to basket, I am testing out my Ajax call before I put in all my logic to build the correct values form my form, (so hard coded for now.)

    function AddItem() {

    var myproduct = { Id: 1, Price: 17, ProductName:"product name" }

    var cartItem = { Quantity: 1, Product: myproduct };


    $.ajax({
        url: "/Cart/AddItem",
        type: 'post',
        data: cartItem,
        success: function (data) {
            if (data.IsSuccess) {
                alert("test Hello Success");
            }

            alert("test HELLO Fail");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown + "- Error");
        }
    });
}

The problem is when testing this Java Script my strongly typed parameter inside my controller action only has some of the values set, My controller action looks like this:

[HttpPost]
    public JsonResult AddItem(CartItem cartItem)
    {  
        cartItem.Cart = cartService.GetCartCurrent(this);
        cartService.SaveCartItem(cartItem);

       //bla bla bla

     }

The Cart Item definition looks like this:

[Serializable]
public class CartItem
{
    [Key]
    public int Id { get; set; }
    public virtual Product Product { get; set; }
    public virtual List<SelectedProductOption> SelectedProductOptions { get; set; }
    public virtual Cart Cart { get; set; }
    public int Quantity { get; set; }

}

So when I set a break-point CartItem.Quaintity = 1 but CartItem.Product is NOT NULL but the values for Product.Id = 0 and Product.Price is 0.

Why??

How do you set the inner object of the complex model.

Any ideas?

Upvotes: 1

Views: 1668

Answers (1)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

The problem seems to that your data is not being deserialized correctly. You can use JavaScriptSerializer to solve this.

Here

  var myproduct = { Id: 1, Price: 17, ProductName: "product name" };

            var cartItem = { Quantity: 1, Product: myproduct };


            $.ajax({
                url: "/Home/Index",
                type: 'post',
                data: "formData=" + JSON.stringify(cartItem),
                success: function (data) {
                    if (data.IsSuccess) {
                        alert("test Hello Success");
                    }

                    alert("test HELLO Fail");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown + "- Error");
                }
            });

[HttpPost]
    public JsonResult AddItem(string formData)
    {  
        var js = new JavaScriptSerializer();
        CartItem cartItem = js.Deserialize<CartItem>(formData);

        cartItem.Cart = cartService.GetCartCurrent(this);
        cartService.SaveCartItem(cartItem);

       //bla bla bla

     }

Upvotes: 1

Related Questions