How to pass data to controller using Fetch api in asp.net core

Question

I post data using fetch like this in my client js scripts

    fetch('/myarea/mycontroller/myaction', {
        method: 'post',
        body: JSON.stringify({ name: namevalue, address: addressvalue })
    })
        .then(function (response) {
            if (response.status !== 200) {
                console.log('fetch returned not ok' + response.status);
            }

            response.json().then(function (data) {
                console.log('fetch returned ok');
                console.log(data);
            });
        })
        .catch(function (err) {
            console.log(`error: ${err}`);
        });
    }, false);

Then on my controller

    [HttpPost]      
    public async Task<IActionResult> MyAction(string name, string address)
    {
        // Error, name and address is null here, shouldn't be!
        // more code here ...
    }

My controller action is being called correctly, and I am able to debug inside it, but no data being passed. What could be wrong here? Thanks

erikbozic · Accepted Answer · 2017-07-05 11:59:00Z

18

The controller action is expecting query parameters (/myaction?name=myname&address=myaddress). That's the default. You're sending them in the body.

You can change the javascript to send them as query parameters. (see here: https://github.com/github/fetch/issues/256)

Or you can tell the controller action to take the values from the body:

[HttpPost]      
public async Task<IActionResult> MyAction([FromBody] Person person)
{
    var myName = person.Name;
}

public class Person
{
    public string Name {get; set; }

    public string Address {get; set; }
}

edited Jul 5, 2017 at 11:59

answered Jul 5, 2017 at 11:52

erikbozic

1,6751 gold badge16 silver badges21 bronze badges

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

5 Comments

Alexander Over a year ago

I introduced [FromBody] and PersonModel in the controller, but it is not hitting my breakpoint anymore at the controller. It is not calling my controller. Why is it so?

Alexander Over a year ago

The PersonModel works with query string but not with [FromBody]

Alexander Over a year ago

It now works! I just set the fetch api headers like this headers: 'Content-Type': 'application/json;'

KVM Over a year ago

Adding [FromBody] didn't work, event with Content-Type set to application/json

Dean P Over a year ago

@KVM Me neither. Did you manage to get it to work?

Kia Kaha · Accepted Answer · 2018-08-23 16:33:48Z

8

The [FromBody] attribute kicked in for me only after I defined the header that it is an "application/json" type:

fetch('api/Profile/Update', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ description: "Some text here" })
    });

And this is how the controller action looks like:

    [HttpPost("[action]")]
    public async Task<IActionResult> Update([FromBody] ProfileUpdateModel profileUpdateModel)
    {
        //Do some stuff here...
        return  RedirectToAction("/", "HomeController");
    }

And the description property now receives the value from the request. Hope this gives final clarity to somebody tackling with the issue.

answered Aug 23, 2018 at 16:33

Kia Kaha

1,8291 gold badge23 silver badges43 bronze badges

2 Comments

Dean P Over a year ago

That URL you included in the fetch method: I assume Profile is the controller name and Update is the action method. I further assume its in the api folder. How do you configure this for it to know where the api folder is? Can you elaborate your answer?

Kia Kaha Over a year ago

@DeanP there is no api folder - just [Route("api/[controller]")] attribute which tells ASP how to recognise the route

Ayaz Zali · Accepted Answer · 2018-09-26 14:50:57Z

3

Or if you had <form>...</form> you could use

fetch('/url', {
    method: 'POST',
    credentials: 'include',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: $('#editContactModal form').serialize() 
    // body like "id=1&clientid=3&name=me&phones=123&[email protected]"
})

without [FromBody] !!! (just with regular action method in controller)

answered Sep 26, 2018 at 14:50

Ayaz Zali

311 bronze badge

Collectives™ on Stack Overflow

How to pass data to controller using Fetch api in asp.net core

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related