ASP.NET Core DropDownList分组显示异常问题求助

问题原因 #

你当前的代码中，每个选项都创建了新的SelectListGroup实例——哪怕分组名称完全相同，MVC也会将它们识别为不同分组，最终渲染时每个选项都会重复显示分组名。如果只给首个选项设置分组，后续选项因未关联同一个分组实例，自然会失去分组效果。

正确实现方式 #

先提前创建好分组实例，再将同一个实例分配给同组的所有选项：

var group1 = new SelectListGroup { Name = "Group 1" };
var group2 = new SelectListGroup { Name = "Group 2" };
var group3 = new SelectListGroup { Name = "Group 3" };
var group4 = new SelectListGroup { Name = "Group 4" };

var list = new List<SelectListItem>
{
    new SelectListItem { Text = "Option 1", Group = group1 },
    new SelectListItem { Text = "Option 2", Group = group1 },
    new SelectListItem { Text = "Option 3", Group = group2 },
    new SelectListItem { Text = "Option 4", Group = group3 },
    new SelectListItem { Text = "Option 5", Group = group4 },
};

原理说明 #

MVC的DropDownListFor是通过SelectListGroup的对象引用来判断是否属于同一分组的，而非分组名称。复用同一个分组实例，就能让同组选项被归到同一分组下，渲染时只会在组的首个选项上方显示一次分组名。

内容的提问来源于stack exchange，提问作者Craig