How do I POST data to a .NET Core Web API using the fetch() javascript method

Question

I am attempting to POST data from a React front end to a .NET Core Web API method. I am POSTing using the fetch() javascript method. When I set a breakpoint in the .NET code to analyze the values of the viewModel, all its members are null.

I've also tried passing a simple string instead of the view model, but that is also null.

I've tried adding the [FromBody] attribute in front of the parameter.

ContactForm.js

onSubmit(e) {
    e.preventDefault();

    let data = {
        viewModel: {
            name: this.state.name,
            serviceRequested: this.state.interest,
            email: this.state.email,
            phone: this.state.phone,
            contactPreference: this.state.preference
        }
    };

    fetch('api/Contact/Contact', {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)      
    })
    .then(response => {
        response.text().then(function (text) {
            alert(text);
        });
    });

}

ContactController.cs

private readonly string successMessage = "success";
private readonly string modelStateMessage = "Invalid input.";

[HttpPost("[action]")]
public ActionResult Contact(ContactFormViewModel viewModel)
    {
        if (ModelState.IsValid)
        {

        }
        else 
        {
            return Content(modelStateMessage);
        }

        return Content(successMessage);
    }

ContactFormViewModel.cs

public class ContactFormViewModel {

    [Required]
    public string Name {get;set;}

    public string ServiceRequested {get; set;}

    [DataType(DataType.EmailAddress)]
    public string Email {get;set;}

    [DataType(DataType.PhoneNumber)]
    public string Phone {get;set;}

    public string ContactPreference {get;set;}

    [StringLength(1000)]
    public string Message {get;set;}

}

I am expecting the data to populate the view models properties, but they are all null. Firefox's dev tools show the Request is passing JSON params in the body.

As you say yourself, in the request body is your data. The JavaScript is fine. I would suggest changing the question title, this seems not related to fetch. Have you tried posting something with postman for example? — The Fool
– The Fool, Commented Sep 26, 2019 at 22:21
I mostly work in .NET Framework, so this may not apply to Core, but normally when I have a POST function it accepts FormCollection collection as its parameters, rather than the view model. Maybe give this a try: public ActionResult Contact(FormCollection collection) — mullac
– mullac, Commented Sep 26, 2019 at 22:50

Nan Yu · Accepted Answer · 2019-09-27 05:33:38Z

1

Modify your code from :

let data = {
    viewModel: {
        name: this.state.name,
        serviceRequested: this.state.interest,
        email: this.state.email,
        phone: this.state.phone,
        contactPreference: this.state.preference
    }
};

To :

let data = {                    
    name: this.state.name,
    serviceRequested: this.state.interest,
    email: this.state.email,
    phone: this.state.phone,
    contactPreference: this.state.preference
};

And keep your client code to post json string with application/json as content-type . Receive the value on server side with [FromBody] :

[HttpPost("[action]")]
public ActionResult Contact([FromBody]ContactFormViewModel viewModel)
{

   ....
}

answered Sep 27, 2019 at 5:33

Nan Yu

27.7k9 gold badges75 silver badges157 bronze badges

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

1 Comment

eric-hunter Over a year ago

Thanks! Removing viewModel: {...} worked. So, I wonder what it would look like if I had two view models? Will play around with it.

anjali gupta · Accepted Answer · 2019-09-27 05:43:13Z

0

I always use to make the method as static and async, you can modify accordingly i.e. remove static and async in case you don't need..If you have any query please reply

Below is code:

  static async post(URL, body) {
    debugger;
    const response = await fetch(`${API_URL_PREFIX}/api/${url}`, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            Pragma: 'no-cache',
        },
        body: JSON.stringify(body),
        credentials: 'include',
        mode: 'cors',
    })

    return response.ok;
}

edited Sep 27, 2019 at 5:43

answered Sep 27, 2019 at 5:38

anjali gupta

12 bronze badges

1 Comment

eric-hunter Over a year ago

Thank you for the suggestion. I will look into making it async. I've also seen some examples using fetch with async.

Collectives™ on Stack Overflow

How do I POST data to a .NET Core Web API using the fetch() javascript method

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related