AJAX 不将复选框值传输到控制器

Question

我有一个模型如下：

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

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

视图如下：

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

我的 AJAX 调用：

$(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 () {
    
    }
});   
});

所以在序列化时，模型值为 "Status%5B0%5D.ItemText=Open&Status%5B1%5D.Selected=true"

但是，当我检查控制器中模型的值时，我看到模型中的状态值为 null。

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

}

我错过了什么？

Answer 1

Ajax post data 默认为 contentType application/x-www-form-urlencoded; charset=UTF-8，需要修改：

data: { model: model },

收件人：

data: model,

确保您的后端控制器不是 ApiController，否则您需要在 SearchModel 参数上指定特定的 [FromForm] 属性。

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

结果展示：

参考：

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

更新：

如果您的操作包含第二个字符串参数：

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

在视图中添加一个具有name="Id" 的输入：

<input name="Id" />

如果您的操作包含第二个模型类型参数：

型号：

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

控制器：

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

在视图中添加一个具有name="Item.Id" 的输入：

<input name="Item.Id" />

更新2：

控制器：

[HttpPost]
public async Task<ActionResult> Students(SearchModel model, string Id,bool isPartial)
{
    return 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 () {

    });
});