ASP.NET MVC passing mapping object arrays to controller paramaters from jQuery

Question

I currently have a bunch of methods in my controllers which take selected records from table rows.

So I might have something like

var ids = [];
var prices = [];
var customers = [];

$selectedRow.each(function() {
    ids.push($(this).find('.id').text());
    prices.push($(this).find('.price').text());
    customers.push($(this).find('.customer').text());
});

$.post(....) // AJAX call to controller method

And in the controller I end up with

public ActionResult DoSomething(int[] ids, double[] prices, string[] customers) { ... }

which is just a bit messy to deal with using iterators.

What I'd really like is to have

Class Foo
{
    int id;
    double price;
    string customer;
}

and be able to receive

public ActionResult DoSomething(List<Foo> foos) { ... }

is this possible?

Darin Dimitrov · Accepted Answer · 2010-11-23 16:58:51Z

A bit hacky but here's an example:

// query array: construct this as usual
var array = [{ id: '1', name: 'name 1' }, { id: '2', name: 'name 2'}];

// map the array into an array of DOM hidden fields
var query = $.map(array, function (element, index) {
    return [$(document.createElement('input'))
                    .attr('type', 'hidden')
                    .attr('name', 'foos[' + index + '].id')
                    .val(element.id),
                $(document.createElement('input'))
                    .attr('type', 'hidden')
                    .attr('name', 'foos[' + index + '].name')
                    .val(element.name)
                ];
});

// construct a form
var form = $(document.createElement('form'));
$(query).appendTo(form);

$.ajax({
    url: '<%: Url.Action("Test") %>',
    data: form.serialize(),
    dataType: 'json',
    success: function (result) {
        alert('success');
    }
});

This will successfully bind to a controller action of the form:

public ActionResult Test(IEnumerable<Foo> foos) 
{
    ...    
}

where Foo:

public class Foo
{
    public string Id { get; set; }
    public string Name { get; set; }
}

Remark: All this is not necessary if you configure your controller action to accept JSON. In ASP.NET MVC 3 this is automatically included in the framework.

Community · Accepted Answer · 2017-05-23 11:44:00Z

0

Yes it is.

Look at this question for details.

Also these resources can help you:

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Nov 23, 2010 at 16:35

Lorenzo

29.4k50 gold badges129 silver badges224 bronze badges

2 Comments

fearofawhackplanet Over a year ago

I'm not trying to model bind to a form though, those solutions won't work with jQuery submitted values will they?

Lorenzo Over a year ago

Yes they will if you use ("#form").serialize() when submitting the form itself

Simon Bartlett · Accepted Answer · 2010-11-23 16:41:59Z

0

Phil Haack wrote a blog post on this too: Model Binding To A List

Also, MVC 3's model binder will support JSON post data I think - but this is obviously not going to help you today :(

answered Nov 23, 2010 at 16:41

Simon Bartlett

2,03014 silver badges15 bronze badges

Comments

Rohit Ramname · Accepted Answer · 2011-07-18 12:05:12Z

0

In my case, the view is not being returned. Its showing the alert in the call back

answered Jul 18, 2011 at 12:05

Rohit Ramname

8342 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC passing mapping object arrays to controller paramaters from jQuery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related