ASP MVC 3 submit url parameters using AJAX and JQUERY - asp.net-mvc

Question

I've got a problem using ASP.NET MVC3, AJAX and JQUERY. I've got the following function
[HttpPost]
public bool Update(int id, FormCollection collection)
This is my jQuery Source:
$(document).ready(function () {
$('#btnUpdate').click(function (e) {
// Cancel default action
e.preventDefault();
var formCollection = $('#formId').serialize();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action","Controller")',
data: { id: $('#id').val(), collection: formCollection },
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
});
});
The id parameter submitted successfully, but the collection (FormCollection) includes an array with {[0]: 10000, [1]: collection}. I can't fix the problem. When I redesign the solution like this:
[HttpPost]
public bool Update(FormCollection collection)
$(document).ready(function () {
$('#btnUpdate').click(function (e) {
// Cancel default action
e.preventDefault();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action", "Controller")',
data: $('#formId').serialize(),
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
});
});
everything works fine. What I'm doing wrong in passing 2 parameter?
THX!!!

Answer 1

Try calling JSON.stringify() on your JSON:
data: JSON.stringify({ id: $('#id').val(), collection: formCollection })

Answer 2

$(document).ready(function () {
$('#btnUpdate').click(function (e) {
// Cancel default action
e.preventDefault();
var formCollection = $('#formId').serialize();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action","Controller")',
data: JSON.stringify({ id: $('#id').val(), collection: formCollection }),
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
});
});
you should have to pass the data with jsonstringify

Answer 3

This is the actual watch:
Parameter ID submitted successfully (Name=id, Wert=10000). Above id you can see formCollection including FORM.serialize() values of the ajax call. But the System.Web.Mvc.FormCollection including two keys only: id and collection! I expected
"Name"
"Address"
"Address_2"
...
I think if got a mistake in creating my ajax request, but I don't know why...
var customerNo = $('#fieldID').val();
var formCollection = $('#formID').serialize();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action", "Controller")',
data: { id: customerNo, collection: formCollection },
dataType: 'json',
success: function (data) {
if (data) {
alert(data);
};
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
The following line generates an error:
data: JSON.stringify({ id: customerNo, collection: formCollection })
The parameters dictionary contains a null entry 'id' of non-nullable type 'System.Int32'...
Changed without effect:
data: { id: customerNo, collection: JSON.stringify(formCollection) },
Any ideas?

Answer 4

This is my idea (works!)
Add in a partial class from a model an string attribute, add this attribute manually in "data".
JS:
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action", "Controller")',
data: $("form").serialize() + "&id=whatever",
dataType: 'json',
success: function (data) {
if (data) {
alert(data);
};
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
partialClass.cs Model:
public partial class TableName
{
public string id { get; set; }
}
Controller:
[HttpPost]
public bool Update(FormCollection collection){
var ID = collection.id;
}
Regards!