如何将HTML中逗号分隔文本输入转为自定义模型列表并写入SQL表

1. 修改视图模型（CreateDepartmentViewModel） #

原视图模型直接使用List<Person>无法接收文本框的逗号分隔输入，需新增字符串属性专门接收人员名字文本：

public class CreateDepartmentViewModel
{
    public string DepartmentName { get; set; }
    // 用于接收逗号分隔的人员名字
    public string PersonNames { get; set; }
}

2. 更新CSHTML视图 #

将输入框绑定到新增的PersonNames属性，同时优化表单路径和提示信息：

@model BTAnCaWeb.ViewModels.CreateDepartmentViewModel
<div class="container mb-3">
    <div class="row pt-4">
        <div class="col-6">
            <h2 class="text-primary">
                Thêm phòng ban mới
            </h2>
        </div>
    </div>
</div>
<form method="post" asp-action="Create">
    <div class="mb-3">
        <label for="DepName" class="form-label">Department Name</label>
        <input type="text" class="form-control" asp-for="DepartmentName" id="DepName">
        <span asp-validation-for="DepartmentName" class="text-danger"></span>
    </div>
    <div class="mb-3">
        <label for="PersonNames" class="form-label">People in department (逗号分隔名字)</label>
        <input type="text" class="form-control" asp-for="PersonNames" id="PersonNames" placeholder="例如：张三,李四,王五" />
        <span asp-validation-for="PersonNames" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. 实现控制器POST处理逻辑 #

在部门控制器中编写提交处理代码，完成字符串分割、实体创建与数据库保存：

public class DepartmentController : Controller
{
    private readonly ApplicationDbContext _context;

    public DepartmentController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(CreateDepartmentViewModel model)
    {
        if (ModelState.IsValid)
        {
            // 创建新部门实体
            var department = new Department
            {
                DepartmentId = Guid.NewGuid().ToString(),
                DepartmentName = model.DepartmentName,
                Persons = new List<Person>()
            };

            // 处理逗号分隔的人员名字，转换为Person列表
            if (!string.IsNullOrWhiteSpace(model.PersonNames))
            {
                var names = model.PersonNames.Split(',')
                                             .Select(name => name.Trim())
                                             .Where(name => !string.IsNullOrWhiteSpace(name));

                foreach (var name in names)
                {
                    var person = new Person
                    {
                        PersonId = Guid.NewGuid().ToString(),
                        Name = name,
                        DepartmentId = department.DepartmentId // 关联部门ID
                    };
                    department.Persons.Add(person);
                }
            }

            // 批量保存部门与人员到数据库
            _context.Departments.Add(department);
            await _context.SaveChangesAsync();

            return RedirectToAction(nameof(Index));
        }

        // 验证失败时返回原视图
        return View(model);
    }
}

4. 可选：添加模型验证 #

为视图模型属性添加验证特性，提升用户体验：

public class CreateDepartmentViewModel
{
    [Required(ErrorMessage = "请输入部门名称")]
    public string DepartmentName { get; set; }

    [Required(ErrorMessage = "请输入人员名字（逗号分隔）")]
    public string PersonNames { get; set; }
}

关键说明 #

• ID生成：使用Guid.NewGuid().ToString()保证实体ID唯一性，可根据业务需求替换为自增ID或自定义编码规则。
• 字符串处理：分割后执行Trim()去除空格、过滤空字符串，避免创建无效的Person实体。
• EF Core关联：因Department与Person为一对多关系，添加Department时EF Core会自动级联保存关联的Persons（需确保DbContext关系配置正确）。

内容的提问来源于stack exchange，提问作者Trung Đặng Đức