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

Question

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

第一次运行时，DropDownList 中没有任何内容被选中。 当我选择多个选项并发送到控制器时，第一个值只会出现在 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

正如 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; }
}

控制器

 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>
  }
}

结果

参考：Setting multiple values using jQuery select2

Answer 2

在第一次运行时它是空的，因为您的 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 或类似的东西来处理这么多的数据。