CODEWITHSUNDEEP
c#postvue.jsaxiosasp.net-core-mvc-2.0
Adam
Adam

Reputation: 490

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

I have a model that I serialize to the screen and use with Vue.js. After screen/model changes I am using axios to perform a POST request back into my ASP.NET Core (2.0) Controller. So far every combination of tries results in all null values when evaluating my custom model in my Controller. Any suggestions would be appreciated.

Model:

[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 and POST Call:

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

Controller:

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

        return "Success";
    }

I have also tried using JSON.stringify in my JavaScript POST call, no changes.

Results of the 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!!!!!"}}

UPDATE: The solution came from a combination of both the answers below.

Upvotes: 4

Views: 6535

Answers (2)

farzaaaan
farzaaaan

Reputation: 410

In addition to what Nikolaus said, try adding [FromBody] before ClientsWebsite vm.

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

    return "Success";
}

Upvotes: 2

Nikolaus
Nikolaus

Reputation: 1869

You have a object wrapped around your model:

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

Remove it:

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

For your function:

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

}

Upvotes: 2

Related Questions