如何在ASP.NET MVC DropDownList中显示多行多属性内容？

你尝试用\n或Environment.NewLine在DropDownList的选项中换行显示多个属性但未生效，原因是HTML的<option>标签会忽略文本中的换行符，浏览器只会将其解析为普通空格。以下是两种可行的解决思路：

方案一：用分隔符拼接字段（无需换行） #

如果仅需区分多个属性、不需要真正换行，可以用分隔符（如竖线、横线）将字段拼接，示例代码如下：

后端逻辑：

var ground = db.database
    .Select(s => new
    {
        Text = $"{s.Adress} | {s.Home} | {s.Number}",
        Value = s.ID
    })
    .ToList();

视图中渲染DropDownList：

@Html.DropDownList("GroundId", new SelectList(Model.GroundList, "Value", "Text"), "请选择")

方案二：实现选项内换行（需自定义组件） #

原生HTML的<select>无法实现选项内换行，这是浏览器的默认限制。如果必须换行显示多个属性，需要使用第三方下拉组件（如Bootstrap Select）模拟下拉框，支持解析HTML内容：

1. 后端拼接带HTML换行标签的文本：

var ground = db.database
    .Select(s => new
    {
        Text = $"{s.Adress}<br>{s.Home}<br>{s.Number}",
        Value = s.ID
    })
    .ToList();

2. 视图中使用组件并启用HTML解析：

<select id="GroundId" class="selectpicker" data-html="true">
    @foreach (var item in Model.GroundList)
    {
        <option value="@item.Value">@Html.Raw(item.Text)</option>
    }
</select>

3. 引入依赖资源并初始化组件：

<!-- 引入CSS资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

<!-- 引入JS资源 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

<script>
    $('.selectpicker').selectpicker();
</script>

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