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

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

本文关键字:列表 控制器 修改 数据      更新时间:2023-09-26

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

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

视图代码如下:

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

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

谢谢!

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