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

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

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