Ajax Call to Controller with multiple parameters

Question

$.ajax({
    type: 'POST',
    url: '@Url.Action("AccountUpdate", "Customer")',
    async: false,
    data: { a:"ed", formCollection: $("#form1").serialize() }
});

Controller:-

public void AccountUpdate(string a, FormCollection formCollection) {}

Question:- In controller AccountUpdate I am getting parameter a ="ed" which is fine. But in FormCollection object I am getting the formCollection object and also the 'a' object Why the form collection object receiving the 'a' object ? It should be only formCollection object

Because your parameter is typeof FormCollection which is the collection of all submitted data. Replace it with YourModel formCollection Where YourModel is the model you used in the view. — user3559349
– user3559349, Commented Sep 24, 2015 at 9:01
So I changed my Controller's parameter to public void AccountUpdate(string a, Customer formCollection) {} No change in Ajax, Now I am getting null in formCollection ? — Fahad Meraj
– Fahad Meraj, Commented Sep 24, 2015 at 9:19
Also what I read is formCollection contains only those elements which are in the scope of form , "a" is not defined in form scope — Fahad Meraj
– Fahad Meraj, Commented Sep 24, 2015 at 9:23
Because your ajax data option is not correct. Just start by using data: $("#form1").serialize(), to ensure your model is binding correctly and I'll then show you how to send back the additional parameter — user3559349
– user3559349, Commented Sep 24, 2015 at 9:23
I did that before when I use only data: $("#form1").serialize() it works perfectly — Fahad Meraj
– Fahad Meraj, Commented Sep 24, 2015 at 9:26

user3559349 · Accepted Answer · 2015-09-24 09:56:49Z

1

The parameter of your POST method is typeof FormCollection which is a class that holds all submitted key/value pairs.

Change your method to

[HttpPost]
public void AccountUpdate(string a, Customer model)

And change your script to allow both your model and the additional value to be submitted and bound in the method

var data = $("#form1").serialize() + '&' + $.param({ 'a': 'ed'});

$.ajax({
    type: 'POST',
    url: '@Url.Action("AccountUpdate", "Customer")',
    data: data
});

answered Sep 24, 2015 at 9:56

user3559349

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

1 Comment

Fahad Meraj Over a year ago

Thankyou LeftyX and Stephen Muecke. Stephen Muecke your code is working perfectly now,

LeftyX · Accepted Answer · 2015-09-24 09:32:01Z

1

data: $("#form1").serialize()

is the way to go.

If you want to add some extra parameters:

$.ajax({
    type: 'POST',
    url: '@Url.Action("AccountUpdate", "Customer")',
    // async: false,
    data: "a=ed&" + $("form1").serialize()
});

This way you can bind directly to your view model:

[HttpPost]
public ActionResult Index(string a, Customer customer)
{
    ...
}

answered Sep 24, 2015 at 9:32

LeftyX

35.6k21 gold badges138 silver badges201 bronze badges

1 Comment

Fahad Meraj Over a year ago

Thanks Lefty, but customer object is null now This is my element in form <input type="text" name="ContactNumber" />

Collectives™ on Stack Overflow

Ajax Call to Controller with multiple parameters

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related