ASP MVC 3 submit url parameters using AJAX and JQUERY

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!!!

this way not get FormCollection you have pass collection of model class define here. like public bool Update(int id, userProfile collection) — Sender
– Sender, Commented Sep 25, 2012 at 6:25
make sure in IE check this Is JSON.stringify() supported by IE 8? — Sender
– Sender, Commented Sep 25, 2012 at 6:35

Konstantin Dinev · Accepted Answer · 2012-09-25 06:28:17Z

1

Try calling JSON.stringify() on your JSON:

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

answered Sep 25, 2012 at 6:28

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

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

Comments

Gyan Chandra Srivastava · Accepted Answer · 2012-09-25 06:30:15Z

1

$(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

answered Sep 25, 2012 at 6:30

Gyan Chandra Srivastava

1,38010 silver badges29 bronze badges

8 Comments

tmieruch Over a year ago

Creates the following error: The parameters dictionary contains a null entry 'id' of non-nullable type 'System.Int32'...

Gyan Chandra Srivastava Over a year ago

it means you also have to look on your id field

Gyan Chandra Srivastava Over a year ago

or make [HttpPost] public bool Update(int id, FormCollection collection) to [HttpPost] public bool Update(int? id, FormCollection collection)

tmieruch Over a year ago

id should not be an optional parameter! jquery and ajax have to submit the unique id and the form collection...

Gyan Chandra Srivastava Over a year ago

have you checked what you are getting in id through alert

|

tmieruch · Accepted Answer · 2012-09-26 06:41:28Z

This is the actual watch: Debugging

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?

Jorge Benavides Quiroga · Accepted Answer · 2013-11-15 04:34:52Z

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!

Collectives™ on Stack Overflow

ASP MVC 3 submit url parameters using AJAX and JQUERY

4 Answers 4

Comments

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related