如何在EmployeeInfo的Razor视图中添加EmergencyInfo输入框？

完全可以在同一页面实现员工信息与紧急联系人信息的同步输入，因为EmployeeInfo已经包含了EmergencyInfos集合属性，只需结合ASP.NET Core的模型绑定规则调整视图和控制器即可，具体步骤如下：

1. 控制器初始化集合（推荐） #

在创建员工的GET方法中，给EmployeeInfo的EmergencyInfos集合初始化至少一个空对象，确保视图加载时默认显示一组紧急联系人输入框：

public IActionResult Create()
{
    var model = new EmployeeInfo();
    // 添加空的紧急联系人对象，保证视图能渲染输入控件
    model.EmergencyInfos.Add(new EmergencyInfo());
    return View(model);
}

2. 修改Razor视图，添加紧急联系人输入区域 #

在现有员工信息输入框后，添加针对EmergencyInfos集合的输入控件。必须使用索引器命名输入框，ASP.NET Core才能正确绑定集合数据：

@model AckPackage.Models.EmployeeInfo
@{
    ViewData["Title"] = "Create";
}

<div class="form-group row">
    <div class="col-sm-4">
        <label asp-for="LastName" class="control-label"></label>
        <input asp-for="LastName" class="form-control input-lg" />
        <span asp-validation-for="LastName" class="text-danger"></span>
    </div>
    <div class="col-sm-4">
        <label asp-for="FirstName" class="control-label"></label>
        <input asp-for="FirstName" class="form-control input-lg" />
        <span asp-validation-for="FirstName" class="text-danger"></span>
    </div>
</div>

<!-- 紧急联系人信息区域 -->
<h4>紧急联系人信息</h4>
@for (int i = 0; i < Model.EmergencyInfos.Count; i++)
{
    <div class="form-group row mb-3">
        <div class="col-sm-4">
            <label asp-for="@Model.EmergencyInfos[i].emailAddress" class="control-label"></label>
            <input asp-for="@Model.EmergencyInfos[i].emailAddress" class="form-control input-lg" />
            <span asp-validation-for="@Model.EmergencyInfos[i].emailAddress" class="text-danger"></span>
        </div>
        <div class="col-sm-4">
            <label asp-for="@Model.EmergencyInfos[i].PhoneNumber" class="control-label"></label>
            <input asp-for="@Model.EmergencyInfos[i].PhoneNumber" class="form-control input-lg" />
            <span asp-validation-for="@Model.EmergencyInfos[i].PhoneNumber" class="text-danger"></span>
        </div>
    </div>
}

<!-- 可选：动态添加更多紧急联系人按钮 -->
<button type="button" id="addEmergencyContact" class="btn btn-secondary">添加更多紧急联系人</button>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        document.getElementById('addEmergencyContact').addEventListener('click', function() {
            var container = document.querySelector('.form-group.row.mb-3').parentNode;
            var index = document.querySelectorAll('.form-group.row.mb-3').length;
            
            // 生成符合模型绑定规则的新输入框HTML
            var newContactHtml = `
                <div class="form-group row mb-3">
                    <div class="col-sm-4">
                        <label class="control-label" for="EmergencyInfos_${index}__emailAddress">紧急联系人邮箱</label>
                        <input class="form-control input-lg" type="text" id="EmergencyInfos_${index}__emailAddress" name="EmergencyInfos[${index}].emailAddress" />
                        <span class="text-danger field-validation-valid" data-valmsg-for="EmergencyInfos[${index}].emailAddress" data-valmsg-replace="true"></span>
                    </div>
                    <div class="col-sm-4">
                        <label class="control-label" for="EmergencyInfos_${index}__PhoneNumber">紧急联系人电话</label>
                        <input class="form-control input-lg" type="text" id="EmergencyInfos_${index}__PhoneNumber" name="EmergencyInfos[${index}].PhoneNumber" />
                        <span class="text-danger field-validation-valid" data-valmsg-for="EmergencyInfos[${index}].PhoneNumber" data-valmsg-replace="true"></span>
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', newContactHtml);
        });
    </script>
}

3. 调整POST控制器方法接收数据 #

确保POST方法能正确接收包含EmergencyInfos的EmployeeInfo对象，并完成数据库保存：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(EmployeeInfo employeeInfo)
{
    if (ModelState.IsValid)
    {
        _context.Add(employeeInfo);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View(employeeInfo);
}

核心注意点 #

• 集合模型绑定要求输入框的name属性必须遵循集合名[索引].属性名格式（如EmergencyInfos[0].emailAddress），这也是用for循环而非foreach的原因。
• 若需要支持多组紧急联系人，JavaScript动态生成输入框时必须严格遵循上述命名规则，否则无法完成绑定。
• 可给EmergencyInfo的emailAddress和PhoneNumber添加[Required]等验证特性，确保前端验证生效。

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