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
– The Bearded Llama, Commented Nov 6, 2017 at 17:03

ollaw · Accepted Answer · 2017-11-06 19:18:50Z

4

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.

answered Nov 6, 2017 at 19:18

ollaw

2,2031 gold badge24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam · Accepted Answer · 2018-08-02 18:14:27Z

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.

Leigh.D · Accepted Answer · 2018-08-01 22:03:41Z

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 1, 2018 at 22:03

Leigh.D

4877 silver badges16 bronze badges

Comments

Sanchal Kunnel · Accepted Answer · 2017-11-06 16:55:20Z

-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 6, 2017 at 16:55

Sanchal Kunnel

5396 silver badges8 bronze badges

4 Comments

ollaw Over a year ago

still null, in the output I get :

Chance3>       Executing action method Chance3.Controllers.BetsController.Matches (Chance3) with arguments () - ModelState is Invalid

Sanchal Kunnel Over a year ago

Can you comment out the contentType and dataType lines and try?

ollaw Over a year ago

I can comment only dataType, but nothing changed

Sanchal Kunnel Over a year ago

If you want to keep the content type as application/json , try changing your data to - data: JSON.stringify({ "championship": championship })

Collectives™ on Stack Overflow

AJAX paramter to ASP .NET Core 2 Controller Action

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related