Ajax 调用 ASP.NET MVC controller

Question

jQuery 代码为：

var props = [
    { "Name": "firstName", "Value": "firstValue" }, 
    { "Name": "secondName", "Value": "secondValue" }
];

$.ajax({
     url: '/myURL',
     contentType: "application/json",
     async: true,
     type: "POST",
     data: JSON.stringify(props),
     error: function (jqXHR, textStatus, errorThrown) {
         console.log("FAIL: " + errorThrown);
     },
     success: function (data, textStatus, jqXHR) {
         console.log("SUCCESS!");
     }
});

ASP.NET MVC controller

[HttpPost]
public async Task<ActionResult> Test(string myValue)
{
    return Json("something");
}

我打了 controller 但myValue是 null。

任何想法？

谢谢，

Answer 1

修改您的 API 操作以期望接收List<Prop>类型的输入。

[HttpPost]
public async Task<ActionResult> Test(List<Prop> myValue)
{
    return Json("something");
}

public class Prop
{
    public string Name { get; set; }
    public string Value { get; set; }
}

演示

Answer 2

在视图端脚本中，应使用myValue参数名称使绑定正常工作：

var props = [

      { "Name": "firstName", "Value": "firstValue" },
      { "Name": "secondName", "Value": "secondValue" }
  ];

  $.ajax({
      url: '@Url.Action("Test", "Home")',
      contentType: "application/json",
      async: true,
      type: "POST",
      data: { myValue: JSON.stringify(props) },
      dataType: "json",

      error: function (jqXHR, textStatus, errorThrown) {
          console.log("FAIL: " + errorThrown);
      },
      success: function (data, textStatus, jqXHR) {
          console.log("SUCCESS!");
      }
  });

在 controller 侧：

[HttpPost]               
public async Task<ActionResult> Test(string myValue)
{            
    var data = JsonConvert.DeserializeObject(myValue);
    // TODO: ...
    
    return Json("Success");
}

在上面的代码中使用了@Url.Action("Test", "Home")' ，它应该被正确的url替换。