如何使用fetch将FormData从javascript发送到ASP.NET Core 2.1 web API

我试图创建一个表单，将FormData对象发送到API控制器，API控制器将数据序列化到Article类，但我无法让它工作。我已经试过被评论的东西了

这是我的HTML：

<form onsubmit="postArticle()">
<input type="type" name="Title" value="" />
<input type="type" name="Content" value="" />
<input type="submit" value="Submit" />
</form>

---

现在工作！解决方案是在添加[FromForm]时不设置任何内容类型标题，谢谢大家

部分解决方案是在

这些是变化：

//POST:api/Articles
[HttpPost]
公共异步任务PostArticle（[FromForm]文章）
{
字符串名称=article.Title；
如果（！ModelState.IsValid）
{
返回Ok（）；
}
//_上下文.Article.Add（第条）；
//wait_context.SaveChangesAsync（）；
return Ok（）；//createDataAction（“GetArticle”，新的{id=article.id}，article）；
}

现在可以工作了！解决方案是在添加[FromForm]时不设置任何内容类型标题，谢谢大家

部分解决方案是在

这些是变化：

//POST:api/Articles
[HttpPost]
公共异步任务PostArticle（[FromForm]文章）
{
字符串名称=article.Title；
如果（！ModelState.IsValid）
{
返回Ok（）；
}
//_上下文.Article.Add（第条）；
//wait_context.SaveChangesAsync（）；
return Ok（）；//createDataAction（“GetArticle”，新的{id=article.id}，article）；
}

发生了什么？F12浏览器开发工具是否在控制台或网络选项卡中显示任何内容？你的控制器被击中了吗？更多输入…是的，很抱歉我忘了提到，请求返回400，响应是：{“”：[“输入无效。”]}两件事：您没有发布Id字段，这是必需的；您可以尝试使用

PostArticle（[FromForm]Article Article）

我想这里的答案可能会有所帮助：@CamiloTerevinto Ok，我添加了[FromForm]，并创建了一个完全没有Id的新模型，现在请求返回了200（Ok），但没有任何表单数据实际进入文章模型（Title=null，Content=null）发生了什么？F12浏览器开发工具是否在控制台或网络选项卡中显示任何内容？你的控制器被击中了吗？更多输入…是的，很抱歉我忘了提到，请求返回400，响应是：{“”：[“输入无效。”]}两件事：您没有发布Id字段，这是必需的；您可以尝试使用

PostArticle（[FromForm]Article Article）

我想这里的答案可能会有所帮助：@CamiloTerevinto Ok，我添加了[FromForm]，并创建了一个完全没有Id的新模型，现在请求返回了200（Ok），但没有任何表单数据实际进入文章模型（Title=null，Content=null）您应该发布最终编辑的代码，而不是指向另一个问题您应该发布最终编辑的代码，而不是指向另一个问题

<script>

var postArticle = () => {
    event.preventDefault();
    var Article = new FormData(this.event.target);
    console.log([...Article]);
    fetch('/api/Articles', {
        headers: {
            'Content-Type': 'multipart/formdata',
            //'Content-Type': 'application/json'
        },
        method: "POST",
        body: Article
        //body: JSON.stringify(Article)
    })
}
</script>

    // POST: api/Articles
    [HttpPost]
    public async Task<IActionResult> PostArticle(Article article)
    {
        string name = article.Title;
        if (!ModelState.IsValid)
        {
            return Ok();
        }

        _context.Article.Add(article);
        await _context.SaveChangesAsync();

        return Ok();
    }

public class Article
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }
}

var postArticle = () => {
    event.preventDefault();
    var Article = new FormData(this.event.target);
    console.log([...Article]);
    fetch('/api/Articles', {
        method: "POST",
        body: Article
    })
}

// POST: api/Articles
    [HttpPost]
    public async Task<IActionResult> PostArticle([FromForm]Article article)
    {
        string name = article.Title;
        if (!ModelState.IsValid)
        {
            return Ok();
        }

        //_context.Article.Add(article);
        //await _context.SaveChangesAsync();

        return Ok(); //CreatedAtAction("GetArticle", new { id = article.Id }, article);
    }