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?

Answer 1

您可以将复选框放在表单上（不是嵌套的，如果可以，只需使用一个表单），然后序列化表单并提交数据。

Answer 2

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: