如何将修改后的数据从双列表框传递到控制器？

Question

我创建了一个带有两个列表框的表单，可以在其中将项目从一个列表框移动到另一个列表框。

视图也可以正确加载，但我还没有弄清楚如何将修改后的列表框数据发送回控制器。

查看代码如下：

<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();

如果有人可以建议在执行提交功能时通过使用修改后的列表填充数据来将所有选定选项传递回控制器的方法，我将不胜感激。

谢谢！

Answer 1

在提交表单之前，将一侧的项目值保存在隐藏的输入元素中。（列表框项目的逗号分隔值。）隐藏元素的值通过提交表单发送到服务器。在控制器中你可以做接下来的事情。

如何将修改后的数据从双列表框传递到控制器？

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

javascript

asp.net-mvc