使用 razor 页面的 fetch post 方法不发送正文

Question

我想使用 ajax（获取 api）post 将一些数据从页面传输到页面模型。我设法到达“OnPostTest”处理程序，但我没有收到任何数据 - 变量“json”为空。我的问题在哪里？是在我的 ajax 调用中还是在 razor 页面模型方法中？谢谢

razor page- 页面模型

public JsonResult OnPostTest(string json)
{
    return new JsonResult(json);
}

js

async function getData() {
    fetch('./test/Test',
        {
            method: "POST",
            body: JSON.stringify({
                json: 'yourValue'
            }),
            headers: {
                'X-CSRF-TOKEN': document.getElementsByName("__RequestVerificationToken")[0].value,
                'Content-Type': 'application/json',
                Accept: 'application/json',
            }
        })
        .then(function (res) { return res.json(); })
        .then(function (data) { alert((data)) })
}

剃须刀页面

<form method="post">
    <button type="button" onclick="getData(this)" value="1">send</button>
</form>

----编辑---- js

async function getData() {
    fetch('./test/Test',
        {
            method: "POST",
            body: JSON.stringify(
                {
                    name: "myname",
                    value: 1,
                    date:new Date()
                }
            ),
            headers: {
                'X-CSRF-TOKEN': document.getElementsByName("__RequestVerificationToken")[0].value,
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            }
        })
        .then(function (res) { return res.json(); })
        .then(function (data) { alert((data)) })
}

razor 页面 - 页面模型

public JsonResult OnPostTest([FromBody] ViewModel json)
        {
            return new JsonResult(json.Name);
        }

        public class ViewModel
        {
            public string Name { get; set; }
            public int Value { get; set; }
            public DateTime date { get; set; }
        }

Answer 1

需要更改headers。因为bakend接收的是一个字符串，所以body应该只有一个字符串。

fetch('[url]',
        {
            method: "POST",
            body: JSON.stringify(
                 'yourValue'
            ),

            headers: {
                RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
                'Content-Type': 'application/json',
                Accept: 'application/json',
            }
        })
        .then(function (res) { return res.json(); })
        .then(function (data) { console.log(data) })

在页面处理程序中添加 [FromBody]。

  public JsonResult OnPostTest([FromBody]string json)
    {
        return new JsonResult(json);
    }

编辑：

如果传递复杂对象{name:"myname",value:"5"}，则需要用JSON.stringify()对对象进行序列化。

      body: JSON.stringify(
             name:"myname",
             value:"5"
        ),

并且bakend应该使用一个复杂的对象来接收。

    public JsonResult OnPostTest([FromBody]ViewModel json)
    {
        return new JsonResult(json);
    }
     
    public class ViewModel
    {
        public string Name { get; set; }
        public int Value { get; set; }
    }

使用 razor 页面的 fetch post 方法不发送正文

fetch post method with razor page doesn't send body

javascript

ajax

fetch

asp.net-core

razor-pages