如何将绑定到List<string>的textarea内容按行转为列表元素？

这个问题我之前也碰到过，其实核心就是要把textarea的换行字符串拆分成列表元素，不同的技术栈有不同的实现方式，我给你整理几种常用的方案：

ASP.NET MVC/Razor Pages 方案 #

方法1：模型属性Setter自动处理 #

直接在模型的属性setter里做拆分，简单直接，适合单个模型的场景：

public class YourModel
{
    private List<string> _contentLines = new List<string>();

    public List<string> ContentLines
    {
        get => _contentLines;
        set
        {
            // 处理textarea绑定过来的单个长字符串
            if (value?.Count == 1 && !string.IsNullOrWhiteSpace(value[0]))
            {
                // 兼容不同系统的换行符，同时可选择移除空行
                _contentLines = value[0]
                    .Split(new[] { "\r\n", "\r", "\n" }, StringSplitOptions.RemoveEmptyEntries)
                    .ToList();
            }
            else
            {
                _contentLines = value ?? new List<string>();
            }
        }
    }
}

方法2：自定义模型绑定器（更通用） #

如果多个模型都需要这个功能，自定义绑定器更高效，复用性强：

public class ListStringTextareaBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
            throw new ArgumentNullException(nameof(bindingContext));

        var inputValue = bindingContext.ValueProvider.GetValue(bindingContext.ModelName).FirstValue;
        
        if (string.IsNullOrWhiteSpace(inputValue))
        {
            bindingContext.Result = ModelBindingResult.Success(new List<string>());
            return Task.CompletedTask;
        }

        var lines = inputValue
            .Split(new[] { "\r\n", "\r", "\n" }, StringSplitOptions.RemoveEmptyEntries)
            .ToList();
            
        bindingContext.Result = ModelBindingResult.Success(lines);
        return Task.CompletedTask;
    }
}

然后在模型属性上标记绑定器即可：

[ModelBinder(BinderType = typeof(ListStringTextareaBinder))]
public List<string> ContentLines { get; set; } = new List<string>();

Blazor 方案 #

Blazor里可以通过中间属性做双向绑定的转换，完美适配双向绑定场景：

<textarea @bind="TextareaContent" @bind:event="oninput" rows="10"></textarea>

@code {
    [Parameter]
    public List<string> ContentLines { get; set; } = new List<string>();

    // 中间属性，负责textarea字符串和List的转换
    private string TextareaContent
    {
        get => string.Join(Environment.NewLine, ContentLines);
        set
        {
            ContentLines = value?
                .Split(new[] { "\r\n", "\r", "\n" }, StringSplitOptions.RemoveEmptyEntries)
                .ToList() ?? new List<string>();
        }
    }
}

纯前端+后端AJAX方案 #

如果是用原生JS或Vue/React等前端框架提交，可以前端先拆分再提交，后端直接接收数组：

// 获取textarea内容
const textarea = document.querySelector('#your-textarea');
const rawContent = textarea.value;

// 拆分并过滤空行（不需要过滤的话去掉filter即可）
const lineList = rawContent.split(/\r?\n/).filter(line => line.trim() !== '');

// 提交到后端（示例用fetch）
fetch('/your-api-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ contentLines: lineList })
});

后端直接接收List<string> contentLines即可自动绑定。

注意事项 #

• 换行符兼容：一定要同时处理\r\n（Windows）和\n（Linux/macOS）的情况，避免拆分不彻底
• 空行处理：如果需要保留空行，把StringSplitOptions.RemoveEmptyEntries去掉，或者前端过滤逻辑改成line => true

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