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.

Is this a typo in the question? viewModel.Books*s*.push(selectedBooksIds[i]); — Peter
– Peter, Commented Jan 24, 2019 at 12:19
@Peter Sorry for it..it was happen during editing question... — Rehan Shah
– Rehan Shah, Commented Jan 24, 2019 at 12:21
have you tried using an array of int in the viewmodel instead of a list? (int[] Books {get; set;}) the binding on a mvc can be very picky when it comes to what it will bind. — J.Doe
– J.Doe, Commented Jan 24, 2019 at 14:30

Rehan Shah · Accepted Answer · 2019-01-24 13:19:11Z

1

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]));
}

edited Jan 24, 2019 at 13:19

Rehan Shah

1,64716 silver badges33 bronze badges

answered Jan 24, 2019 at 12:36

vndpal

7678 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rehan Shah Over a year ago

ViewModel still receives a null value for Books.

Josue Martinez · Accepted Answer · 2019-01-24 13:55:09Z

0

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>

edited Jan 24, 2019 at 13:55

answered Jan 24, 2019 at 13:48

Josue Martinez

4365 silver badges14 bronze badges

2 Comments

Rehan Shah Over a year ago

In my case ... in the second dropdownlist i am retreiving All Book list from a viewModel....in your case how to do that ?

Josue Martinez Over a year ago

The official select2 site is here: ivaynberg.github.io/select2 You should request the list from a method that will give you the list of objects. Request from inside select2 using ajax option. In your back end create the method called. I have updated the answer for you

Collectives™ on Stack Overflow

Submitting form using jQuery ajax function Problem?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related