如何在视图中实现列表列内容按换行展示？

嘿，我来帮你搞定这个DataTable列换行的问题～先给你提个关键的小问题：你的Linq查询里的Where条件写错啦！o.id_validation_results == o.id_validation_results会返回所有的ValidationSpecifics数据，应该改成o.id_validation_results == id_validation_results，不然你的ListMatches数据肯定不对，先把这个坑填上！

接下来咱们分两种方案来实现你要的“逗号分隔+换行”效果，你可以根据需求选：

方案一：后端处理（推荐，兼容性拉满） #

后端直接把列表转成带换行标记的字符串，前端直接渲染就行，不用纠结浏览器兼容性：

修正后的后端方法 #

internal string GetListTitles(long id_validation_results) { 
    using(var db = new fabitrack_validationEntities(ValidationConnString)) { 
        // 修正Where条件，匹配传入的id参数
        var titles = db.ValidationSpecifics
            .Where(o => o.id_validation_results == id_validation_results) 
            .Select(o => o.title)
            .ToList(); 
        // 用<br>分隔每个标题，前端渲染时会自动换行
        return string.Join(",<br>", titles);
    }
}

前端页面调整 #

因为返回的是HTML字符串，要用@Html.Raw()避免<br>被转义成文本：

<td id="listcol">@Html.Raw(o.ListMatches)</td>

这样后端处理完，前端直接显示成逗号分隔且每个项换行的效果，逻辑简单，所有浏览器都能正常显示。

方案二：前端CSS/元素渲染（样式更灵活） #

如果你不想改后端逻辑，或者需要更灵活的样式控制，可以把列表项拆成单独的HTML元素，再用CSS布局：

后端保持返回List #

先把Linq的Where条件修正，还是返回List<string>：

internal List<string> GetListTitles(long id_validation_results) { 
    using(var db = new fabitrack_validationEntities(ValidationConnString)) { 
        return db.ValidationSpecifics
            .Where(o => o.id_validation_results == id_validation_results) 
            .Select(o => o.title)
            .ToList(); 
    }
}

前端循环渲染列表项 #

在里循环渲染每个标题，自动换行：

<td id="listcol">
    @foreach(var match in o.ListMatches) {
        <div>@match,</div>
    }
</td>

配套CSS调整 #

可以给每个项加一点点样式，让排版更美观：

#listcol div {
    display: inline-block; /* 可选：如果想让短项并排，超过宽度再换行 */
    /* 或者用block让每个项单独一行 */
    margin-right: 8px;
    margin-bottom: 4px;
}

如果还是想用逗号分隔+自动换行，也可以用white-space: pre-line，把后端返回的字符串改成用换行符\n分隔：

return string.Join("\n", titles);

然后CSS：

#listcol {
    white-space: pre-line;
    line-height: 1.5; /* 调整行高，让排版更舒服 */
}

两种方案对比 #

• 后端处理：优点是兼容性好，前端代码简洁，不需要依赖前端技术；缺点是样式调整需要改后端。
• 前端处理：优点是样式灵活，能快速调整布局（比如响应式适配）；缺点是需要前端循环渲染，稍微增加一点前端代码量。

你可以根据自己的项目需求选合适的方案～

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