CODEWITHSUNDEEP
c#jqueryajaxasp.net-corecheckboxlist
TheFallenOne
TheFallenOne

Reputation: 1686

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

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?

Upvotes: 0

Views: 1254

Answers (2)

Jerry Cai
Jerry Cai

Reputation: 939

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:

enter image description here

Upvotes: 1

Indrit Kello
Indrit Kello

Reputation: 1313

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.

Upvotes: 2

Related Questions