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>

jQuery代码：

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

ViewModel：（当用户单击提交表单时，目标viewModel将接收适当的ID。）

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

操作方法：

提交表单时：仅接收客户（客户ID）和书籍（书ID）的CustomerIdAndBooksIdsViewModel对象为null吗？

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

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

Answer 1

这里发生的事情是在viewModel.Books中，您将其作为字符串推送，但是在控制器的Action上它期望一个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>

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

2 个答案: