如何分割字符串为列表显示？textarea表单列表展示优化问题

嘿，针对你的两个问题，我给你整理了具体的解决办法，都是结合ViewModel场景的实用方案：

问题1：如何将字符串分割为列表形式进行展示？ #

核心思路是先把逗号分隔的字符串分割成字符串数组/列表，再在视图里循环渲染成你想要的格式。具体步骤如下：

步骤1：在ViewModel中处理字符串 #

假设你的ViewModel里有存储原始逗号分隔字符串的属性，我们可以新增一个处理后的列表属性，用来存分割后的元素：

public class RecipeViewModel
{
    // 从表单textarea收集的原始字符串（比如"鸡蛋,面粉,牛奶"）
    public string Ingredients { get; set; }

    // 处理后的食材列表，供视图使用
    public List<string> IngredientList { get; set; }

    // 在构造函数初始化列表
    public RecipeViewModel()
    {
        IngredientList = new List<string>();
    }

    // 编写处理逻辑，分割字符串并清理无效内容
    public void ProcessIngredients()
    {
        if (!string.IsNullOrEmpty(Ingredients))
        {
            // 按逗号分割，移除空元素（避免连续逗号/首尾逗号导致的空项）
            // 同时去掉每个元素前后的空格（处理用户输入"鸡蛋 , 面粉"这类带空格的情况）
            IngredientList = Ingredients.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries)
                                        .Select(ingredient => ingredient.Trim())
                                        .ToList();
        }
    }
}

步骤2：在视图中渲染列表 #

根据你想要的样式，有两种常见实现方式：

方式1：渲染为带项目符号的无序列表

<h3>食材列表</h3>
<ul>
    @foreach (var ingredient in Model.IngredientList)
    {
        <li>@ingredient</li>
    }
</ul>

方式2：仅每个元素单独换行（无列表样式）

如果不需要项目符号，直接用<br>标签实现换行：

<h3>食材</h3>
@foreach (var ingredient in Model.IngredientList)
{
    @ingredient<br />
}

或者用更简洁的String.Join写法（记得做HTML编码防止XSS风险）：

<h3>食材</h3>
@Html.Raw(string.Join("<br />", Model.IngredientList.Select(i => Html.Encode(i))))

问题2：textarea收集的列表数据，详情页如何按逗号分割、去逗号并单独换行？ #

这个场景和问题1的核心逻辑一致，重点是处理用户输入的边界情况（比如多余空格、连续逗号），再在视图里正确渲染换行。

补充几个关键细节：

• 如果是表单提交时处理，可以在Controller里调用ViewModel的处理方法：

[HttpPost]
public IActionResult Create(RecipeViewModel model)
{
    if (ModelState.IsValid)
    {
        model.ProcessIngredients();
        // 后续保存到数据库等逻辑...
        return RedirectToAction("Details", new { id = model.Id });
    }
    return View(model);
}

• 如果是从数据库读取原始逗号分隔字符串，在ViewModel初始化或赋值时执行分割逻辑即可。

这样处理后，详情页就能完美实现每个元素单独显示、无逗号、自动换行的效果啦！

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