ASP.NET Core MVC使用jQuery操作分部视图增删列表项及表单提交问题求解

前置模型修正 #

首先补全DependentDto缺失的字段，同时将文件上传字段改为对应类型：

public class DependentDto
{
    public int Id { get; set; }
    public string DependentName { get; set; }
    public int RelationToApplicant { get; set; }
    public DateTime DependentDateOfBirth { get; set; }
    // 上传文件使用IFormFile类型接收
    public IFormFile DependentNationalId { get; set; }
    public string DependentMobileNumber { get; set; }
}

问题1：ID始终为0修复 #

原因 #

渲染新增依赖人分部视图时传入的是new DependentDto()，Id默认值为0，前端无赋值逻辑。

修改方案 #

1. 把_AddDependent分部视图的Id输入框改为隐藏类型：

<input asp-for="Id" type="hidden" class="form-control" />

2. 后端AddDependents接口自行生成唯一自增Id，不依赖前端传值：

[HttpPost]
public IActionResult AddDependents(DependentDto dependent)
{
    var newMedicalCardDto = new NewMedicalCardDto();
    if (HttpContext.Session.Get<NewMedicalCardDto>(SessionkeyMCD) != default)
    {
        newMedicalCardDto = HttpContext.Session.Get<NewMedicalCardDto>(SessionkeyMCD);
        // 生成自增Id：取现有最大Id+1，无数据时从1开始
        dependent.Id = newMedicalCardDto.DependentsDto.Any() ? newMedicalCardDto.DependentsDto.Max(x => x.Id) + 1 : 1;
        newMedicalCardDto.DependentsDto.Add(dependent);
        HttpContext.Session.Set(SessionkeyMCD, newMedicalCardDto);
    }
    return PartialView("_ShowDependent", newMedicalCardDto);
}

问题2：PDF上传控件取值为null修复 #

原因 #

普通JSON格式的AJAX请求无法传递二进制文件，需要使用FormData格式提交请求。

修改方案 #

替换原有的AJAX提交代码：

$("#AddDependent").click(function (evt) {
    var formData = new FormData();
    // 逐个添加表单字段
    formData.append("dependent.Id", $('#Id').val());
    formData.append("dependent.DependentName", $('#DependentName').val());
    formData.append("dependent.RelationToApplicant", $('#RelationToApplicant').val());
    formData.append("dependent.DependentDateOfBirth", $('#DependentDateOfBirth').val());
    // 单独处理上传文件
    formData.append("dependent.DependentNationalId", $('#DependentNationalId')[0].files[0]);
    formData.append("dependent.DependentMobileNumber", $('#DependentMobileNumber').val());

    $.ajax({
        type: "POST",
        url: "/AddDependent/AddDependents",
        data: formData,
        contentType: false, // 让浏览器自动生成请求边界
        processData: false, // 不自动处理表单数据
        success: function (message) {
            $('#AddNewDiv').html(message);
            // 清空录入表单方便下次录入
            $('#Dependentform')[0].reset();
            RemoveDependent();
        },
        error: function () {
            alert("there was error !");
        }
    });
});

问题3：提交表单后主模型无分部视图信息修复 #

原因 #

已录入的依赖人字段未符合ASP.NET Core模型绑定的命名规则，无法自动绑定到主模型的DependentsDto列表。

修改方案 #

直接复用Session中已存储的完整依赖人数据，无需重复提交：

[HttpPost]
public IActionResult SaveNewDependent(NewMedicalCardDto newMedicalCardDto)
{
    // 从Session读取已存储的完整数据，包含所有已添加的依赖人
    var sessionData = HttpContext.Session.Get<NewMedicalCardDto>(SessionkeyMCD);
    if(sessionData != null)
    {
        // 把表单提交的主表字段同步到Session数据中
        sessionData.ApplicantDOB = newMedicalCardDto.ApplicantDOB;
        sessionData.ApplicantStatus = newMedicalCardDto.ApplicantStatus;
        // 直接使用sessionData完成后续保存逻辑即可
        // 保存完成后清理Session
        HttpContext.Session.Remove(SessionkeyMCD);
    }
    // 其余业务逻辑
}

如果需要通过表单绑定获取依赖人，需要在_ShowDependent分部视图渲染字段时添加索引前缀，示例：

@for(var i=0; i< Model.DependentsDto.Count; i++)
{
    <input asp-for="DependentsDto[i].Id" name="DependentsDto[@i].Id" type="hidden" />
    <input asp-for="DependentsDto[i].DependentName" name="DependentsDto[@i].DependentName" />
    <!-- 其余字段按相同规则设置name属性即可 -->
}

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