To send values of a checkbox list class to the server using AJAX in ASP.Net Core

Question

I have the following model code for the checkbox list.

public class ReportViewModel
{        
    public List<Guid> Reports { get; set; }
    public SelectList ReportList { get; set; }
    public List<CheckBoxResponse> Status { get; set; }
}

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

This is my view :

<form id="frmReport">

    <div class="row">
        <div class="col-xs-12">
            <div class="form-group">
                <label asp-for="Reports"></label><br />
                <select asp-for="Reports" asp-items="Model.ReportList" class="form-control" multiple></select>
            </div>
        </div>
    <div class="row">
        <div class="col-xs-12">                
                <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 class="row">
        <div class="col-xs-12" style="padding-top: 10px; padding-bottom: 10px;">
            <a id="submit" class="btn btn-primary" title="Submit">Submit</a>
        </div>
    </div>
</form>

There are 3 values in the check box list, and so there are 3 check boxes. I now need to pass the values to the server on click of button using jquery. This is my code :

$(document).on('click', '#submit', function (e) {
    
    var reports = $("#Reports").find("option:selected").val();
    
    //Need to add checkbox class to submit to the server

    var model = {
        Reports : reports,
        Status : ?? 
    }
}

I need to send the checkbox list to the server by adding it to the model. How do I do it?

Indrit Kello · Accepted Answer · 2021-06-17 12:01:44Z

2

You can put the checkboxes on a form (not nested, just use one form if it's okay) and then serialize the form and submit the data.

answered Jun 17, 2021 at 12:01

Indrit Kello

1,3198 silver badges19 bronze badges

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

Comments

Jerry Cai · Accepted Answer · 2021-06-18 06:52:15Z

Do you want to send the value to the server? Then you should add value to input, and create an

array to store the selected value and then pass them, check this:

 @for (var i = 0; i < Model.Status.Count; i++)
            {
                <input type="checkbox" asp-for="@Model.Status[i].Selected" value="@Model.Status[i].ItemText"/>
                <label asp-for="@Model.Status[i].Selected">@Model.Status[i].ItemText</label>
                <input type="hidden" asp-for="@Model.Status[i].ItemText" />
            }

Jquery:

$(document).ready(function () {
        $('#submit').click(function () {
            var selected = [];   //array to store
            $('input:checked').each(function () {
                selected.push($(this).attr("value"));  //push value to array
            });
            $.ajax({
                type: "POST",
                url: '@Url.Action("Test", "Home")',                  
                data: { Selecteditem: selected }     //pass as string
            });
    });
});

The server:

 public IActionResult Test(List<string> Selecteditem)

Result:

Collectives™ on Stack Overflow

To send values of a checkbox list class to the server using AJAX in ASP.Net Core

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related