使用 jQuery ajax 函数提交表单的问题

Question

>我有一个简单的表单，包含两个字段当我使用 jQuery ajax 函数提交表单时，服务器只接收第一个字段数据，而不接收第二个字段数据？

第一个字段：下拉列表（单值选择。

第二个字段：下拉列表（多值选择。

这是我的代码：

形式：

<form id="formId">
    <div class="form-group">
        <label>Customer</label>
        @Html.DropDownListFor(m => m.Customers, new SelectList(Model.Customers, "id", "name"), "Select Customer", new { @class = "form-control", id = "customer_Id" })
    </div>
    <div class="form-group">
        <label>Book</label>
        @Html.DropDownListFor(m => m.Books, new MultiSelectList(Model.Books, "id", "name"), "Select Books", new { multiple = "true", @class = "form-control", id = "Book_Ids" })
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

j查询代码：

@section scripts{
    @Scripts.Render("~/bundles/jquery");
    <script type="text/javascript">
        jQuery(document).ready(function () {
            var viewModel = {
                Customers: "",
                Books: []
            };
            
            // Loading data to viewModel.
            $("#btn_Test").on("click", function () {
                var selectedCustomerId = $("#customer_Id").val();
                var selectedBooksIds = $("#Books_Ids").val();
                viewModel.Customers = selectedCustomerId;
                for (var i = 0; i < selectedBooksIds .length; i++) {
                    viewModel.Books.push(parseInt(selectedBooksIds[i]));//Added parseInt to parse value to int
                }
            });
            // Submit Form.
            $("#formId").submit(function (e) {
                e.preventDefault();
                jQuery.ajax({
                    url: "/RecordCustomerAndBooksIds/Create",
                    method: "post",
                    data: viewModel,
                    success: function () { alert("Done."); },
                    fail: function () { alert("Failed."); }
                });
            })
        });
    </script>
}

视图模型

：（当用户单击提交表单时，目标视图模型将收到相应的 ID。

public class CustomerIdAndBooksIdsViewModel
{
   public int Customers { get; set; }
   public List<int> Books { get; set; }
}

操作方法：

提交表单时：仅接收客户（客户 ID）和书籍（书籍 ID）的 CustomerId和书籍 IdsViewModel 对象为空？

public ActionResult Create(CustomerIdAndBooksIdsViewModel ids) //
{
   //...
}

如何解决？我将非常感激。

Answer 1

这里

发生的事情是在viewModel.Books中，您正在作为字符串推送，但在控制器的操作上，它需要一个 int 列表。

在发布值之前，尝试将值解析为 INT，如下所示：

for (var i = 0; i < selectedBooksIds.length; i++) 
{
   //Added parseInt to parse value to int
   viewModel.Books.push(parseInt(selectedBooksIds[i]));
}

Answer 2

尝试使用select2

<script>
$(document).ready(function () {
    //The url we will send our get request to
    var booksUrl = '@Url.Action("GetBooks", "Home")';
    $('#books').select2(
    {
        placeholder: 'Select Books',
        multiple: true,
        ajax: {
            //The url of the json service
            url: booksUrl,
            dataType: 'jsonp'
            }
    }
  });
 </script>

<form id="formId">
<div class="form-group">
    <label>Customer</label>
    @Html.DropDownListFor(m => m.Customers, new SelectList(Model.Customers, "id", "name"), "Select Customer", new { @class = "form-control", id = "customer_Id" })
</div>
<div class="form-group">
    <label>Book</label>
    @Html.TextBoxFor(m => m.Books, new { id = "Book_Ids" }) 
</div>
<button type="submit" class="btn btn-primary">Submit</button>