如何使用Select2将下拉框值（含新增标签）传递到Action控制器

ASP.NET Core模型绑定无法将Select2提交的标签字符串（已有标签的ID、新标签的文本）直接映射到List<TagsVm>类型的属性上。因为asp-for="Tags"会生成Tags[0].Id、Tags[1].Id这类带索引的表单字段名，而Select2提交的是多个同名的普通字符串值，格式不匹配导致绑定失败，新标签无法传入Action。

步骤1：修改命令模型，添加字符串数组属性 #

在CreateArticleCommand中新增一个字符串数组，用于接收所有提交的标签值：

public class CreateArticleCommand : IRequest<CommandResult>
{
    public string Title { get; set; }
    public string Description { get; set; }
    public List<TagsVm>? Tags { get; set; }
    // 新增：接收所有提交的标签值（已有标签ID、新标签文本）
    public string[]? TagValues { get; set; }
}

步骤2：修改视图中的select绑定目标 #

将asp-for从Tags改为新增的TagValues，确保表单提交的标签值能被正确接收：

@model CreateArticleCommand
<select asp-for="TagValues" class="js-example-tokenizer form-control" multiple="multiple"
        asp-items="@(new SelectList(Model.Tags,nameof(TagsVm.Id), nameof(TagsVm.Name)))">
</select>

步骤3：在Post Action中处理标签值 #

在提交的Action里，区分已有标签和新标签，将TagValues转换为List<TagsVm>：

[HttpPost]
public async Task<IActionResult> Create(CreateArticleCommand articleCommand)
{
    IActionResult viewResult = View(articleCommand);

    // 处理标签：将TagValues转换为List<TagsVm>
    var processedTags = new List<TagsVm>();
    if (articleCommand.TagValues != null)
    {
        // 获取所有已有标签的ID字符串集合
        var existingTagIds = articleCommand.Tags?.Select(t => t.Id.ToString()) ?? new List<string>();
        
        foreach (var value in articleCommand.TagValues)
        {
            if (existingTagIds.Contains(value))
            {
                // 已有标签：从现有标签中匹配
                var existingTag = articleCommand.Tags?.First(t => t.Id.ToString() == value);
                if (existingTag != null)
                {
                    processedTags.Add(existingTag);
                }
            }
            else
            {
                // 新标签：创建新的TagsVm对象（仅设置Name）
                processedTags.Add(new TagsVm { Name = value });
            }
        }
    }
    // 替换原Tags属性为处理后的结果
    articleCommand.Tags = processedTags;

    var res = await _mediator.Send(articleCommand);
    if (res.Status == ApplicationServiceStatus.Ok)
        viewResult = RedirectToAction(nameof(List));
    return viewResult;
}

步骤4：保留原Select2配置 #

你的JavaScript配置无需修改，确保标签功能正常：

<script>
    $(".js-example-tokenizer").select2({
        tags: true,
        tokenSeparators: [',', ' ']
    })
</script>

这样处理后，既有标签的ID和手动输入的新标签文本都会被正确接收，转换为List<TagsVm>后传入后续业务逻辑。

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