How To pass the modified data from dual listbox to controller?

Question

I have created a form with two listboxes in which it is possible to move the items from one listbox into another.

The view also loads correctly, but I haven't figured out how to send the modified listbox data back to controller.

The view code is the following:

<script>
$(function() {
    $(document)
      .on("click", "#MoveRight", function() {
          $("#SelectLeft :selected").remove().appendTo("#SelectRight");

      })
      .on("click","#MoveLeft", function() {
          $("#SelectRight :selected").remove().appendTo("#SelectLeft");
      });
});

  @Html.Hidden("RedirectTo", Url.Action("UserManagement", "Admin"));
    <h2>User</h2>

            <div class="container">
                <form role="form">

        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="SelectLeft">User Access:</label>
                        <select class="form-control" id="SelectLeft" multiple="multiple" data-bind="options : ownership, selectedOptions:ownership, optionsText:'FirstName'">
                        </select>
                    </div>
                </div>   
                <div class="col-md-2">

                        <div class="btn-group-vertical">
                            <input class="btn btn-primary" id="MoveLeft" type="button" value=" << " />
                            <input class="btn btn-primary" id="MoveRight" type="button" value=" >> " />       
                        </div>

                </div>
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="SelectRight">Owners:</label>
                        <select class="form-control" multiple="multiple" id="SelectRight" multiple="multiple" data-bind="options : availableOwners, selectedOptions:availableOwners, optionsText:'FirstName'">
                        </select>
                    </div>
                </div>

            </div>                
        </div>
    </form>
</div>

<script>
    var data=@(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
    var selectedOwners = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.AccessOwners));
    var availableOwners = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Owners));

        function viewModel() {
            this.username=ko.observable(data.Username);
            this.password=ko.observable(data.Password);
            this.email=ko.observable(data.Email);
            this.isActive=ko.observable(data.IsActive);
            this.userId = ko.observable(data.UserId);
            this.ownership=ko.observableArray(selectedOwners);
            this.availableOwners = ko.observableArray(availableOwners);

            this.submit = function()
            {
                $.ajax({
                    url: '@Url.Action("UserSave", "Admin")',
                    type: 'POST',
                    data: ko.toJSON(this),
                    contentType: 'application/json',
                });
                window.location.href = url;
                return false;
            }

            this.cancel = function()
            {
                window.location.href = url;
                return false;
            }
        };
        ko.applyBindings(new viewModel());
        var url = $("#RedirectTo").val();

I would be very thankful if anyone could suggest the way to pass all the selected options back to controller by populating the data with modified lists when the submit function is executed.

Thanks!

Answer 1

Before form submission save one side items values in an hidden input element. (comma separated values of listbox items.) The value of hidden element is sent to server by submitting the form. In controller you can do the next things.