AJAX发送数组到ASP.NET控制器：解决415错误及数据绑定指南

本文深入探讨在使用jquery ajax向asp.net控制器发送数组或复杂对象时常见的415错误。我们将详细介绍客户端如何通过`json.stringify()`方法正确序列化数据，并设置正确的`content-type`。同时，也会讲解服务器端控制器如何使用`[httppost]`和`[frombody]`属性来接收和绑定这些数据，确保数据传输的顺畅与成功，避免unsupported media type错误。

在使用jQuery AJAX向ASP.NET（无论是MVC还是Core）控制器发送复杂数据类型，尤其是对象数组时，开发者常会遇到415 Unsupported Media Type错误。这通常意味着客户端发送的数据格式与服务器端期望接收的格式不匹配。本教程将详细解释如何正确配置客户端AJAX请求和服务器端控制器动作方法，以实现数组数据的顺畅传输和绑定。

理解415错误的原因

当服务器响应415 Unsupported Media Type错误时，它表明请求的Content-Type头部指示的实体主体格式不被目标资源支持。在AJAX场景中，即使您在$.ajax请求中设置了contentType: 'json'，如果data参数不是一个JSON字符串，jQuery会尝试将其转换为application/x-www-form-urlencoded格式发送，或者服务器在接收到Content-Type: application/json头部时，却发现请求体内容并非有效的JSON字符串，从而导致解析失败。

客户端AJAX请求的正确配置

要成功发送数组或复杂对象到服务器，关键在于两点：

1. 数据序列化： 必须将JavaScript对象或数组显式地序列化为JSON字符串。
2. 内容类型声明： 告知服务器发送的数据是JSON格式。

以下是修正后的jQuery AJAX代码示例：

$(function(){
    $("#btnSave").click(function(){         

        var datos = new Array();

        $("#imgCurrent tr").each(function () {
            var row = $(this);

            var id = row.find("td:eq(0)").text(); // 获取第一列的文本作为ID

            var data = {
                RepositoryCatalogueID: id
            };

            datos.push(data);
        });    

        // 定义控制器动作的URL
        var url = "@Url.Action("EditPosition","Carrusel")"; 

        $.ajax({
            url: url,
            type: 'POST',
            // 明确指定Content-Type为application/json
            contentType: 'application/json; charset=utf-8', 
            // 关键：使用JSON.stringify()将JavaScript数组转换为JSON字符串
            data: JSON.stringify(datos), 
            success: function (response) {
                // 请求成功的回调
                $.alert({
                    icon: "~/Content/Images/success.png",
                    title: '操作成功',
                    content: '数据保存成功。',
                });
            },
            error: function (xhr, status, error) {
                // 请求失败的回调，可用于调试
                console.error("AJAX请求失败: " + status + ", " + error);
                $.alert({
                    icon: "~/Content/Images/error.png",
                    title: '操作失败',
                    content: '数据保存失败，请重试。',
                });
            }
        });
    });
});

关键点说明：

• contentType: 'application/json; charset=utf-8'：这是标准的JSON内容类型声明。charset=utf-8确保了字符编码的正确性。
• data: JSON.stringify(datos)：这是解决415错误的核心。JSON.stringify()方法将JavaScript的datos数组（包含对象）转换成一个符合JSON格式的字符串。服务器端才能正确解析这个字符串为JSON对象。

服务器端控制器方法的正确配置

在ASP.NET控制器中，为了正确接收和绑定客户端发送的JSON数组，需要确保以下两点：

MCP Market

MCP Servers集合平台，帮你找到最好的MCP服务器

下载

1. HTTP方法匹配： 动作方法必须使用[HttpPost]属性来响应POST请求。
2. 模型绑定： 使用[FromBody]属性指示ASP.NET从请求体中解析数据并绑定到模型。

以下是修正后的ASP.NET控制器动作方法示例：

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc; // 或 System.Web.Mvc; 对于ASP.NET MVC 5

// 定义与客户端数据结构匹配的ViewModel
public class CarruselViewModel
{
    public int RepositoryCatalogueID { get; set; }
    // 可以根据需要添加其他属性
}

[ApiController] // 对于ASP.NET Core API，通常会添加此属性
[Route("Carrusel")] // 定义控制器路由前缀
public class CarruselController : ControllerBase // 或 Controller
{
    [HttpPost] // 明确指定此方法只响应HTTP POST请求
    [Route("EditPosition")] // 定义动作方法的路由
    public JsonResult EditPosition([FromBody] IEnumerable model)
    {
        bool success = false;
        string message = string.Empty;

        if (model != null)
        {
            // 在这里处理接收到的模型数据
            foreach (var item in model)
            {
                // 例如：保存到数据库、更新位置等
                Console.WriteLine($"Received ID: {item.RepositoryCatalogueID}");
            }
            success = true;
            message = "数据更新成功。";
        }
        else
        {
            message = "未接收到有效数据。";
        }

        // 返回JSON结果
        return new JsonResult(new { success = success, message = message });
    }
}

关键点说明：

• [HttpPost]：确保此动作方法仅响应HTTP POST请求。如果客户端发送的是GET请求，或者没有此属性，请求可能无法匹配到正确的动作。
• [FromBody] IEnumerable model：
  • [FromBody]属性告诉ASP.NET的Model Binder，它应该从请求的HTTP主体中读取数据，并尝试将其反序列化为IEnumerable类型的对象集合。
  • IEnumerable：服务器端模型类型必须与客户端发送的JSON数组结构相匹配。CarruselViewModel的属性名称（例如RepositoryCatalogueID）应与客户端JSON对象中的键名一致（大小写通常不敏感，但建议保持一致）。

总结与注意事项

通过以上客户端和服务器端的正确配置，您将能够成功地使用jQuery AJAX发送数组或复杂对象到ASP.NET控制器，并避免415 Unsupported Media Type错误。

核心要点回顾：

1. 客户端： 始终使用JSON.stringify()将JavaScript对象或数组序列化为JSON字符串，并设置contentType: 'application/json; charset=utf-8'。
2. 服务器端： 对于POST请求，使用[HttpPost]属性。对于从请求体中接收复杂数据，使用[FromBody]属性，并确保模型类型与客户端发送的JSON结构相匹配。
3. 调试技巧：
   • 使用浏览器开发者工具（Network标签页）检查AJAX请求的Request Headers（特别是Content-Type）和Request Payload（查看发送的实际数据）。
   • 在服务器端控制器动作方法中设置断点，检查model参数是否正确接收到数据。
   • 检查服务器日志，可能会有更详细的错误信息。

遵循这些指南，可以有效解决AJAX数据传输中的415错误，并实现客户端与服务器端之间复杂数据的可靠交换。