c# - How to send FormCollection as Ajax data

Question

I want to send FormCollection to Ajax function.

So this is my Ajax function

function checkProductAttribute(productVariantId) 
{

  var form = $("product-details-form").serialize();

      $.ajax({

                    cache:false,
                    type: "POST",
                    dataType: 'html',
                    url: "@(Url.Action("CheckProductVariantToCart", "ShoppingCart"))",
                    data: { "productVariantId": productVariantId, "shoppingCartTypeId": 1, "form": form },
                    success: function (msg) {

                            if(msg == 'true' )
                            {

                    returnVal = true;
                    }
                    else
                    {
                    returnVal = false;
                    }

                    },
                    error:function (){

                     returnVal = false;
                        alert("fail");

                    }  
                });

   return true;
}

And this is my controller

public bool CheckProductVariantToCart(int productVariantId, int shoppingCartTypeId, FormCollection form)
{   
     //Somthing here
     return true;
}

my problem is -How to sent FormCollection thought the Ajax function?

Answer 1

if you want strong type or complex object in Javascript format

Your Controller

public ActionResult CheckProductVariantToCart(int productVariantId, int shoppingCartTypeId, FormCollection form)
{   
     //Somthing here

     return Json(form);
}

javascripts

success: function (result) {
  console.log(result);
}

Answer 2

serializing the form is correct. You can send this to the Controller and it will auto bind to the FormCollection. There are a few things to look out for

var form = $("product-details-form").serialize();

In this selector you need to specify if you are looking by class(.) or id (#). i.e. $("#product-details-form).serialize(); I am guessing if you are debugging your javascript this variable is not storing anything? Right now it is looking for a tag which probably doesn't exist. Here is another question describing this.

second, make sure that your form elements contain a name attribute. Serialize will only serialize elements that have a name attribute set.

In the end, your form variable should contain a string that looks like myTextInput=helloworld&name=user1807766 which will be changed into a FormCollection on the server.