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

【问题标题】：ASP.NET MVC core POST Request not converting JSON data to ModelASP.NET MVC 核心 POST 请求未将 JSON 数据转换为模型
【发布时间】：2018-03-09 12:10:28
【问题描述】：

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

型号：

[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 Request Payload 的结果：

{"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!!!!!"}}

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

【问题讨论】：

标签： c# post vue.js axios asp.net-core-mvc-2.0

【解决方案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);
    });

}

【讨论】：

更改 POST 请求从字符串中删除了“ClientWebsite”。我根据您的更改比较了加载到屏幕上的 GET 请求对象和 POST 请求，并且对象完全相同。但是在控制器中，我所有的对象仍然是空的。
如果你想改变post-Request本身，你也必须删除第一个和最后一个大括号。
请求很好，与您现在在上面显示的方式相匹配。
你还有vm==null吗？
vm 不是 Null，但是 vm 内的所有属性仍然是 null。

【解决方案2】：

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

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

    return "Success";
}

【讨论】：

你的两个答案都是解决方案！