javascript - 如何将修改后的数据从双列表框传递到 Controller ？

Question

我创建了一个包含两个列表框的表单，可以将项目从一个列表框移动到另一个列表框。

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

查看代码如下:

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

如果有人能建议在执行提交函数时使用修改后的列表填充数据来将所有选定选项传递回 Controller 的方法，我将非常感激。

谢谢!

Answer 1

在表单提交之前，将一侧项目的值保存在隐藏的输入元素中。 (列表框项目的逗号分隔值。)隐藏元素的值通过提交表单发送到服务器。在 Controller 中，您可以执行接下来的操作。