本文详细阐述了如何通过jquery ajax向asp.net mvc控制器正确发送数组或列表类型的数据，并解决常见的“415 unsupported media type”错误。核心在于客户端需将数据序列化为json字符串并设置正确的`contenttype`，同时服务器端控制器方法需使用`[httppost]`和`[frombody]`属性来正确接收和反序列化数据。
理解AJAX发送复杂数据与415错误
在Web开发中，经常需要通过AJAX将客户端收集到的复杂数据结构（如对象数组或列表）发送到服务器端进行处理。当尝试使用jQuery AJAX发送此类数据到ASP.NET MVC控制器时，如果配置不当，可能会遇到“415 Unsupported Media Type”错误。这个错误表明服务器无法理解客户端发送的数据格式，因为它期望的是某种特定类型（通常是JSON），但接收到的数据格式不符合预期。
产生415错误的主要原因通常是客户端没有正确地将JavaScript对象序列化为服务器可以识别的格式（如JSON字符串），并且/或者没有在HTTP请求头中正确声明Content-Type。
客户端数据准备与发送
要成功发送一个JavaScript对象数组到服务器，需要确保以下两点：
- 数据序列化： 将JavaScript数组对象转换为JSON字符串。
- 内容类型声明： 告知服务器发送的数据是JSON格式。
以下是使用jQuery AJAX发送数组的正确方法：
$(function(){
$("#btnSave").click(function(){
var datos = new Array();
// 遍历HTML表格行，收集数据并构建JavaScript对象数组
$("#imgCurrent tr").each(function () {
var row = $(this);
var id = row.find("td:eq(0)").text(); // 获取第一列的文本作为ID
var data = {
RepositoryCatalogueID: id
};
datos.push(data);
});
var url = "@Url.Action("EditPosition","Carrusel")"; // 获取控制器Action的URL
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8', // 关键：声明发送的数据是JSON格式
dataType: 'json', // 期望服务器返回的数据类型
data: JSON.stringify(datos), // 关键：将JavaScript数组序列化为JSON字符串
success: function (data) {
// 请求成功后的处理
$.alert({
icon: "~/Content/Images/success.png",
title: 'Restaurar Imagen',
content: 'Restauración exitosa.',
});
},
error: function(xhr, status, error) {
// 错误处理
console.error("AJAX Error:", status, error);
console.error("Response Text:", xhr.responseText);
$.alert({
icon: "~/Content/Images/error.png",
title: '错误',
content: '操作失败：' + error,
});
}
});
});
});关键点解析：
- JSON.stringify(datos)：这是将JavaScript datos数组（包含多个对象）转换为标准的JSON字符串的关键步骤。服务器端才能将其解析为对应的C#对象列表。
- contentType: 'application/json; charset=utf-8'：此设置告诉服务器，请求体中的数据是JSON格式。服务器会根据这个Content-Type头来选择合适的媒体类型格式化器进行处理。原代码中的contentType: 'json'是不规范且错误的写法，应使用'application/json'。
- dataType: 'json'：虽然不是解决415错误的核心，但它指示jQuery期望从服务器接收JSON格式的响应，这是一种良好的实践。
服务器端控制器接收数据
在ASP.NET MVC控制器中，为了正确接收客户端发送的JSON数据并将其绑定到C#对象列表，需要做以下配置：
using System.Collections.Generic;
using System.Web.Mvc; // 确保引入了正确的命名空间
// 定义ViewModel，与客户端发送的数据结构对应
public class CarruselViewModel
{
public int RepositoryCatalogueID { get; set; }
// 可以添加其他属性
}
public class CarruselController : Controller
{
[HttpPost] // 确保此Action方法只响应HTTP POST请求
public JsonResult EditPosition([FromBody] IEnumerable<CarruselViewModel> 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 Json(new { success = success, message = message }, JsonRequestBehavior.AllowGet);
}
}关键点解析：
- [HttpPost]属性：明确指定此Action方法只能通过HTTP POST请求访问。如果客户端发送的是GET请求，将无法匹配此方法。
- [FromBody]属性：这是ASP.NET MVC（或Web API）中一个非常重要的属性。它指示框架应尝试从HTTP请求的主体中读取数据，并将其反序列化为IEnumerable<CarruselViewModel>类型的对象。当客户端发送Content-Type: application/json且数据为JSON字符串时，[FromBody]会与内置的JSON媒体类型格式化器协同工作，将JSON字符串解析为C#对象。
总结与注意事项
要成功通过jQuery AJAX发送数组/列表数据到ASP.NET MVC控制器并避免415错误，核心在于客户端和服务器端的协同：
-
客户端（jQuery AJAX）：
- 使用JSON.stringify()将JavaScript对象数组转换为JSON字符串。
- 设置contentType: 'application/json; charset=utf-8'以正确声明数据类型。
-
服务器端（ASP.NET MVC）：
- 在控制器Action方法上添加[HttpPost]属性。
- 在接收复杂类型参数（如IEnumerable<T>）前添加[FromBody]属性。
- 确保ViewModel的属性名称与客户端发送的JSON数据中的键名完全匹配（区分大小写，尽管在某些配置下可能不区分）。
遵循这些步骤，将能够稳定可靠地在客户端和服务器之间传输复杂的数据结构。如果仍然遇到问题，请检查浏览器开发者工具中的网络请求，确认请求头和请求体是否符合上述要求，并检查服务器端日志以获取更详细的错误信息。
