Ajax Call to ASP.NET MVC controller

Question

The jQuery code is :

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!");
     }
});

The ASP.NET MVC controller

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

I hit the controller but myValue is null all the time.

Any idea ?

Thanks,

I don't hit the controller anymore and I get error 500. I checked with Fiddler for the request, json tab I have : JSON=myValue — TheBoubou, Jul 26 '22 at 09:40

score 1 · Answer 1 · answered Jul 26 '22 at 09:39

1

Modify your API action to expect to receive the input of List<Prop> type.

[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; }
}

Demo

answered Jul 26 '22 at 09:39

Yong Shun

35,286
4
24
46

Thanks a lot. But I'd like than the controller receive a string for compatibility reason with another stuff. – TheBoubou Jul 26 '22 at 09:43
I doubt that it is possible to do. Perhaps I think you need to read from `Request.InputStream`. Refer to: [MVC controller : get JSON object from HTTP body?](https://stackoverflow.com/a/13116824/8017690) – Yong Shun Jul 26 '22 at 10:25
1

*receive a string* then you need to tell it you're sending a string - at the moment, you're telling it you're sending JSON (which, yes, is a string, but it's handled as json and converted to an object server-side before passing to your Action). Remove `contentType: "application/json",` – freedomn-m Jul 26 '22 at 11:41

Jackdaw · Answer 2 · 2022-07-26T11:21:55.753

In the view side script the myValue parameter name should be used to make binding to work properly:

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!");
      }
  });

On the controller side:

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

In the code above the @Url.Action("Test", "Home")' is used and it should be replaced by proper url.

Ajax Call to ASP.NET MVC controller

2 Answers2