AJAX not transporting checkbox values to controller

Question

I have a model as follows:

public class SearchModel
{
    public List<CheckBoxResponse> Status { get; set; }
}

public class CheckBoxResponse
{
    public string ItemText { get; set; }
    public bool Selected { get; set; }
}

The view is as follows:

<div id="divSearchParams">
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
            <div class="form-group">
                <label>Status</label> <br />
                @for (var i = 0; i < Model.Status.Count; i++)
                {                       
                    <input type="checkbox" asp-for="@Model.Status[i].Selected" />
                    <label asp-for="@Model.Status[i].Selected">@Model.Status[i].ItemText</label>
                    <input type="hidden" asp-for="@Model.Status[i].ItemText" />
                }
            </div>
        </div>
</div>

My AJAX call :

$(document).on("click", "#search", function () {

    var model = $('#divSearchParams').find("input,select,textarea").serialize();
       
    $.ajax({
    url: targetUrl,
    type: 'POST',
    data: { model: model },
    cache: true,
    async: true,
    }).done(function (result) {
   
    }).fail(function (error) {
        
    }).always(function () {
    
    }
});   
});

So on serialise, the model value is "Status%5B0%5D.ItemText=Open&Status%5B1%5D.Selected=true"

However when I check the value of model in controller, I see Status value inside model is null.

public async Task<ActionResult> Students(SearchModel model)
{

}

What am I missing?

If you post that model that serializes to this, that isn't actually JSON. That is query string parameters. Thus, it won't be able to parse this as JSON. You could try appending this query string to the targetURL with: targetUrl + "?" + model and see if that works, but it probably isn't what you want here? — Daniel Lorenz
– Daniel Lorenz, Commented Sep 22, 2021 at 19:37
@The_Outsider: The JQuery 'serialize()' method returns a string. Therefore, if you change the Students() parameter type from SearchModel to string you will see what you are sending, at least. — Victor
– Victor, Commented Sep 22, 2021 at 22:28

Rena · Accepted Answer · 2021-09-23 09:58:43Z

2

Ajax post data with contentType application/x-www-form-urlencoded; charset=UTF-8 by default, you need change:

data: { model: model },

To:

data: model,

Be sure your backend controller is not ApiController, otherwise you need specific [FromForm] attribute on SearchModel parameter.

public class HomeController : Controller
{
    [HttpPost]
    public async Task<ActionResult> Students(SearchModel model)
    {
        //do your stuff...
    }
}

Result display:

Reference:

https://stackoverflow.com/a/65572281/11398810

Update:

If your action contains a second string parameter:

[HttpPost]
public async Task<ActionResult> Students(SearchModel model,string Id)
{
        //....
}

Add an input which has name="Id" in the View:

<input name="Id" />

If your action contains a second model type parameter:

Model:

public class TestViewModel
{
    public int Id{ get; set; }
}

Controller:

[HttpPost]
public async Task<ActionResult> Students(SearchModel model, TestViewModel Item)
{
    //...
}

Add an input which has name="Item.Id" in the View:

<input name="Item.Id" />

Update2:

Controller:

[HttpPost]
public async Task<ActionResult> Students(SearchModel model, string Id,bool isPartial)
{
    return View();
}

View:

$(document).on("click", "#search", function () {
    var id = "aaa";
    var isPartial = false;
    var model = $('#divSearchParams').find("input,select,textarea").serialize();
    $.ajax({
        url: "/Home/Students?Id=" + id + "&isPartial=" + isPartial,
        type: 'POST',
        data: model,
        cache: true,
        async: true,
    }).done(function (result) {

    }).fail(function (error) {

    }).always(function () {

    });
});

edited Sep 23, 2021 at 9:58

answered Sep 23, 2021 at 2:55

Rena

37.2k7 gold badges50 silver badges93 bronze badges

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

5 Comments

The_Outsider Over a year ago

This looks fine but what if there is a second parameter? How do I go about passing the second parameter in this situation?

The_Outsider Over a year ago

Can you edit the post and put in an example for multiple parameters? Say a model and an id needs to be posted to the server? Ex : public async Task<ActionResult> Students(SearchModel model, string Id) {

Rena Over a year ago

Check my updated answer please.

The_Outsider Over a year ago

I understand what you are saying. But I want something like data: { model: model, isPartial: true, Id: Id },in the AJAX function, not included as part of the form as these are not model parameters.

Rena Over a year ago

Hi @The_Outsider, you cannot combine { model: model, isPartial: true, Id: Id }, with .serialize data to post to backend, if the other parameter does not in form, you can append them to the url like: "/Home/Students?Id=" + id + "&isPartial=" + isPartial. Update my answer again.

Collectives™ on Stack Overflow

AJAX not transporting checkbox values to controller

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related