将字典传递给 controller asp.net mvc

Question

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

    }

Answer 1

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

Answer 2

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).

Answer 3

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....
}

Answer 4

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

Answer 5

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

Answer 6

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