序列化的 select2 值在 asp.net mvc 的控制器中不可用答案

【问题标题】：Serialized select2 value not available in the controller of asp.net mvc序列化的 select2 值在 asp.net mvc 的控制器中不可用
【发布时间】：2020-02-03 02:34:47
【问题描述】：

我有一个视图，它在一个 div 中有多个控件，我想对其进行序列化并通过 AJAX 将其传递给控制器。视图中的 SchoolType 字段是一个 select2 多选下拉列表。

型号：

public class SchoolModel
{
     public string StudentName{ get; set; }
     public List<string> SchoolType{ get; set; }
     public List<SelectListItem> SchoolTypeList{ get; set; }
}

查看：

<div id="divSchool">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                <div class="form-group">
                    <label asp-for="SchoolType" class="col-md-3 control-label">School Type</label>
                    <div class="col-md-9">
                        <select asp-for="SchoolType" asp-items="Model.SchoolTypeList" class="form-control medium"></select>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label asp-for="StudentName" class="col-md-3 control-label">Student Name</label>
                    <div class="col-md-9">
                        <input asp-for="StudentName" class="form-control" />
                    </div>
                </div>
            </div>
        </div>
    </div>       
</div>

控制器：

[HttpPost]
public ActionResult Index(SchoolModel model)
{
}

我的 JS 代码：

$('#SchoolType').select2({
    placeholder: "Filter by school"
}

$("document").on("click", ".btnCheck", function () {
var model = $('#divSchool').find('select, textarea,input').serialize();

$.ajax({
        url: "/Student/Index",
        type: 'POST',
        data: { model: model },
        cache: true,
        async: true,
    }).done(function (result) {

    }).fail(function (error) {

    })
});

但是序列化的 div 看起来像

model = "StudentName=Test&SchoolType=1b&SchoolType=26a"

虽然这些值在客户端是正确的，但在 AJAX 上，StudentName 值显示正常，而 SchoolType 值在控制器的服务器端显示为 null。我该如何解决这个问题？

可能的问题：因为 SchoolType 值是一个字符串列表，所以它没有映射到单个字符串。

编辑 1：我尝试将 div 更改为表单，但同样的问题仍然存在。

编辑 2：此问题在 PHP 中通过更改选择名称来处理。 This answer 显示了一个示例。

【问题讨论】：

看起来它没有正确绑定到模型。如果您为SchoolType 选择一个值会发生什么？如果您将 model 作为对象发送会发生什么？
@StevePak 仍然没有绑定，因为我相信 SchoolType 字段是一个数组，因此没有映射字符串。
因为 SchoolType 是一个数组，它可能需要像 &SchoolType[0]=1b&SchoolType[1]=26a 这样才能正确绑定。 jquery 的.serializeArray 工作吗？您可能需要在 ajax 调用中设置 dataType: 'json'
@TheFallenOne 你可以在你的ajax调用中试试这个data : $(current form').serialize()。
@jishansiddique 这是同一个问题。其他字段工作正常，但多个值未绑定。

标签： javascript ajax asp.net-mvc serialization jquery-select2

【解决方案1】：

虽然我不确定您是否可以操纵序列化部分；您可以手动获取该结构。

您可以序列化其他控件，例如使用 serialize() 并将其分配给模型。而对于 Select2，这样做并添加到模型中。

model = {};
$(".select2").each(function () {
    var selectedValue = $(this).val();
    if (selectedValue != null) {
        model[this.name] = selectedValue;
    }
});

这将为您提供所需的结构。

【讨论】：