How to send selected values to viewModel from multiselect (Kendo MultiSelect)

Question

I'm using Kendo MultiSelect in my mvc5 project. So I have a View with multiselect:

@model Library.ViewModels.Models.BookViewModel

@{
    ViewBag.Title = "Edit";
}
<script>
    $(document).ready(function () {
        $("#multiselect").kendoMultiSelect({
            placeholder: "--Select Public Houses--",
            dataTextField: "PublicHouseName",
            dataValueField: "PublicHouseId",
            autoBind: true,
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/book/getallpublichouses"
                    }
                }
            }
        });
    });
</script>

And I have 2 viewModels:

public class BookViewModel
    {
        public int BookId { get; set; }

        public string Name { get; set; }

        public string AuthorName { get; set; }

        public int YearOfPublishing { get; set; }

        public  ICollection<PublicHouseViewModel> PublicHouses { get; set; }

    }



public class PublicHouseViewModel
    {
        public int PublicHouseId { get; set; }

        public string PublicHouseName { get; set; }

        public string Country { get; set; }

        public  ICollection<BookViewModel> Books { get; set; }
    }

In my Kendo MultiSelect a get all Public Houses from Book controller in JSON format. Next I selected some values:

So, how can I pass this selected values in public ICollection<PublicHouseViewModel> PublicHouses { get; set; } property in BookViewModel ?

Create your list box using @Html.ListBoxFor(m => m.PubHouses, new SelectList(Model.PublicHouses, "PublicHouseId", "PublicHouseName"), "--Select Public Houses--") and then the script becomes just $("#PubHouses").kendoMultiSelect(); - no unnecessary ajax call is required. (although your view model should contain a IEnumerable<SelectListItem> PubHouses property, not ICollection<PublicHouseViewModel> PubHouses) — user3559349
I need to save my selected values in multiselect like a list of PublicHouseViewModel in BookViewModel — Michael Kostiuchenko
The code I have shown you will bind correctly to your model - i.e. in the POST method, PubHouses will contain the values of the selected options! And you cannot get back a list of PublicHouseViewModel - a <select multiple> posts back an array of simple values - the values of the selected options, not a collection of complex objects. — user3559349
Make sure the names of the inputs are the same as the VM BookViewModel for good binding, i can't see the html and the controller, it is a binding problem no kendo or VM only — Jordi Jordi

Dzanan Begovic Dzanan Begovic · Accepted Answer · 2018-03-28T08:15:03

You can use:

public int[] PublicHouses { get; set; }

instead of:

 public  ICollection<PublicHouseViewModel> PublicHouses { get; set; }

Or you can create a new field in BookViewModel only for posting. When you are posting values from kendoMultiSelect, he posts only "dataValueField". After you post only id's you can do the rest of the logic in POST action.

It depends how you implemented your POST action and also on the relationship between two tables: Is it 1...N, or N....N.

How to send selected values to viewModel from multiselect (Kendo MultiSelect)

1 Answers