使用 jQuery Ajax 将对象列表传递给 MVC 控制器方法

小开

格式化数据可能是问题所在。请尝试以下任何一种方法:

data: '{ "things":' + JSON.stringify(things) + '}',

或(从如何在没有表单的情况下将字符串数组发送到 ASP.NET MVC 控制器？)

var postData = { things: things };
...
data = postData

小开

最佳答案

使用 NickW 的建议，我能够得到这个工作使用 things = JSON.stringify({ 'things': things });这里是完整的代码。

$(document).ready(function () {
var things = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
];


things = JSON.stringify({ 'things': things });


$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/Home/PassThings',
data: things,
success: function () {
$('#result').html('"PassThings()" successfully called.');
},
failure: function (response) {
$('#result').html(response);
}
});
});




public void PassThings(List<Thing> things)
{
var t = things;
}


public class Thing
{
public int Id { get; set; }
public string Color { get; set; }
}

我从中学到了两件事:

在 ajax ()函数中，contentType 和 dataType 设置是绝对必要的。如果他们失踪了，就没用了。经过反复试验，我发现了这一点。
要将对象数组传递给 MVC 控制器方法，只需使用 JSON.stringify ({‘ things’: things })格式。

我希望这能帮到别人！

小开

你就不能这么做吗？

var things = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
];
$.post('@Url.Action("PassThings")', { things: things },
function () {
$('#result').html('"PassThings()" successfully called.');
});

然后用

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
// do stuff with things here...
}

小开

我有一个完美的答案: 我尝试了这么多的解决方案，最后还是没能让自己管理好，请在下面找到详细的答案:

       $.ajax({
traditional: true,
url: "/Conroller/MethodTest",
type: "POST",
contentType: "application/json; charset=utf-8",
data:JSON.stringify(
[
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
]),
success: function (data) {
$scope.DisplayError(data.requestStatus);
}
});

控制员

public class Thing
{
public int id { get; set; }
public string color { get; set; }
}


public JsonResult MethodTest(IEnumerable<Thing> datav)
{
//now  datav is having all your values
}

小开

如果您正在使用 ASP.NET Web API，那么您应该只传递 data: JSON.stringify(things)。

你的控制器应该是这样的:

public class PassThingsController : ApiController
{
public HttpResponseMessage Post(List<Thing> things)
{
// code
}
}

小开

     var List = @Html.Raw(Json.Encode(Model));
$.ajax({
type: 'post',
url: '/Controller/action',
data:JSON.stringify({ 'item': List}),
contentType: 'application/json; charset=utf-8',
success: function (response) {
//do your actions
},
error: function (response) {
alert("error occured");
}
});

小开

这是您的查询的工作代码，您可以使用它。

控制员

    [HttpPost]
public ActionResult save(List<ListName> listObject)
{
//operation return
Json(new { istObject }, JsonRequestBehavior.AllowGet); }
}

Javascript

  $("#btnSubmit").click(function () {
var myColumnDefs = [];
$('input[type=checkbox]').each(function () {
if (this.checked) {
myColumnDefs.push({ 'Status': true, 'ID': $(this).data('id') })
} else {
myColumnDefs.push({ 'Status': false, 'ID': $(this).data('id') })
}
});
var data1 = { 'listObject': myColumnDefs};
var data = JSON.stringify(data1)
$.ajax({
type: 'post',
url: '/Controller/action',
data:data ,
contentType: 'application/json; charset=utf-8',
success: function (response) {
//do your actions
},
error: function (response) {
alert("error occured");
}
});

小开

来自@veeresh i 的修改

 var data=[


{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
]; //parameter
var para={};
para.datav=data;   //datav from View




$.ajax({
traditional: true,
url: "/Conroller/MethodTest",
type: "POST",
contentType: "application/json; charset=utf-8",
data:para,
success: function (data) {
$scope.DisplayError(data.requestStatus);
}
});


In MVC






public class Thing
{
public int id { get; set; }
public string color { get; set; }
}


public JsonResult MethodTest(IEnumerable<Thing> datav)
{
//now  datav is having all your values
}

小开

唯一的方法是将 JSON 作为字符串传递，然后使用 JavaScriptSerializer.Deserialize<T>(string input)对其进行反序列化，如果这是 MVC 4的默认反序列化器，那就很奇怪了。

我的模型有嵌套的对象列表，使用 JSON 数据我能得到的最好结果是最上面的列表，其中包含正确数量的项，但是项中的所有字段都是 null。

这种事情不应该这么难。

    $.ajax({
type: 'POST',
url: '/Agri/Map/SaveSelfValuation',
data: { json: JSON.stringify(model) },
dataType: 'text',
success: function (data) {


[HttpPost]
public JsonResult DoSomething(string json)
{
var model = new JavaScriptSerializer().Deserialize<Valuation>(json);

小开

用另一个包含与 MVC 控制器所期望的参数名称匹配的属性的对象包装对象列表可以工作。重要的一点是对象列表的包装器。

$(document).ready(function () {
var employeeList = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'John' },
{ id: 3, name: 'Tom' }
];


var Employees = {
EmployeeList: employeeList
}


$.ajax({
dataType: 'json',
type: 'POST',
url: '/Employees/Process',
data: Employees,
success: function () {
$('#InfoPanel').html('It worked!');
},
failure: function (response) {
$('#InfoPanel').html(response);
}
});
});




public void Process(List<Employee> EmployeeList)
{
var emps = EmployeeList;
}


public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
}

小开

我用的是。Net Core 2.1 Web 应用程序，在这里没有得到一个可以工作的单一答案。我要么得到一个空参数(如果根本没有调用该方法的话) ，要么得到一个500服务器错误。我开始尝试各种可能的答案组合，最终得到了一个有效的结果。

对我来说，解决办法如下:

脚本-将原始数组字符串化(不使用命名属性)

    $.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: mycontrolleraction,
data: JSON.stringify(things)
});

在控制器方法中，使用[ FromBody ]

    [HttpPost]
public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
{
return Ok();
}

故障包括:

命名内容

Data: { content: node } ,//Server error 500
没有 contentType = Server 错误500

笔记

dataType是不需要的，尽管有些答案说，因为这是用于回应解码(所以不相关的请求例子在这里)。
List<Thing>也在控制器方法中工作

小开

当试图从 DataTable 中的几个选定行向 MVC 操作发送一些数据时，我做了什么:

超文本标示语言在页面的开头:

@Html.AntiForgeryToken()

(仅显示一行，从模型绑定) :

 @foreach (var item in Model.ListOrderLines)
{
<tr data-orderid="@item.OrderId" data-orderlineid="@item.OrderLineId" data-iscustom="@item.IsCustom">
<td>@item.OrderId</td>
<td>@item.OrderDate</td>
<td>@item.RequestedDeliveryDate</td>
<td>@item.ProductName</td>
<td>@item.Ident</td>
<td>@item.CompanyName</td>
<td>@item.DepartmentName</td>
<td>@item.ProdAlias</td>
<td>@item.ProducerName</td>
<td>@item.ProductionInfo</td>
</tr>
}

启动 JavaScript 函数的按钮:

 <button class="btn waves-effect waves-light btn-success" onclick="ProcessMultipleRows();">Start</button>

JavaScript 函数:

  function ProcessMultipleRows() {
if ($(".dataTables_scrollBody>tr.selected").length > 0) {
var list = [];
$(".dataTables_scrollBody>tr.selected").each(function (e) {
var element = $(this);
var orderid = element.data("orderid");
var iscustom = element.data("iscustom");
var orderlineid = element.data("orderlineid");
var folderPath = "";
var fileName = "";


list.push({ orderId: orderid, isCustomOrderLine: iscustom, orderLineId: orderlineid, folderPath: folderPath, fileName : fileName});
});


$.ajax({
url: '@Url.Action("StartWorkflow","OrderLines")',
type: "post", //<------------- this is important
data: { model: list }, //<------------- this is important
beforeSend: function (xhr) {//<--- This is important
xhr.setRequestHeader("RequestVerificationToken",
$('input:hidden[name="__RequestVerificationToken"]').val());
showPreloader();
},
success: function (data) {


},
error: function (XMLHttpRequest, textStatus, errorThrown) {


},
complete: function () {
hidePreloader();
}
});
}
}

MVC 行动:

[HttpPost]
[ValidateAntiForgeryToken] //<--- This is important
public async Task<IActionResult> StartWorkflow(IEnumerable<WorkflowModel> model)

C # 中的 MODEL:

public class WorkflowModel
{
public int OrderId { get; set; }
public int OrderLineId { get; set; }
public bool IsCustomOrderLine { get; set; }
public string FolderPath { get; set; }
public string FileName { get; set; }
}

结论:

错误的原因:

"Failed to load resource: the server responded with a status of 400 (Bad Request)"

是属性: [ValidateAntiForgeryToken]，用于 MVC 操作 StartWorkflow

Ajax 调用中的解决方案:

  beforeSend: function (xhr) {//<--- This is important
xhr.setRequestHeader("RequestVerificationToken",
$('input:hidden[name="__RequestVerificationToken"]').val());
},

要发送对象的 List，您需要像示例(填充列表对象)和:

Data: { model: list } ,

类别: 「投递」、,

小开

对我来说是这样的:

var things = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
];


$.ajax({
ContentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/Controller/action',
data: { "things": things },
success: function () {
$('#result').html('"PassThings()" successfully called.');
},
error: function (response) {
$('#result').html(response);
}
});

大写“ C”的“ ContentType”。

小开

在 asp.net 核心3.1中删除 contentType对我来说很管用

其他方法都失败了

小开

我可以证实，在 asp.net 核心2.1上，删除内容类型使我的 ajax 调用工作。

function PostData() {
var answer = [];


for (let i = 0; i < @questionCount; i++) {
answer[i] = $(`#FeedbackAnswer${i}`).dxForm("instance").option("formData");
}


var answerList = { answers: answer }


$.ajax({
type: "POST",
url: "/FeedbackUserAnswer/SubmitForm",
data: answerList ,
dataType: 'json',
error: function (xhr, status, error) { },
success: function (response) { }
});
}

[HttpPost]
public IActionResult SubmitForm(List<Feedback_Question> answers)
{}

小开

在 asp.net 核心3.1中没有任何东西对我起作用。如果没有任何操作，并且有人正在从表中读取行想把它传给 Action 方法尝试下面的方法..。这肯定会成功的。

<script type="text/javascript">
$(document).ready(function () {


var data = new Array();
var things = {};


// make sure id and color properties match with model (Thing) properties
things.id = 1;
things.color = 'green';


data.push(things);


Try the same thing for dynamic data as well that is coming from table.


// var things = [ { id: 1, color: 'yellow' }, { id: 2, color: 'blue' }, { id: 3, color: 'red' } ];


$.ajax({
contentType: 'application/json;',
type: 'POST',
url: 'your url goes here',
data: JSON.stringify(things)
});
});
</script>


public class ThingController : Controller
{
public void PassThing([FromBody] List<Thing> things)
{
// do stuff with things here...
}


public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
}