通过 ASP.NET Core 3.0 MVC 中的 ViewData 多选发送数据

Question

我正在尝试创建多选DropDownList ，它应该从数据库中加载数据。 第一次运行时应选择所有字段。 我想发回 controller 参数List<string> selectedStatus ，在那里做一些逻辑并通过ViewData["Status"]发回视图。 基于此参数，我想填充多选DropDownList ...我正在使用 jQuery select2。

在第一次运行时， DropDownList中没有任何内容被选中。 当我 select 多个选项并发送到 controller 时，第一个值只会出现在DropDownList中。

我有带有以下代码的 Index 方法

        var status = new List<SelectListItem>();

        if (!selectedStatus.Any())
        {
            status = (from t in _context.Status
                      select new SelectListItem()
                      {
                          Text = t.Status,
                          Value = t.StatusId.ToString(),
                          Selected = true
                      }).OrderBy(t => t.Text)
                         .ToList();
        }
        else
        {
            status = (from t in _context.Status
                      select new SelectListItem()
                      {
                          Text = t.Status,
                          Value = t.StatusId.ToString(),
                          Selected = false
                      }).OrderBy(t => t.Text)
                         .ToList();

            foreach (var item in status)
            {
                if (selectedStatus.Any(s => s.Contains(item.Value)) == true)
                {
                    item.Selected = true;

                }
            }

        }

        ViewData["Status"] = status;

在索引视图中

<form asp-controller="Home" asp-action="Index" method="get">
    <div class="input-group">
        @Html.DropDownList("selectedStatus", new SelectList((IEnumerable<SelectListItem>)ViewData["Status"], "Value", "Text"), htmlAttributes: new { @class = "form-control", multiple = "multiple", id = "select" })
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit">Submit</button>
            <a asp-action="Index" class="btn   btn-outline-secondary">Cancel</a>
        </div>
    </div>
</form>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");
        <script>
                $('select').select2({
                    theme: 'bootstrap4',
                    multiple: true,
                });
        </script>
    }
}

我究竟做错了什么？ 那里缺少什么？

谢谢你。

Answer 1

在第一次运行时，它是空的，因为您的selectedStatus.Any()前面有一个不等于字符，或者您在第一个 if 中意外更改了 true false，但更简单的解决方案是

 var status  = (from t in _context.Status
                      select new SelectListItem()
                      {
                          Text = t.Status,
                          Value = t.StatusId.ToString(),
                          Selected = !selectedStatus.Any()
                      }).OrderBy(t => t.Text)
                         .ToList();

没有 if 查询。

第二件事是你应该真正使用 ViewModel 而不是 ViewData 或类似的东西来处理这么多的数据。

Answer 2

正如 Fabian Kamp 建议的那样，您应该使用视图模型来包含 Status 和 selectedStatus。 这是一个使用js选择所有字段的解决方法，您可以参考：

视图模型

public class Status
{
    public int StatusId { get; set; }
    public string StatusName { get; set; }
}

public class StatusVM
{
    public List<string> selectedStatus { get; set; }
    public List<SelectListItem> Status { get; set; }
}

Controller

 public IActionResult MultiSelectDropDownList(List<string> selectedStatus)
    {
        var model = new StatusVM();

        if (!selectedStatus.Any())
        {
            model.Status = (from t in _context.Status
                      select new SelectListItem()
                      {
                          Text = t.StatusName,
                          Value = t.StatusId.ToString(),
                      }).OrderBy(t => t.Text)
                         .ToList();
            model.selectedStatus = _context.Status.Select(s => s.StatusId.ToString()).ToList();
        }
        else
        {
            model.Status = (from t in _context.Status
                      select new SelectListItem()
                      {
                          Text = t.StatusName,
                          Value = t.StatusId.ToString(),
                      }).OrderBy(t => t.Text)
                         .ToList();
            model.selectedStatus = new List<string>();
            foreach (var item in model.Status)
            {
                if (selectedStatus.Any(s => s.Contains(item.Value)) == true)
                {
                    model.selectedStatus.Add(item.Value);
                }
            }
        }
        return View(model);
    }

看法

@model Demo1.Models.StatusVM

<form asp-controller="Home" asp-action="MultiSelectDropDownList" method="get">
  <div class="input-group">
    @Html.DropDownListFor(m => m.selectedStatus, new SelectList((IEnumerable<SelectListItem>)Model.Status, "Value", "Text", Model.selectedStatus), htmlAttributes: new { @class = "js-example-theme-multiple", multiple = "multiple", id = "select" })
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="submit">Submit</button>
        <a asp-action="Index" class="btn   btn-outline-secondary">Cancel</a>
    </div>
  </div>
</form>

@section Scripts {
  @{await Html.RenderPartialAsync("_ValidationScriptsPartial");

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <script>
        var stringArray = @Html.Raw(Json.Serialize(Model.selectedStatus));

        $(document).ready(function () {

            $("select").select2({
                theme: "classic",
                multiple: true,
          });
          $("select").val(stringArray).trigger('change');
        });

    </script>
  }
}

结果

参考： 使用 jQuery select2 设置多个值