Отправка формы с использованием функции 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>

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 получит соответствующие идентификаторы.)

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

Метод действия:

При отправке формы: объект CustomerIdAndBooksIdsViewModel, принимающий только клиентов (идентификатор клиента) и книги (идентификаторы книг), равен нулю?

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

Как решить? Буду очень благодарен.

Answer 1

попробуйте использовать 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>

Answer 2

То, что здесь происходит, находится в viewModel.Books, вы нажимаете как строку, но на действии контроллера он ожидает список целых чисел.

Попробуйте разобрать значения до INT перед отправкой значений, что-то вроде этого:

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