Post Json Dictionary to the controller

Question

I have the following code in my jQuery file

var bases = {};
for (var j = 0; j < selectedVariants.length; j++) {
     bases[selectedVariants[j].BId] = selectedVariants[j].CId;
}

and i am getting some data in bases dictionary now

and my question here is how do I pass this bases dictionary to controller through ajax call.

I tried the following thing but bases count in the controller is coming as ZERO

$.ajax({
    url: $.url('~/TUP/Tflow'),
    type: 'POST',
    data: { baseDetails: JSON.stringify(bases)},
    async: true,
    cache: false,
});

Here when I see in my controller ... bases count is coming as ZERO

Please help me on this

Controller :

[HttpPost]
public JsonResult Tflow(JsonFileContentInputs basedetails)
{   
    //some code   
}

and my model :

[ModelBinder(typeof(JsonModelBinder))]
[DataContract]
public class JsonFileContentInputs
{
    [JsonProperty(PropertyName = "basedetails")]
    [DataMember]
    public Dictionary<string, string> basedetails { get; set; }              
}

You don't need to stringify it, the function should take care transforming it to JSON. This is more dependent on how your controller is configured. What server side technology are you using? — Callum Linington, Mar 02 '15 at 09:40
Thanks for the response .. Controller : [HttpPost] public JsonResult Tflow(JsonFileContentInputs basedetails) { //some code } and my model : [ModelBinder(typeof(JsonModelBinder))] [DataContract] public class JsonFileContentInputs { [JsonProperty(PropertyName = "basedetails")] [DataMember] public Dictionary basedetails { get; set; } } — user3848181, Mar 02 '15 at 09:44
try like this : ``data: JSON.stringify({ baseDetails: bases}),`` — Ehsan Sajjad, Mar 02 '15 at 09:54
Check this; http://stackoverflow.com/questions/4710729/post-json-dictionary — malkam, Mar 02 '15 at 10:17
check out this solution it might solve your issue- http://stackoverflow.com/a/5397743/3748701 — Manik Arora, Mar 02 '15 at 10:21

rmorrin · Answer 1 · 2015-03-03T08:35:08.573

Try the following approach. As @EhsanSajjad mentioned, you'll need to call JSON.stringify on all of your data, not just the bases object:

$.ajax({
    url: '/TUP/Tflow',
    type: 'POST',
    data: "json=" + JSON.stringify({baseDetails: bases}), // stringify everything,
    dataType: 'text',
    async: true,
    cache: false
});

Then in your controller, instead of trying to use model binding, we can just deserialize the data ourselves using Json.NET.

Controller:

[HttpPost]
public ActionResult Tflow(string json)
{  
    // deserialize
    var data = JsonConvert.DeserializeObject<JsonFileContentInputs>(json);

    // more code
}

Model:

// You can drop these two as we aren't using the modelbinding
// [ModelBinder(typeof(JsonModelBinder))] 
// [DataContract]
public class JsonFileContentInputs
{
    [JsonProperty(PropertyName = "baseDetails")]
    public Dictionary<string, string> BaseDetails { get; set; }  
}

~~Unfortunately, reading the raw stream of the request in the controller seems to be necessary as MVC controllers won't play nice with raw JSON by default. More info here.~~

EDIT: It looks like you can pass raw JSON to an MVC controller, you just need to specify the ajax dataType as text and ensure the parameter names match up. I've updated my answer accordingly.

score 1 · Accepted Answer · answered Mar 02 '15 at 10:29

Instead of receiving the Class object, you should receive it as string and then serialize into object like below.

public JsonResult Tflow(string basedetails)
{   
    //some code
    var model = new JavascriptSerializer().Deserialize<JsonFileContentInputs>(basedetails);
    // Your code
}

Post Json Dictionary to the controller

2 Answers2