在ASP.NET MVC中用JavaScript提交简历表单数据及多模块数组数据获取

一、获取多模块的工作/教育经历数据 #

要收集用户动态添加的多条工作经历、教育经历数据，核心是遍历对应模块DOM，逐个提取字段值并组装成数组：

1. 先初始化存储完整简历数据的对象，包含基础信息和两个数组字段：

// 初始化简历数据对象，可添加姓名、邮箱等基础字段
let data = {
    FullName: $('#fullName').val(),
    Email: $('#email').val(),
    WorkExperiences: [],
    Educations: []
};

2. 遍历所有工作经历模块，提取字段并推入数组：

// 收集工作经历模块的数据
$('.work-experience-module').each(function () {
    let workExperience = {
        CompanyName: $(this).find('input[name="company"]').val().trim(),
        Position: $(this).find('input[name="position"]').val().trim(),
        Responsibilities: $(this).find('input[name="responsibilities"]').val().trim(),
        StartDate: $(this).find('input[name="workExperienceStartDate"]').val(),
        EndDate: $(this).find('input[name="workExperienceEndDate"]').val()
    };
    data.WorkExperiences.push(workExperience);
});

3. 同理遍历教育经历模块：

// 收集教育经历模块的数据
$('.education-module').each(function () {
    let education = {
        InstitutionName: $(this).find('input[name="educationInstitution"]').val().trim(),
        Degree: $(this).find('input[name="educationDegree"]').val().trim(),
        GraduationDate: $(this).find('input[name="educationGraduationDate"]').val()
    };
    data.Educations.push(education);
});

关键注意点：

• 动态添加的模块必须带有统一类名（如work-experience-module），方便DOM选择
• 用trim()处理输入值，避免多余空格干扰
• 前端字段名要和后端ViewModel的属性名严格一致，确保自动绑定

二、将简历数据发送至ASP.NET MVC服务器 #

收集完数据后，通过AJAX请求提交到后端控制器：

前端AJAX代码（jQuery示例） #

// 提交数据到服务器
$.ajax({
    url: '/Resume/Create', // 对应控制器的Action路径
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data), // 将数据转为JSON字符串
    success: function (response) {
        if (response.success) {
            alert('简历创建成功！');
            window.location.href = '/Resume/List';
        } else {
            alert('提交失败：' + response.message);
        }
    },
    error: function (xhr, status, error) {
        console.error('请求错误:', error);
        alert('提交出错，请稍后重试');
    }
});

后端控制器配置 #

1. 定义对应的数据ViewModel类：

public class ResumeViewModel
{
    public string FullName { get; set; }
    public string Email { get; set; }
    public List<WorkExperienceViewModel> WorkExperiences { get; set; }
    public List<EducationViewModel> Educations { get; set; }
}

public class WorkExperienceViewModel
{
    public string CompanyName { get; set; }
    public string Position { get; set; }
    public string Responsibilities { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
}

public class EducationViewModel
{
    public string InstitutionName { get; set; }
    public string Degree { get; set; }
    public DateTime? GraduationDate { get; set; }
}

2. 编写控制器Action：

public class ResumeController : Controller
{
    [HttpPost]
    public IActionResult Create([FromBody] ResumeViewModel resume)
    {
        if (!ModelState.IsValid)
        {
            return Json(new { success = false, message = "输入数据不合法" });
        }

        // 执行简历保存逻辑（如存入数据库）
        // ...

        return Json(new { success = true });
    }
}

关键注意点：

• 用[FromBody]特性告知框架从请求体解析JSON数据
• 可通过DataAnnotations给ViewModel添加数据验证规则
• 返回JSON格式的响应，方便前端处理结果

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