Create a list with jquery and post it to asp.net mvc

Question

I'm looking for a way to store the values of all existing checkboxes of a given class into some kind of list or array and send the result via jquery to an asp.net mvc controller. The checkboxes do not have to be checked, I need all of them.

More details:

My checkboxes look like this

<input type="checkbox" value="1" class="a-checkbox"
<input type="checkbox" value="2" class="a-checkbox"
<input type="checkbox" value="3" class="a-checkbox"

It would be nice if my MVC controller could look like this

public JsonResult SaveList(List<String> values) { //... }

I know that I could access the checkboxes in the following way

 $('input.a-checkbox').each(
    function () {
        // create the list with the help of $(this).val()
    }
 );

 // jquery post would happen here

But I dont know how to create such a data structure. Could you help me?

Thank you

edit: nice, thanks. Can you tell me whats wrong with this? My controller gets called indeed, but the list is null (on server side)

var list = [];
            $('a-checkbox').each(
                function () {
                    list.push($(this).val());
                }
            );

            $.ajax({
                type: "POST",
                url: myUrl,
                data: list,
                success: function (data) {
                    alert(data.Result);
                },
                dataType: "json",
                traditional: true
            });

If the values are null it means you have a model binding error. Here's an extension method I use to dump bind errors to the console in debug: pastebin.com/S0gM3vqg — asawyer
– asawyer, Commented Dec 8, 2011 at 15:27

jabclab · Accepted Answer · 2011-12-08 14:52:36Z

3

This will put all the checkbox values (value attributes) into an Array:

var values = [];
$(".a-checkbox").each(function () {
    values.push($(this).val());
});

// values now equals ["1", "2", "3"]

answered Dec 8, 2011 at 14:52

jabclab

15.1k5 gold badges57 silver badges51 bronze badges

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

2 Comments

alapeno Over a year ago

Thanks to all of you, maybe you could take a look at m edit above? Have problems with the post

jabclab Over a year ago

jQuery will serialise your list using param. There is an example on how Arrays are serialised on the linked page.

ShankarSangoli · Accepted Answer · 2011-12-08 14:53:27Z

1

Try this

var list = [];
$('input.a-checkbox').each(
    function () {
        // create the list with the help of $(this).val()
        list.push($(this).val());
    }
);

Now you can post list object to your mvc controller action.

answered Dec 8, 2011 at 14:53

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

asawyer · Accepted Answer · 2011-12-08 14:54:55Z

1

I use .Serialize() to format form data for my mvc ajax actions.

var checkPostData = $(".a-checkbox").serialize();

http://api.jquery.com/serialize/

answered Dec 8, 2011 at 14:54

asawyer

17.8k8 gold badges63 silver badges92 bronze badges

2 Comments

Didier Ghys Over a year ago

This produces a querystring (ex: a=1&b=2&c=3&d=4&e=5), not an array.

asawyer Over a year ago

Well he did say "It would be nice..." not "It is required" :P The mvc model binder handles the details just fine usually. Your right might not be what the OP is after though.

Rocco Smit · Accepted Answer · 2014-01-30 10:29:24Z

0

I had the same issue Nulls in my MVC mode and all. I found using $("input:checked") as my data instead of trying to extract the values to an array in js worked better and I fixed the Nulls issue by giving my checkboxes name values because MVC binds on input names.

HTML

<a class="post-checkboxes" href="#">post checkboxes</a>
<input name="[MVC viewmodel list variable name]" type="checkbox" value="1" />
<input name="[MVC viewmodel list variable name]" type="checkbox" value="2" />

Javascript

$('.post-checkboxes').click(function (e) {
    e.preventDefault();
    $.post("[location to post to]", $("input:checked"));            
});

answered Jan 30, 2014 at 10:29

Rocco Smit

413 bronze badges

Collectives™ on Stack Overflow

Create a list with jquery and post it to asp.net mvc

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related