Submitting form using jQuery ajax function Problem?

Question

I have a simple form containing two fields When i submit the form using a jQuery ajax function the server only receive the first field data but not the second field data ?

First Field: Dropdownlist (single value selection.)

Second Field: Dropdownlist (Multi value selection.)

Here is my Code:

Form:

<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 Code:

@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: (When User click submitting the form the target viewModel will recieve the appropriate Id's.)

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

Action Method:

When submitting form: the CustomerIdAndBooksIdsViewModel Object receiving only Customers(customer Id) and the Books(books Ids) is null ?

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

How to Solve it ?I Shall be very thanksful.

Answer 1

try using 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

What is happening here is in viewModel.Books, you are pushing as string but on controller's Action it is expecting an list of int.

Try parsing the values to INT before posting the values, something like this:

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