使用 JavaScript 将表单简历数据发送到 ASP.NET MVC 服务器

<form id="resumeForm">
  <div id="workExperiencesContainer">
    <!-- 工作经历模块将动态添加到这里 -->
  </div>
  <button type="button" id="addWorkExperience">添加工作经历</button>

  <div id="educationsContainer">
    <!-- 教育经历模块将动态添加到这里 -->
  </div>
  <button type="button" id="addEducation">添加教育经历</button>

  <button type="button" id="submitResume">提交简历</button>
</form>

$(document).ready(function() {
  $('#submitResume').click(function() {
    let data = {
      WorkExperiences: [],
      Educations: []
    };

    // Сбор данных из модулей опыта работы
    $('.work-experience-module').each(function () {
      let workExperience = {
        companyName: $(this).find('input[name="company"]').val(),
        position: $(this).find('input[name="position"]').val(),
        responsibilities: $(this).find('input[name="responsibilities"]').val(),
        workExperienceStartDate: $(this).find('input[name="workExperienceStartDate"]').val(),
        workExperienceEndDate: $(this).find('input[name="workExperienceEndDate"]').val()
      };
      data.WorkExperiences.push(workExperience);
    });

    // Сбор данных из модулей образования
    $('.education-module').each(function () {
      let education = {
        InstitutionName: $(this).find('input[name="educationInstitution"]').val(),
        Degree: $(this).find('input[name="educationDegree"]').val(),
        GraduationDate: $(this).find('input[name="educationGraduationDate"]').val()
      };
      data.Educations.push(education);
    });

    // 将数据发送到服务器
    sendDataToServer(data);
  });

  // 添加工作经历模块的示例代码
  $('#addWorkExperience').click(function() {
    let workExperienceModule = `
      <div class="work-experience-module">
        <input type="text" name="company" placeholder="公司名称">
        <input type="text" name="position" placeholder="职位">
        <input type="text" name="responsibilities" placeholder="职责">
        <input type="date" name="workExperienceStartDate" placeholder="开始日期">
        <input type="date" name="workExperienceEndDate" placeholder="结束日期">
      </div>
    `;
    $('#workExperiencesContainer').append(workExperienceModule);
  });

  // 添加教育经历模块的示例代码
  $('#addEducation').click(function() {
    let educationModule = `
      <div class="education-module">
        <input type="text" name="educationInstitution" placeholder="学校名称">
        <input type="text" name="educationDegree" placeholder="学位">
        <input type="date" name="educationGraduationDate" placeholder="毕业日期">
      </div>
    `;
    $('#educationsContainer').append(educationModule);
  });
});

function sendDataToServer(data) {
  $.ajax({
    url: '/Resume/SubmitResume', // 替换为您的服务器端点
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function(response) {
      console.log('数据发送成功:', response);
      alert('简历提交成功！');
    },
    error: function(error) {
      console.error('数据发送失败:', error);
      alert('简历提交失败！');
    }
  });
}

public class ResumeViewModel
{
    public List<WorkExperienceViewModel> WorkExperiences { get; set; } = new List<WorkExperienceViewModel>();
    public List<EducationViewModel> Educations { get; set; } = new List<EducationViewModel>();
}

public class WorkExperienceViewModel
{
    public string CompanyName { get; set; }
    public string Position { get; set; }
    public string Responsibilities { get; set; }
    public DateTime WorkExperienceStartDate { get; set; }
    public DateTime WorkExperienceEndDate { get; set; }
}

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

[HttpPost]
public ActionResult SubmitResume(ResumeViewModel resume)
{
    if (ModelState.IsValid)
    {
        // 在这里处理简历数据，例如保存到数据库
        // 可以使用 resume.WorkExperiences 和 resume.Educations 访问数据

        // 返回成功响应
        return Json(new { success = true, message = "简历已成功提交！" });
    }
    else
    {
        // 返回错误响应
        return Json(new { success = false, message = "简历提交失败，请检查输入信息！" });
    }
}