分组和未分组的 SelectList

Question

我在一个仓库中返回用于两个下拉框（razor视图中的父级和子级）的数据。当从父级下拉框中选择一个父级时，子级下拉框会过滤出仅属于所选父级的子级。如果没有父级选择时，子级下拉框则显示所有子级按父级分组的情况。这种做法效果很好，但是当存在分组项目时，要在列表顶部添加一个“选择子项”的选项以及设置所选项就变得有些复杂。

这是我的仓库代码：

Children = await results.OrderBy(m => m.ParentId).ThenBy(m => m.Date)
    .Select(m => new SelectListItem {
        Value = m.Id.ToString(),
        Text = m.Date.ToString() + ": " + m.Title.ToString(),
        Group = new SelectListGroup { Name = m.Parent.LastName }
    }).ToListAsync();

var tip = new SelectListItem() { 
    Value = null, 
    Text = "Select Child", 
    Group = new SelectListGroup { Name = "Default" } 
};
Children.Insert(0, tip);

return new SelectList(Children, "Value", "Text", null, "Group.Name");

这段代码能够工作，但它将提示项放入了一个名为“Default”的分组中，位于列表顶部，虽然不是大问题，但实际上HTML允许在具有分组选项的select元素中同时存在一些未分组的选项。

当我创建提示项为一个新的SelectListItem但不包含分组时：

var tip = new SelectListItem() { Value = null, Text = "Select Meeting" };

在Razor视图代码中使用@Html.DropDownListFor()时，会抛出空引用异常。我不确定问题是否出在HTML辅助方法上，或者我尝试做的事情是否不受服务器端SelectList类的支持。

我想要得到的结果是在服务器端（控制器和视图）构建出来的如下所示：

Martin Ullrich · Answer

基于您的场景和描述，您提到在Razor视图中使用@Html.DropDownFor()时遇到了空引用异常，并不确定问题是出在HTML辅助方法上还是您试图做的操作超出了服务器端SelectList类的功能范围。

在这种情况下，您可以考虑直接在视图中使用标签，并通过循环遍历ViewModel中的分组和项目来手动构建和元素，而不是使用@Html.DropDownFor()。这样，您对HTML输出有更多控制权，可以确保optgroup标签正确显示。

另外，尽管可以创建自定义标签助手，但上述方法更为便捷易行。下面让我们实际演示如何实现您的需求。

假设我们使用的示例模型如下：

public class Meeting
{
    public int Id { get; set; }
    public string Title { get; set; }
    public DateTime Date { get; set; }
    public Parent Parent { get; set; }
}

public class Parent
{
    public int Id { get; set; }
    public string LastName { get; set; }
}

public class ViewModel
{
    public int? SelectedChildId { get; set; }
    public List Children { get; set; }
}

控制器部分的代码可以像这样组织：

public IActionResult Index()
{
    // 假设这是从数据库获取的会议数据
    var meetings = new List
    {
        // 示例数据...
    };

    var results = meetings.OrderBy(m => m.Parent.Id).ThenBy(m => m.Date)
                  .Select(m => new SelectListItem
                  {
                      Value = m.Id.ToString(),
                      Text = m.Date.ToString("yyyy-MM-dd") + ": " + m.Title,
                      Group = new SelectListGroup { Name = m.Parent?.LastName }
                  }).ToList();

    var tip = new SelectListItem() { Value = "", Text = "Select Child" };
    results.Insert(0, tip);

    var viewModel = new ViewModel
    {
        Children = results
    };

    // 将分组后的SelectListItem传递到视图
    ViewBag.Children = viewModel.Children;

    return View(viewModel);
}

然后，在视图文件中手动构建下拉框：

@model ProjectName.Models.ViewModel

通过这种方式，您可以获得与您所需类似的结构化下拉框，其中包含了按照父级分组的子项以及顶部的“选择子项”提示项。参见附带的输出截图和GIF动画展示。

注意：请参考官方文档，了解更多关于ASP.NET Core中标签的详情。

Uri · Answer

基于@md-farid-uddin-kiron的答案，我在视图中手动实现了select元素：

在仓库（Repository）中，向SelectList集合添加了一个提示值，其分组名称为空字符串（这导致group.key==null而非group.key==""）。我没有看到任何SelectList构造函数接受如上述答案所示的参数，所以除非进行了未提及的修改，否则我不确定该答案给出的代码是如何工作的。

以下是支持上述视图的仓库代码，其中使用了与所引用答案相同的硬编码值：

var testresults = new List
{
    // 示例数据...
};

Children = testresults.OrderBy(m => m.ProjectId).ThenBy(m => m.Date)
    .Select(m => new SelectListItem
    {
        Value = m.Id.ToString(),
        Text = m.Date.ToString("yyyy-MM-dd") + ": " + m.Title.ToString(),
        Group = new SelectListGroup { Name = m.Project.Code }
    }).ToList(); // Async();

var tip = new SelectListItem() { Value = null, Text = "Select Child",
    Group = new SelectListGroup { Name = "" } };
Children.Insert(0, tip);

return new SelectList(Children, "Value", "Text", null, "Group.Name");
// 这是ASP.NET Core 8.0和7.0（可能包括更多版本）的构造函数

此问题的一个难点在于提示文本，需要这个提示项在一个分组选择列表中不包含在标签内显示。如果为提示项创建的SelectListItem没有分组，则DropDownFor和GroupBy(x => x.Group?.Name)会抛出异常。因此，为了让它按照我的问题中所示的方式工作，我不得不为提示项提供一个分组（string.Empty），然后在视图代码中过滤它们，使其不在标签内显示。感谢前面的回答提供了这种方法的启示。