Passing checkbox values to controller via jquery/ajax with null value returned to controller

Question

I have a .NET MVC application. I am attempting to post data to my controller using jquery ajax. Everything seems to be working based on viewing the Firebug console (I can see the values in an array in my post request) but in the controller I am getting null for IEnumerable STRMSelected. Any ideas on what I am doing wrong??

partial view

 @if (Model.Count() > 0)
    {

        foreach (var item in Model)
        {
            //int countAU = 1, countSP = 1, countSU = 1;
            string nameAU = "AU" + @item.year;
            string nameSP = "SP" + @item.year;
            string nameSU = "SU" + @item.year;
            <tr>
                <td style="text-align:center;">
                    <strong><label> @item.year</label></strong>
                </td>

                <td style="text-align:center;">


                    @if (@item.AU != null)
                    {
                        <input type="checkbox" name=@nameAU id="@nameAU" value="@item.AU" />
                        //countAU++;
                    }
                    else
                    {
                        <input type="checkbox" name="AUNonex" id="AUNone" disabled />
                    }

                </td>
           </tr>
          }
       }

Main View

 <div class="gradfacapp-samerow">
        <input type="submit" value="Save Request for Later" name="action:Save" class="cancel" />

        <input type="submit" value="Submit Request" id="submit" name="action:Submit" onclick="javascript:return checkSubmit();" />
 </div>


<script>
 $('#submit').on('click', function () {
        var STRMS = [];
        $('input:checked').each(function () {
            STRMS.push($(this).attr("value"));
        });
        $.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "FeeAuth")',
            dataType: "html",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ STRMSelected: STRMS }),
            success: 
                function (data) {  }

        });
    });
</script>

Controller

    [HttpPost]
    [MultipleButton(Name = "action", Argument = "Submit")]
    public ActionResult Submit(FA fee, HttpPostedFileBase upfile, IEnumerable<string> STRMSelected)
    {              
          code is here
    }

Usman · Answer 1 · 2017-04-06T20:02:56.533

1

remove contentType: "application/json; charset=utf-8", and change

data: JSON.stringify({ STRMSelected: STRMS }), to data: { STRMSelected: STRMS}, it is not necessary to send the data as json so your ajax will be

$.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "FeeAuth")',
            dataType: "html",
            data: { STRMSelected: STRMS},
            success: 
                function (data) {  }

        });

Edit

also prevent the default submit

$('#submit').on('click', function (e) {
e.preventDefault();

edited Apr 06 '17 at 20:02

answered Apr 06 '17 at 17:31

Usman

4,615
2
17
33

Tried this suggestion and still a null value in the controller. – user2448412 Apr 06 '17 at 18:12
@user2448412 can you try to set `async:false,` – Usman Apr 06 '17 at 18:29
Still passes null to the controller. – user2448412 Apr 06 '17 at 19:40
`function (e)` and `e.preventDefault();` and also add this in javascript to prevent default submit – Usman Apr 06 '17 at 19:42
I modified the code to your suggestion and it now throws a "404 Not Found". – user2448412 Apr 07 '17 at 13:19
@user2448412 can you check in f12 developers that at what url is it sending the request – Usman Apr 07 '17 at 18:18
@user2448412 and if you remove MultipleButton in action does it work? – Usman Apr 07 '17 at 18:50
Yes, If I remove the MultipleButton in action it does work but I need that also. – user2448412 Apr 07 '17 at 19:03
@user2448412 and if you send `data: { STRMSelected: STRMS , name: "action:Submit" },` – Usman Apr 07 '17 at 19:11
you should use other approach like these http://stackoverflow.com/questions/1714028/mvc-which-submit-button-has-been-pressed – Usman Apr 07 '17 at 19:44

score 0 · Answer 2 · answered Apr 06 '17 at 16:48

0

I notice that in the Ajax call you are setting data twice:

data: data,
data: JSON.stringify({ STRMSelected: STRMS }),

if that is not the issue, you could always wrap the inputs in a form then use

var formData = $("#myFormName").serializeArray();
var selectedItems = JSON.stringify(formData);

then in the Ajax call use:

data: selectedItems,

answered Apr 06 '17 at 16:48

Simon

764
4
8

I removed the data: data but it still displays as null in the controller. I added a screenshot of the post from Firebug. – user2448412 Apr 06 '17 at 17:02
Try changing the STRMSelected input to a string, then deserialize it within the controller to get the particular values you want – Simon Apr 06 '17 at 17:19

score 0 · Answer 3 · answered Jul 13 '21 at 03:48

you can use this syntax

 <input type="checkbox" name=@nameAU id="@nameAU" data-value="@item.AU" />

and getting in jquery

var STRMS = [];
        $('input:checked').each(function () {
            STRMS.push($(this).data("value"));
        });

Then send STRMS to controller.

Passing checkbox values to controller via jquery/ajax with null value returned to controller

3 Answers3