构建基于JavaScript的ASP.NET MVC简历数据提交教程

本文旨在指导开发者如何利用JavaScript从表单中收集简历数据，包括工作经历和教育背景等信息，并将这些数据以JSON格式发送到ASP.NET MVC服务器端进行处理。我们将详细介绍数据收集、格式化以及AJAX提交的关键步骤，并提供示例代码以供参考。

前端数据收集与格式化

在前端，我们需要使用JavaScript从表单的各个模块中收集数据。考虑到用户可以添加多个工作经历和教育背景，我们需要动态地收集这些信息，并将它们组织成一个易于传输和处理的JSON对象。

1. HTML结构

首先，假设我们的HTML结构包含多个 .work-experience-module 和 .education-module，每个模块都包含相应的输入字段。 例如：

2. JavaScript数据收集

接下来，使用JavaScript遍历这些模块，收集数据并将其存储在一个对象中。

function collectResumeData() {
    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);
    });

    return data;
}

这段代码使用 jQuery 的 .each() 方法遍历每个工作经历和教育背景模块。 对于每个模块，它从输入字段中提取值，并创建一个包含这些值的对象。 然后，将这些对象添加到 data.WorkExperiences 和 data.Educations 数组中。

3. JSON 序列化

在将数据发送到服务器之前，需要将JavaScript对象序列化为JSON字符串。

let resumeData = collectResumeData();
let jsonData = JSON.stringify(resumeData);

后端数据接收与处理 (ASP.NET MVC)

在ASP.NET MVC中，我们需要创建一个Action来接收和处理这些数据。

1. 创建Model

首先，定义与JSON数据结构相对应的C# Model。

public class ResumeData
{
    public List WorkExperiences { get; set; }
    public List Educations { get; set; }
}

public class WorkExperience
{
    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 Education
{
    public string InstitutionName { get; set; }
    public string Degree { get; set; }
    public DateTime GraduationDate { get; set; }
}

2. 创建Controller Action

然后，创建一个Controller Action来接收JSON数据并进行处理。

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json; // 引入 Newtonsoft.Json

public class ResumeController : Controller
{
    [HttpPost]
    public IActionResult SubmitResume([FromBody] ResumeData resumeData)
    {
        if (ModelState.IsValid)
        {
            // 在这里处理 resumeData，例如保存到数据库
            // 可以使用 Newtonsoft.Json 反序列化 JSON 字符串，如果前端直接传递 JSON 字符串
            // ResumeData resumeData = JsonConvert.DeserializeObject(jsonString);

            // 返回成功状态
            return Ok("Resume submitted successfully!");
        }
        else
        {
            // 返回错误状态和错误信息
            return BadRequest(ModelState);
        }
    }
}

在这个Action中，[FromBody] 特性告诉ASP.NET MVC从请求的主体中读取JSON数据，并将其反序列化为 ResumeData 对象。 ModelState.IsValid 检查Model的验证规则是否通过。 如果数据有效，可以将其保存到数据库或执行其他操作。 如果数据无效，则返回一个 BadRequest 响应，其中包含错误信息。

3. 配置路由

确保你的路由配置允许通过POST请求访问这个Action。 可以在 Startup.cs 文件中配置路由：

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

AJAX提交数据

现在，我们需要使用AJAX将JSON数据发送到服务器。

$(document).ready(function () {
    $('#submitButton').click(function () { // 假设你有一个id为submitButton的按钮
        let resumeData = collectResumeData();
        let jsonData = JSON.stringify(resumeData);

        $.ajax({
            url: '/Resume/SubmitResume', // 替换为你的Controller和Action的URL
            type: 'POST',
            contentType: 'application/json',
            data: jsonData,
            success: function (response) {
                alert(response); // 显示服务器返回的消息
            },
            error: function (error) {
                console.error('Error submitting resume:', error);
                alert('Error submitting resume. Please check the console for details.');
            }
        });
    });
});

这段代码使用 jQuery 的 $.ajax() 方法发送POST请求。 url 指定服务器端点，type 指定请求类型，contentType 指定请求的内容类型为 application/json，data 包含要发送的JSON数据。 success 和 error 回调函数处理服务器的响应。

注意事项：

• 确保引入了 jQuery 库。
• 替换 /Resume/SubmitResume 为你实际的Controller和Action的URL。
• 在ASP.NET MVC项目中，需要安装 Microsoft.AspNetCore.Mvc.NewtonsoftJson 包来处理JSON数据。 并在 Startup.cs 中配置：

services.AddControllers().AddNewtonsoftJson();

总结

通过以上步骤，我们成功地实现了从前端收集简历数据，将其格式化为JSON，并通过AJAX发送到ASP.NET MVC服务器端进行处理。 这种方法允许用户动态地添加和编辑工作经历和教育背景等信息，并将其方便地提交到服务器进行存储和处理。 务必注意数据验证和安全性，以确保应用程序的稳定性和安全性。