简体   繁体   English

如何使用提取将JavaScript中的FormData发送到ASP.NET Core 2.1 Web API

[英]How to send FormData from javascript to ASP.NET Core 2.1 web API using fetch

i'm trying to create a form that sends FormData object to API controller that serializes the data to Article class, but i cannot get it to work. 我正在尝试创建一个表单,该表单将FormData对象发送到API控制器,该控制器将数据序列化为Article类,但是我无法使其正常工作。 I have already tried the things that are commented. 我已经尝试过评论的内容。

this is my HTML: 这是我的HTML:

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

this is my JS: 这是我的JS:

<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>

Controller: 控制器:

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

and my Article class: 和我的Article类:

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

Works now! 现在工作! The solution is to not set any content-type headers along with adding the [FromForm], thank you all contributing. 解决方案是在添加[FromForm]的同时不要设置任何内容类型的标题,谢谢大家的贡献。

part of the solution was at this thread 解决方案的一部分就是在这个线程上

these are the changes: 这些是更改:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 ASP.NET Core 2.1 MVC 使用 XMLHttpRequest 将数据从 JavaScript 发送到 Action 方法 - ASP.NET Core 2.1 MVC send data from JavaScript to Action method using XMLHttpRequest 在Asp.net Web API Httpresponsemessage中读取Javascript FormData值 - Reading Javascript FormData value in Asp.net Web api Httpresponsemessage 将数据发布到 asp.net 核心 web api 和 Z80FBDBB37CED758 中的 FormData 时出现“400 bad request” - “400 bad request” when posting data to asp.net core web api with FormData in XmlHttpRequest 无法从 controller 获取 - React/asp.net 核心 Web API - Unable to fetch from controller - React/asp.net core Web API 如何从 ASP.NET 核心 web 应用程序中获取 JSON 信息 - How to get JSON information from ASP.NET core web app using JavaScript 调用 ASP.NET Core 2.2 Web API 时本地 Javascript 提取发布请求失败。 CORS 已启用 - Local Javascript Fetch Post Request Fails with call to ASP.NET Core 2.2 Web API. CORS is enabled 将表单数据从 React 发送到 ASP.NET Core API - Send form data from React to ASP.NET Core API 无法使用JavaScript将HTTP POST请求发送到ASP.NET Web API Controller - Unable to send a http POST request to ASP.NET web api Controller using javascript 如何在动态创建的表单中使用 JQuery Ajax 将表单数据提交到 ASP.NET 核心 MVC 操作 - How to submit formdata to ASP.NET Core MVC action using JQuery Ajax in a dynamic created form 如何从 JS 获取和保存令牌中获取 ASP.NET Web Api 令牌(登录) - How to grab ASP.NET Web Api token (login) from a JS fetch and save token
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM