AJAX paramter to ASP .NET Core 2 Controller Action

Question

I'd like to pass an AJAX parameter to the MVC Controller in ASP .Net Core 2.

This is what i tried :

function getMatchesFromChampionshipAsync(championship) {
    console.log(championship);
    $.ajax({
        url: "/Bets/Matches",
        type: "POST",
        data: { "championship": championship },
        dataType: 'json',
        contentType: 'application/json; charset=UTF-8',
        success: function (response) {
            alert(response)
        }
    })
}

I'm sure that the parameter championship is correct (I also tried to log it), but the Controller always receives null.
This is the Controller Action Method code:

[HttpPost]
    public IActionResult Matches([FromBody] string championship) {
        return Json(championship);
    }

The browser also alerts null. I also read other questions about it but no one worked.

it will work if you just pass the object as data without wrapping it in another object — The Bearded Llama, Nov 06 '17 at 17:03
Possible duplicate of [Simple post to Web Api](https://stackoverflow.com/questions/19093603/simple-post-to-web-api) — fredrik, Nov 06 '17 at 17:03

score 4 · Accepted Answer · answered Nov 06 '17 at 19:18

I solved using a Class with a single property called Championship :

public  class Value {
        public String Championship { get; set; }
}

and using it as Model in the Action method :

[HttpPost]
public IActionResult Matches([FromBody] Value ch) {
    return Json(ch.Championship);
}

I don't know if there is a simpler way.

Adam · Answer 2 · 2018-08-02T18:14:27.947

Lately, I have really liked using a formData object in javascript to pass data from xhr/ajax to post to MVC actions. Here is an example:

    var nameFormDataHere = new FormData();
    nameFormDataHere.append("championship", championship);
    $.ajax({
    url: "/Bets/Matches",
    type: "POST",
    data: nameFormDataHere,
    dataType: "json"
    processData: false,
    contentType: false,
    success: function (response) {
        alert(response);
    }
});

Just like your example above you will need to create a model(a class) with a property and have the data annotation [HttpPost] above the action that ajax is posting to, with the new model(class) as a parameter into the action. This is from your example above:

Model:

    public  class Value{
        public String Championship { get; set; }
    }

Action:

    [HttpPost]
    public IActionResult Matches(Value ch) {
        return Json(ch.Championship);
    }

I have used this several times and have never had to use the [FromBody] annotation for this to work.

score 0 · Answer 3 · answered Aug 01 '18 at 22:03

0

Try removing the "contentType" qualifier in your ajax statement or simply wrap your parameter in JSON.stringify ie. data:JSON.stringify(championship).

answered Aug 01 '18 at 22:03

Leigh.D

463
5
13

score -1 · Answer 4 · answered Nov 06 '17 at 16:55

-1

Try adding traditional: true

function getMatchesFromChampionshipAsync(championship) {
console.log(championship);
$.ajax({
    url: "/Bets/Matches",
    type: "POST",
    data: { "championship": championship },
    traditional: true,
    dataType: 'json',
    contentType: 'application/json; charset=UTF-8',
    success: function (response) {
        alert(response)
    }
})}

answered Nov 06 '17 at 16:55

Sanchal Kunnel

539
6
8

still null, in the output I get : `Chance3> Executing action method Chance3.Controllers.BetsController.Matches (Chance3) with arguments () - ModelState is Invalid` – ollaw Nov 06 '17 at 17:00
Can you comment out the contentType and dataType lines and try? – Sanchal Kunnel Nov 06 '17 at 17:19
I can comment only dataType, but nothing changed – ollaw Nov 06 '17 at 17:21
If you want to keep the content type as application/json , try changing your data to - data: JSON.stringify({ "championship": championship }) – Sanchal Kunnel Nov 06 '17 at 17:50

AJAX paramter to ASP .NET Core 2 Controller Action

4 Answers4