按下API方法时，Ajax POST正文为空

Question

我正在宽松地按照本教程创建一个基本的应用程序，该程序将表单数据发布到本地API，然后将数据添加到本地数据库。

本教程的作者发布了一个FormData(event.target)变量，该变量对我来说是一个空白对象（不知道为什么，我使用确切的代码来测试它）-无论如何，我更喜欢在其中使用值this.state反正。

state值将按预期填充，但不会将数据传输到API方法，所有值均为null（ Visual Studio调试视图的屏幕截图 ）

我试着使用Content-Type （application / json，multipart / form-data，application / x-www-form-urlencoded）并尝试发送JSON字符串（ JSON.stringify(post) ）状态对象，但没有一个起作用。

输出为：

宾语

{id：1，日期：2019年4月27日星期六10:46:49 GMT + 0100（英国夏令时），名称：“ Tom”，公司：“ Acme Inc”，消息：“ Test message”}

串

{“ id”：1，“ date”：“ 2019-04-27T09：46：49.361Z”，“名称”：“ Tom”，“公司”：“ Acme Inc”，“消息”：“测试消息”}

组件

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);
}