ASP.NET MVC 核心 POST 请求未将 JSON 数据转换为模型

Question

我有一个模型，我将其序列化到屏幕上并与 Vue.js 一起使用。 screen/model 更改后，我正在使用 axios 执行 POST 请求返回到我的 ASP.NET Core (2.0) 控制器。到目前为止，在我的控制器中评估我的自定义模型时，尝试的每种组合都会产生所有空值。如有任何建议，我们将不胜感激。

型号：

[Serializable]
public class ClientsWebsite
{
    [Key]
    public string ClientID { get; set; }
    public string CustomSiteScript { get; set; }
    public string WebsiteName { get; set; }
    public string FormName { get; set; }
    public string SliderImagePath { get; set; }
    public string MessageHeader { get; set; }
    public string CallToActionMessage { get; set; }
}

Vue 和 POST 调用：

var sliderApp = new Vue({
    el: '#sliderApp',
    data: {
        ClientsWebsite: [],
        axajLoaded: false,
        picked: []
    },
    created: function () {
        getUserSettings()
    }
})

function saveCustomSettings() {
    axios.post('/Slider/Slider/SaveCustomSettings', {
        vm: sliderApp.ClientsWebsite
    })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}

控制器：

    [HttpPost]
    public string SaveCustomSettings(ClientsWebsite vm)
    {
        if (ModelState.IsValid)
        {
            //stuff...
        }

        return "Success";
    }

我也尝试在 JavaScript POST 调用中使用 JSON.stringify，没有任何变化。

POST Header 请求负载的结果：

{"ClientsWebsite":{"ClientID":"6056e4a8-32a8-4042-b750-50c609edf140","CustomSiteScript":"someScriptHere","WebsiteName":"Blah.com","FormName":"Contact1","SliderImagePath":"ContactUs3","MessageHeader":"Hello, please send us a message","CallToActionMessage":"We will respond ASAP!!!!!"}}

更新：解决方案来自以下两个答案的组合。

Answer 1

你有一个物体包裹着你的模型：

{"ClientsWebsite":{"ClientID":"6056e4a8-32a8-4042-b750-50c609edf140","CustomSiteScript":"someScriptHere","WebsiteName":"Blah.com","FormName":"Contact1","SliderImagePath":"ContactUs3","MessageHeader":"Hello, please send us a message","CallToActionMessage":"We will respond ASAP!!!!!"}}

删除它：

{"ClientID":"6056e4a8-32a8-4042-b750-50c609edf140","CustomSiteScript":"someScriptHere","WebsiteName":"Blah.com","FormName":"Contact1","SliderImagePath":"ContactUs3","MessageHeader":"Hello, please send us a message","CallToActionMessage":"We will respond ASAP!!!!!"}

对于你的功能：

function saveCustomSettings() {
axios.post('/Slider/Slider/SaveCustomSettings', 
    sliderApp.ClientsWebsite
)
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

}

Answer 2

除了 Nikolaus 所说的，尝试在 ClientsWebsite vm 之前添加 [FromBody]。

[HttpPost]
public string SaveCustomSettings([FromBody]ClientsWebsite vm)
{
    if (ModelState.IsValid)
    {
        //stuff...
    }

    return "Success";
}

ASP.NET MVC 核心 POST 请求未将 JSON 数据转换为模型

ASP.NET MVC core POST Request not converting JSON data to Model

c#

post

vue.js

axios

asp.net-core-mvc-2.0