如何将 select2 中的多个值作为序列化表单数据的一部分传递给 asp.net core 5 mvc 中的控制器？答案

【问题标题】：How to pass multiple values from a select2 as part of serialized form data to the controller in asp.net core 5 mvc?如何将 select2 中的多个值作为序列化表单数据的一部分传递给 asp.net core 5 mvc 中的控制器？
【发布时间】：2022-11-11 19:14:07
【问题描述】：

我有一个表单，用户可以从中将序列化的值提交给控制器。有一个 select2，用户可以从中选择一个或多个员工代码。如何将这些多个代码与其他表单值一起传递给控制器？

发布的数据如下所示：

"appointmentCode=80814&employees%5B%5D=0387&employees%5B%5D=1055"

看法：

<form id="appointmentForm">
    <div class="modal-body">
        <div class="container-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-md small">
                        <div class="form-group">
                            <label for="appointmentCode">Appointment Code</label>
                            <input name="appointmentCode" type="text" class="form-control" id="appointmentCode" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="employeeCode">Scheduled Employees</label>
                            <select class="js-example-basic-multiple" name="employees[]" id="selectedEmployeeCodes" multiple="multiple" style="width: 250px">
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button id="buttonSubmit" type="button" class="btn btn-primary" data-dismiss="modal">Save Appointment</button>
    </div>
</form>

<script>
$(document).ready(function () {
    $('.js-example-basic-multiple').select2();

    $('#buttonSubmit').click(function (e) {
        e.preventDefault();

        var appointmentData = $('#appointmentForm').serialize();

        $.ajax({
            url: '/Schedule/SetAppointment',
            data: appointmentData,
            cache: false,
            'themeSystem': 'bootstrap',
            success: function (results) {
                if (results === 'Ok') {                         
                } else {
                }
            }
        });

        return false;
    });
});
</script>

控制器

public IActionResult SetAppointment(appointments_ALL_v appointments_ALL)
    {
        // submit data to database
    }

模型

public class appointments_ALL_v
    {
        public string appointmentCode { get; set; }
         
        public string[] employees { get; set; }
}

我试图通过这种方法实现的目标是什么？我希望能够使用 serialize 函数，因为它使解析这个表单（它实际上包含超过 50 个输入字段）变得更加容易。

【问题讨论】：

在使用上述方法时，您在为 Select2 传递多个值时遇到了什么确切问题？您是否收到任何错误或警告？
@Deepak-MSFT 所以当我将 employees 属性设为字符串时，只设置了第一个 employees 值。如上所示，我将其更改为字符串数组，但这也不起作用。照原样，它只是变成一个没有值的空数组。

标签： jquery ajax asp.net-core jquery-select2 ajaxform

【解决方案1】：

不确定这是否是最好的方法，但我最终做的是在表单中放置一个隐藏元素，在提交表单时，它将所有选定的选项值作为逗号分隔的字符串。然后控制器可以从序列化的表单数据中获取该值并拆分以获取每个员工。

$.each($('#selectedEmployeeCodes').find(':selected'), function (index, value) {
        eCodes = value.value + ',' + eCodes;
    });

$("#employeeCode").val(eCodes.replace(/,*$/, ""));


var appointmentData = $('#appointmentForm').serialize();

如果有人有更好的解决方案，我很想听听！

【讨论】：