在 ASP.Net Core 中使用 AJAX 将复选框列表类的值发送到服务器

Posted 2023-04-13

【中文标题】在 ASP.Net Core 中使用 AJAX 将复选框列表类的值发送到服务器

【英文标题】：To send values of a checkbox list class to the server using AJAX in ASP.Net Core

【发布时间】：2021-09-02 05:27:36

【问题描述】：

我有以下复选框列表的模型代码。

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; 

这是我的看法：

<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>

复选框列表中有 3 个值，因此有 3 个复选框。我现在需要使用 jquery 在单击按钮时将值传递给服务器。这是我的代码：

$(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 : ?? 
    

我需要通过将复选框列表添加到模型中来将其发送到服务器。我该怎么做？

【参考方案1】：

你可以把复选框放在一个表单上（不是嵌套的，如果可以的话就用一个表单），然后序列化表单并提交数据。

【参考方案2】：

您想将值发送到服务器吗？然后你应该为输入添加值，并创建一个

数组来存储选定的值然后传递它们，检查这个：

 @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
            );
    );
);

服务器：

 public IActionResult Test(List<string> Selecteditem)

结果：