pass dictionary to controller asp.net mvc

I am wanting to pass a dictionary of type <int,int> to my controller via an Ajax post. The main reason here is the post may have between 1-3 key value pairs here (none of these values are known at compile time) and in the future it may go up to 5.

Also in the post I have to pass in some other data, such as Id and name, which a开发者_如何学Cll works as normal.

How would I construct this dictionay in the javascript then send it via the JQuery post and finally receive it on the controller to process?

Edit 2: I have decided to just solve this with a post for each value instead of trying to pass a dictionary.

EDIT: Here is my source for the function so you can see what I am trying:

function BindAddMenuItem() {
        $(".AddMenuItem").click(function (e) {
            e.preventDefault();

            //get header id from link by removing addmenuitem from this.id
            var currentId = $(this).attr("id").replace("AddMenuItem", "");

            //get itemnumber, itemname, itemdetails from textboxes with same header id
            var restaurantId = jQuery.trim($("#RestaurantId").val());
            var itemNumber = jQuery.trim($("#ItemNumber" + currentId).val());
            var itemName = jQuery.trim($("#ItemName" + currentId).val());
            var itemDetails = jQuery.trim($("#ItemDetails" + currentId).val());

            var costs = new Object();
            //select all textboxes with class "Header" + currentId
            $(".Header" + currentId).each(function (i) {
                var optionId = $(this).attr("id").replace("Option", "");
                costs[optionId] = $(this).val();
            });


            $.ajax(
            {
                type: "POST",
                url: "/Menu/AddMenuItem",
                data: "reastaurantId=" + restaurantId + "&menuHeaderId=" + currentId + "&itemNumber=" + itemNumber + "&itemName=" + itemName + "&itemDetails=" + itemDetails + "&costs=" + costs,
                dataType: "html",
                success: function (result) {
                    var domElement = $(result);
                    $("#MenuContainer").replaceWith(domElement);
                    var newNum = parseInt(itemNumber) + 1;
                    $("#ItemNumber" + currentId).val(newNum);
                    BindAllBehaviours();
                }
            });
        });

    }

Something like (javascript)

dict = new Object();
dict['12'] = 5;
dict['13'] = 6;
dict['1000'] = 21;
dict['9'] = 13;
dict['13'] = 48;

$.post('/client.mvc/mypostaction/', { myDictionary: dict });

You can then post the dict object to your controller using a Dictionary<int, int> as property type.

ActionResult MyPostAction(Dictionary<string, int> myDictionary)

edit from author's code second time:

The following works for me, when having a Dictionary<string, int> kvPairs. <int, int> isn't going to work after all.

Make your post like:

var dict = new Object();
dict['13'] = 9;
dict['14'] = 10;
dict['2'] = 5;

$.post('controller.mvc/Test', { 'kvPairs': dict }, function(obj) { $('#output').html(obj.Count); }); 

JavaScript object / dictionary has to be passed as a list of key-value pairs to ASP.NET MVC controller when Dictionary<TKey, TValue> is expected. Example:

If you have a dictionary like this:

public Dictionary<string, decimal?> SomeMapping { get; set; }

then you have to use something like this in your JavaScript:

var sourceMapping = { a: 1, b: 1.5, c: null };
var SomeMapping = [];
for (var key in sourceMapping) {
    if (sourceMapping.hasOwnProperty(key)) {
        SomeMapping.push({ Key: key, Value: sourceMapping[key] });
    }
}

I've used this approach in asynchronous POST request (sent using jQuery) that had content type set to 'application/json' (this may or may not be important in your case).

Client (JavaScript):

var dict = new Object();
dict.Key1 = "Value1"
dict.Key2 = "Value2"

$.post('/YourController/YourAction/', dict);

NOTE: The "dict" objects gets serialized behind the scenes before being sent to your action.

Server:

public ActionResult YourAction()
{
    string postData = string.Empty;
    using (StreamReader sr = new StreamReader(Request.InputStream))
    {
        postData = sr.ReadToEnd();
    }    

    //Load post data into JObject (Newtonsoft.Json)
    JObject o = JObject.Parse(postData);

    //Extract each key/val 
    string val1 = (string)o["Key1"];

    //Do whatever....
}

None of these worked for me except for mczers, but he doesn't show all the steps, and makes it difficult when you're trying to remember how you set up an ajax request. So I wanted to put everything that actually just works. First, in JavaScript:

        var validDict = new Array();
        validDict[0] = { key: 1, value: 4 }
        validDict[1] = { key: 42, value: 5}


var path = "@Url.Action("ControllerName", "ActionName")";
        $.ajax({
            url: path,
            type: "POST",
            data: JSON.stringify(validDict),
            contentType: "application/json; charset=utf-8",
            async:false,
            success: function(status, xhr)
            {

                alert(status);
              
            },
            error: function(xhr, status, error)
            {
                alert(error);
               

            }});

Then in your controller:

        [HttpPost]
        public ActionResult ActionName(Dictionary<int, int> validDict)
        {
        // doStuff();
        return Content("Success");
        }

A dictionary of the kind IDictionary<string, string> on server side can be posted from javascript like

{"Key1": "Value1", "Key2": "Value2"}

on the Server Side in ASP.NET Web API

[HttpPost]
public IHttpActionResult([FromBody]IDictionary<string, string> requestParam){
}

Above example is for an Http POST with the Json data in the Body

For passing a Dictionary I found the following working answer: submitting-a-dictionary-to-an-asp-net-mvc-action

@model WebApplication3.Controllers.ExampleViewModel @{ ViewBag.Title = "New";
var first = Guid.NewGuid(); var second = Guid.NewGuid(); }

<h2>New</h2>

@using (Html.BeginForm(new { action = "create", controller = "home" })) {
foreach (var kvp in Model.Values) {
<p>
  <input type="text" name="Model.Values[@first].Key" value="@kvp.Key" />
  <input type="text" name="Model.Values[@first].Value" value="@kvp.Value" />
  <input type="hidden" name="Model.Values.Index" value="@first" />
</p>
}

you have to generate A Guid for the dictionary index, and you have to create 3 inputs, one for the Key, one for the Value and one for the Index of the Dictionary

Also I have submited using Jquery with the following:

$('form#frmFormId').submit(function (e) {
        e.preventDefault();
        var formData = new FormData(this);
        //debugger;
        $('#cover-spin').show(100);
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: formData,
            processData: false,
            contentType: false            
        }
        );
        return false;
    });