c# - Create a list with jquery and post it to asp.net mvc - Stack Overflow

admin管理员组

文章数量:1330882

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 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
            });

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 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
            });

• c#
• javascript
• jquery
• asp-mvc-3

Share Improve this question Follow edited Dec 8, 2011 at 15:18 alapeno asked Dec 8, 2011 at 14:47 alapenoalapeno 2,81477 gold badges3838 silver badges5454 bronze badges 1

• 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./S0gM3vqg – asawyer Commented Dec 8, 2011 at 15:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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"]

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.

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

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

http://api.jquery./serialize/

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"));            
});

本文标签： cCreate a list with jquery and post it to aspnet mvcStack Overflow