How to post javascript objects with dynamic values to a mvc6 controller action

Question

In an asp.net5/mvc6 project I've created a page to edit documents from an Azure DocumentDB storage. I use jquery to post the data to a controller action.

A sample document from the database looks like this:

{  
    "key": "name1",  
    "value": 23
}

The property value can have different types (number, string, etc).

How can I keep this value dynamic when posting to the controller? If I create a class like this works fine:

public class Setting
{
    {
        [JsonProperty(PropertyName = "key")]
        public string Key { get; set; }

        [JsonProperty(PropertyName = "value")]
        public string Value { get; set; }
    }
}

In combination with a strongly typed parameter in the action:

public async Task<IActionResult> Update(string collectionName, List<Setting> settings)

But now the value is always of type string. I've tried to use JObject like this in the action:

public async Task<IActionResult> Update(string collectionName, List<JObject> settings)

But then deserialized parameter settings inside the action has 'null' values for all properties:

{  "key": null,  "value": null}

//EDIT Sample of the JS code posting to the action:

var data = {
    settings: [{ key: "test",  value: 123}]
}
$.ajax({
    url: 'controller/action',
    type: 'post',
    dataType: 'json',
    data: data
});

Dynamic Json data passed to a controller took me to this answer which took me to this link which took me to this link. I noticed the MVC rev number kept getting lower and lower, so I stopped. =\ — ourmandave
– ourmandave, Commented Dec 2, 2015 at 12:54
Where is your code which is posting these js objects to the action method ? — Shyju
– Shyju, Commented Dec 3, 2015 at 19:53

Shyju · Accepted Answer · 2015-12-03 20:57:34Z

1

Create a new viewmodel like this.

public class CollectionSettings
{
    public string CollectionName { set; get; }

    public List<Setting> Settings { set; get; }
}

and use that as the parameter of your action method

[HttpPost]
public async Task<IActionResult> Update([FromBody]  CollectionSettings model)
{
     // to do : Do something useful.
     return new JsonResult(new {Status = "Success"});
}

When you send your data from client side, be sure to convert the javascript object to Json string using JSON.stringify method and specify the contentType property value as "application/json".

The below code should work fine.

var items = [];
var item1 = {
    "key": "name1",
    "value": 23
};
items.push(item1);

var model = { CollectionName: "test", Settings: items };

$.ajax({
    url: "@Url.Action("Update","Home")",
    type: "POST",
    data: JSON.stringify(model),
    contentType: "application/json"
}).done(function(r) {
    console.log(r);
});

answered Dec 3, 2015 at 20:57

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Over a year ago

The main issue is that I didn't want to use a strongly typed class such as 'Settings' because 'Value' can be of any type. With a strongly typed class it works fine, but value is always a string.

Collectives™ on Stack Overflow

How to post javascript objects with dynamic values to a mvc6 controller action

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related