AJAX Post Multiple Data to ASP.Net MVC

Question

I am facing problem while posting multiple objects via ajax jquery to MVC 4 controller. It has been weeks but I can't seem to find a solution. I tried several approaches, sometimes the filterModel object is null and sometimes string parameters are null (doesn't matter even if I stringify of if I specify contentType or not)

What I want? I want to pass three objects: 1. filterModel 2.testparamA 3.testparamB What should I do to pass all three objects to MVC controller? What do I need to write in data: so I get all 3 object values?

The simplest Controller

[HttpPost]
public JsonResult Test(string testparamA, string testparamB, FilterModel filter)
{
    using (RBSystemEntities repository = new RBSystemEntities())
    {
        return Json(new {
            DataList = repository.Items.Select(x => new {x.PKID, x.ItemName}).ToList(),
            Result = "OK"
        });
    }
}

The simplest View

var filterModel = @Html.Raw(Json.Encode(new FilterModel("ItemName", "Pepperoni Pizza")))
//filterModel = JSON.stringify(filterModel);

function testme() {
    // post the javascript variable back to the controller 
    $.ajax({
        url: '/Menu/Test',
        type: 'POST',
        //contentType: 'application/json; charset=utf-8',
        data: {
            filter: filterModel,
            testparamA: 'A value',
            testparamB: 'B value'
        }, // with this approach I get filterModel null in the controller however testparamA and testparamB has values
        data: filterModel, // with this approach I get values for filterModel but I can't pass testparamA and testparamB
        success: function (result) {
            // TODO: do something with the results
            alert('success');
        }
    });
}
testme();

The simplest FilterModel class

public class FilterModel
{
    public FilterModel() { }
    public FilterModel(string filtercolumn, string filtervalue)
    {
        this.FilterColumn = filtercolumn;
        this.FilterValue = filtervalue;
        this.FilterColumnCriteria = "=";
    }
    public string FilterColumn { get; set; }
    public string FilterValue { get; set; }
    public string FilterColumnCriteria { get; set; }
}

Are you saying data: JSON.stringify({ fm: filterModel, ta: testparamA, tb: testparamA }) doesn't work? Have a read of http://stackoverflow.com/questions/9558848/pass-multiple-json-objects-to-mvc3-action-method — Paul Zahra, Aug 13 '14 at 14:13
@PhilippM I didn't write a ModelBinder. It should be binded automatically by MVC because data: filterModel works perfectly and sends data to MVC. But data: {filter: filterModel,testparamA: 'A value',testparamB: 'B value'} doesn't works — suomi-dev, Aug 13 '14 at 14:21
If you have a ModelBinder, MVC will distinguish between flat parameters and the object for `FilterModel` I think, but I can't test it now. — Philipp M, Aug 13 '14 at 14:27
@PaulZahra Thanks. now i realize that i should stringify the whole thing not just filterModel :) Glad it worked :) — suomi-dev, Aug 13 '14 at 14:28
Take a look at this answer: http://stackoverflow.com/a/310136/508479 — dwbrito, Jan 28 '15 at 18:17

score 4 · Accepted Answer · answered Aug 13 '14 at 15:00

4

Hope you don't mind me posting my comment (which was helpful) as an answer...

If you use stringify as follows it should work...

JSON.stringify({ fm: filterModel, ta: testparamA, tb: testparamA })

answered Aug 13 '14 at 15:00

Paul Zahra

9,522
8
54
76

Works well using $.ajax post with { datatype: 'json' ...} – Dan Randolph Aug 23 '15 at 23:09

score 0 · Answer 2 · answered Aug 13 '14 at 14:35

@PaulZahra guided me to the right direction.

Below changes fixed my problem:

contentType: 'application/json; charset=utf-8', // uncomment this
data: JSON.stringify({ filter: filterModel, testparamA: 'A value', testparamB: 'B value' }), //stringify whole thing and not just c# class

AJAX Post Multiple Data to ASP.Net MVC

2 Answers2

Linked