Тело Ajax POST пусто при обращении к методу API

Question

Я свободно следую этому руководству , чтобы создать базовое приложение, которое отправляет данные формы в локальный API, а затем добавляет данные в локальную базу данных.

Авторучебник отправляет переменную FormData(event.target), которая представляется мне пустым объектом (не знаю почему, я использовал точный код для проверки этого) - независимо от того, я бы предпочел использовать значения в this.state в любом случае.

Значения state заполняются, как и ожидалось, но данные не передаются методу API, все значения равны нулю ( снимок экрана отладочного представления Visual Studio )

Я попытался поиграться с Content-Type (application / json, multipart / form-data, application / x-www-form-urlencoded) и попытался отправить строку JSON (JSON.stringify(post)) вместообъект состояния, но ни один из них не сработал.

Выводы были:

Объект

{id: 1, дата: сб 27 апреля 2019 10:46: 49 GMT + 0100 (британское летнее время), имя: «Tom», компания: «Acme Inc», сообщение: «Test message»}

Строка

{"id": 1, "date": "2019-04-27T09: 46: 49.361Z", "name": "Tom", "company":«Acme Inc», «message»: «Тестовое сообщение»}

Компонент

import React, { Component } from 'react';

export class AddPost extends Component {
    constructor() {
        super();
        this.state = {
            date: new Date(),
            name: "",
            company: "",
            message: ""
        }
        this.handleChange = this.handleChange.bind(this);
        this.handlePost = this.handlePost.bind(this);
    }

    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handlePost(event) {
        event.preventDefault();
        const post = this.state;
        const xhr = new XMLHttpRequest();

        xhr.open('POST', 'api/Posts/Create');
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(post);
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handlePost}>
                    <input type="text" name="name" placeholder="Name" onChange={this.handleChange} />
                    <input type="text" name="company" placeholder="Company" onChange={this.handleChange} />
                    <input type="text" name="message" placeholder="Message" onChange={this.handleChange} />
                    <button className="btn btn-primary"> Submit</button>
                </form>
            </div>
        );
    }
}

Класс API / методы

// Posts.cs
public partial class Posts
    {
        public int Id { get; set; }
        public DateTime Date { get; set; }
        public string Name { get; set; }
        public string Company { get; set; }
        public string Message { get; set; }
    }

// PostsController.cs
PostsDataAccessLayer dal = new PostsDataAccessLayer();

[HttpPost("[action]")]
[Route("api/Posts/Create")]
public int Create(Posts posts)
{
    return dal.AddPost(posts);
}

// PostsDataAccessLayer.cs
DotNetCoreAndReactContext db = new DotNetCoreAndReactContext();

public int AddPost(Posts posts)
{
    try
    {
        db.Posts.Add(posts);
        db.SaveChanges();
        return 1;
    }
    catch
    {
        throw;
    }
}

Схема таблицы

CREATE TABLE [dbo].[Posts] (
    [Id]      INT           NOT NULL,
    [Date]    DATETIME      NOT NULL,
    [Name]    VARCHAR (50)  NOT NULL,
    [Company] VARCHAR (50)  NOT NULL,
    [Message] VARCHAR (MAX) NOT NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

Есть идеи?

Answer 1

Поместите [FromBody] в подпись действия следующим образом:

[HttpPost("[action]")]
[Route("api/Posts/Create")]
public int Create([FromBody]Posts posts)
{
    return dal.AddPost(posts);
}