时间戳

首页 > 解决方案 > 使用 JQuery 根据 Ajax 结果更新列表框

jquery - 使用 JQuery 根据 Ajax 结果更新列表框

问题描述

我无法让我的 2 个列表框根据需要工作。我正在使用 asp.net MVC5。我在模态表单上有 2 个多选列表框（和一些其他控件）。

Listbox1 包含许多可供选择的项目，用户在列表中选择一个或多个项目并单击按钮将它们“移动”到 Listbox2。

单击按钮时，我通过 Ajax 提交整个表单，然后“移动”方法中的项目。现在 Listbox2 应该包含用户选择的项目，而 Listbox1 应该保留用户没有选择的项目。

该方法很好，因为我可以移动数据库中的数据，我的问题是如何让列表框在之后显示正确的数据。

这些是我必须提供给列表框的模型属性：-

List<Int64> List1 
List<SelectListItem> List1Items

List<Int64> List2 
List<SelectListItem> List2Items

在每种情况下，都有一个用于保存所选项目的列表和一个用于 ListBoxFor 显示的列表。

列表框设置如下：-

@Html.ListBoxFor(i => Model.List1, Model.List1Items)
@Html.ListBoxFor(i => Model.List2, Model.List2Items)

我注意到当我提交表单时，List1Items 和 List2Items 不会传递给控制器​​。这没什么大不了的，因为我可以在方法中对它们进行排序并将它们传回。

当模型传回 Ajax 函数时，我基本上需要知道如何使用 jquery 更新 2 个列表框，如下所示：-

$.ajax
({
    url: '@Url.Action("MoveItems", "MyController")',
    method: 'POST',
    cache: false,
    data: $("#MyForm").serialize(),
    success: function (retValue) {
        if (retValue.Result === "Success") {

            // What do I need here ?
            // Model is passed back as 'retValue.Data'

            alert(retValue.SuccessMessage);
        }
        else if (retValue.Result === "Error") {
             alert(retValue.ErrorMessage);
        }
    },
    failure: function () {
        alert('Unknown Server Error');
    }
});

希望有人能指出我正确的方向。

标签： jqueryajaxasp.net-mvc

解决方案

试试下面的一个。

<script>
  var lst1 = $("[id*=List1]");
  lst1.empty();
  $.each(retValue.Data, function () 
  {
     lst1.append($("<option></option>").val(this['Value']).html(this['Text']));
  });

</script>

推荐阅读