How do I pass a Dictionary as a parameter to an ActionResult method from jQuery/Ajax?
Asked Answered
T

6

12

I'm using jQuery to make an Ajax call using an Http Post in ASP.NET MVC. I would like to be able to pass a Dictionary of values.

The closest thing I could think of was to pass in a multi-dimensional array of strings, but the result that actually gets passed to the ActionResult method is a single dimensional string array containing a string concatenation of the "key/value" pair.

For instance the first item in the below "values" array contains the below value:

"id,200"

Here's an example of my ActionResult method:

public ActionResult AddItems(string[] values)
{
    // do something
}

Here's an example of how I'm calling the method from jQuery:

$.post("/Controller/AddItems",
    {
        values: [
            ["id", "200"],
            ["FirstName", "Chris"],
            ["DynamicItem1", "Some Value"],
            ["DynamicItem2", "Some Other Value"]
        ]
    },
    function(data) { },
    "json");

Does anyone know how to pass a Dictionary object from jQuery to the ActionResult method instead of an Array?

I would really like to define my ActionResult like this:

public ActionResult AddItems(Dictionary<string, object> values)
{
    // do something
}

Any suggestions?

UPDATE: I tried passing in a comma within the value and it basically just makes it impossible to actually parse the key/value pair using string parsing.

Pass this:

values: [
    ["id", "200,300"],
    ["FirstName", "Chris"]
]

results in this:

values[0] = "id,200,300";
values[1] = "FirstName,Chris";
Trilobite answered 3/7, 2009 at 1:43 Comment(3)
I don't think there is a way to do that.I may be wrong, but it will be trivial to parse the data passed into as a string array, and create the dictionary yourself inside the AddItems method.Appreciable
Not sure what parsing issues would be caused by any commas within the values.Trilobite
At last I figured it out, thanks to all who made suggestions! I added my final solution as an answer below. I'll mark it as the Correct Answer as soon as SO lets me. Thanks everyone!Trilobite
T
10

At last I figured it out!! Thanks for the suggestions everyone! I finally figured out the best solution is to pass JSON via the Http Post and use a custom ModelBinder to convert the JSON to a Dictionary. One thing I did in my solution is created a JsonDictionary object that inherits from Dictionary so that I can attach the custom ModelBinder to the JsonDictionary type, and it wont cause any conflicts in the future if I use Dictionary as a ActionResult parameter later on for a different purpose than JSON.

Here's the final ActionResult method:

public ActionResult AddItems([Bind(Include="values")] JsonDictionary values)
{
    // do something
}

And the jQuery "$.post" call:

$.post("/Controller/AddItems",
{
    values: Sys.Serialization.JavaScriptSerializer.serialize(
            {
                id: 200,
                "name": "Chris"
            }
        )
},
function(data) { },
"json");

Then the JsonDictionaryModelBinder needs to be registered, I added this to the Application_Start method within the Global.asax.cs:

protected void Application_Start()
{
    ModelBinders.Binders.Add(typeof(JsonDictionary), new JsonDictionaryModelBinder());
}

And, finally here's the JsonDictionaryModelBinder object and JsonDictionary object I created:

public class JsonDictionary : Dictionary<string, object>
{
    public JsonDictionary() { }

    public void Add(JsonDictionary jsonDictionary)
    {
        if (jsonDictionary != null)
        {
            foreach (var k in jsonDictionary.Keys)
            {
                this.Add(k, jsonDictionary[k]);
            }
        }
    }
}

public class JsonDictionaryModelBinder : IModelBinder
{
    #region IModelBinder Members

    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        if (bindingContext.Model == null) { bindingContext.Model = new JsonDictionary(); }
        var model = bindingContext.Model as JsonDictionary;

        if (bindingContext.ModelType == typeof(JsonDictionary))
        {
            // Deserialize each form/querystring item specified in the "includeProperties"
            // parameter that was passed to the "UpdateModel" method call

            // Check/Add Form Collection
            this.addRequestValues(
                model,
                controllerContext.RequestContext.HttpContext.Request.Form,
                controllerContext, bindingContext);

            // Check/Add QueryString Collection
            this.addRequestValues(
                model,
                controllerContext.RequestContext.HttpContext.Request.QueryString,
                controllerContext, bindingContext);
        }

        return model;
    }

    #endregion

    private void addRequestValues(JsonDictionary model, NameValueCollection nameValueCollection, ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        foreach (string key in nameValueCollection.Keys)
        {
            if (bindingContext.PropertyFilter(key))
            {
                var jsonText = nameValueCollection[key];
                var newModel = deserializeJson(jsonText);
                // Add the new JSON key/value pairs to the Model
                model.Add(newModel);
            }
        }
    }

    private JsonDictionary deserializeJson(string json)
    {
        // Must Reference "System.Web.Extensions" in order to use the JavaScriptSerializer
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        return serializer.Deserialize<JsonDictionary>(json);
    }
}
Trilobite answered 3/7, 2009 at 20:23 Comment(0)
P
4

This is what I tried. Saves a lot of work. Javascript:

  var dict = {};       
        dict["id"] = "200";
        dict["FirstName"] = "Chris";
        dict["DynamicItem1"] = "Some Value";
        dict["DynamicItem2"] = "Some Other Value";

        var theObject = {};
        theObject.dict = dict;
        $.post(URL, theObject, function (data, textStatus, XMLHttpRequest) {
            console.log("success");
        }, "json");

Action Method:

public ActionResult MethodName(DictionaryModel obj)
    {
       //Action method logic
    }

public class DictionaryModel
{
    public Dictionary<string, string> dict { get; set; }

}
Poised answered 21/10, 2014 at 8:56 Comment(1)
Not exactly what I wanted, cause there is no point to pass an object, if you could just pass the dictionary itself but this works good enough. Upvoted. :)Wafd
W
1

It's possible with custom model binders or filters. Behind the scenes - you will have to do it manually anyway (Request.Form, parse strings, create dictionary tralala), but at least - your controller will be clean and code will be reusable for another actions.

Woeful answered 3/7, 2009 at 2:16 Comment(0)
T
1

I don't think it's possible to pass in a Dictionary from jQuery/Ajax to an ActionResult method via an Http Post. One thing I figured out that seems to be the easiest to work with is to pass in a JSON object and then parse that out into a Dictionary.

Here's the modified version of of the above calling "$.post" from jQuery that sends JSON as a pseudo-Dictionary:

$.post("/Controller/AddItems",
    {
        values: Sys.Serialization.JavaScriptSerializer.serialize(
                {
                    id: 200,
                    "name": "Chris"
                }
            )
    },
    function(data) { },
    "json");

The "Sys.Serialization.JavaScriptSerializer.serialize" function is a method of the ASP.NET AJAX JavaScript library.

Here's the modified version of the above ActionResult method:

public ActionResult AddItems(Dictionary<string, object> values)
{
    // Must Reference "System.Web.Extensions" in order to use the JavaScriptSerializer
    var json = new System.Web.Script.Serialization.JavaScriptSerializer();
    var data = json.Deserialize<Dictionary<string, string>>(routeValues);

    // do something
}

I think this makes it much easier to Unit Test by passing JSON, instead of using the Form Collection to send/retrieve the collection of key/value pairs. Also, it's easier to get working than figuring out how to build a custom IModelBinder, and a custom IModelBinder might cause issues with other ActionResult methods when this is the only one I need to do this.

Trilobite answered 3/7, 2009 at 3:2 Comment(1)
Chris, see my comment above. I still think you are going about this the hard way. I'm not 100% sure but I have this niggling feeling that you are .Perusse
S
0

DefaultModelBinder is able to bind your POST to array or dictionary. For example:

for arrays:

public ActionResult AddItems(string[] values)

$.post("/Controller/AddItems", { values: "values[0]=200&values[1]=300" },
    function(data) { }, "json");

or:

$.post("/Controller/AddItems", { values: "values=200&values=300" },
    function(data) { }, "json");

for dictionaries:

public ActionResult AddItems(Dictionary<string, object> values)

$.post("/Controller/AddItems", {
    values: "values[0].Key=value0&values[0].Value=200&values[1].Key=value1&values[1].Value=300" }, function(data) { }, "json");

UPDATED:

If your values are in HTML inputs then in jQuery you can do something like this:

var postData = $('input#id1, input#id2, ..., input#idN").serialize();
// or
var postData = $('input.classOfYourInputs").serialize();

$.post("/Controller/AddItems", { values: postData }, function(data) { }, "json");

UPDATED:

Also check this: Scott Hanselman's ComputerZen.com - ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries

Shuler answered 3/7, 2009 at 9:15 Comment(2)
I tried your Dictionary example, but it doesn't end up populating the "values" parameter; it just ends up being an empty dictionary.Trilobite
Did you try Dictionary<string, string> values instead Dictionary<string, object>. Also check if your values[n] index is zero based and unbroken. Check #1031916 alsoShuler
P
0

This is an old post but I can't help having a few remarks anyway.

@eu-ge-ne: "DefaultModelBinder is able to bind your POST to array or dictionary." True but at least for dictionaries I find the required form notation rather counterintuitive.

@Chris: Yesterday I had exactly the same problem while trying to post a JavaScript (JSON) dictionary to a controller action method. I worked out a totally different custom model binder that processes generic dictionaries with different type arguments. I have only tested it in MVC 3 and probably had the advantage of an improved framework.

For the details of my experiences and the source code of the custom model binder, please see my blog post at http://buildingwebapps.blogspot.com/2012/01/passing-javascript-json-dictionary-to.html

Prepossession answered 19/1, 2012 at 9:27 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.