title: Passing in a List<KeyValuePair<string,string>> to WebAPI is getting me null values
body: <p>I am trying to pass in a list of objects that contains a list of KeyValuePair objects within them, along with a few other properties, to WebAPI.  However, when I send the JSON using something like Rest Console (or even just with an AJAX call from Javascript), the list of objects populates fine, it's the List> that gets the correct number of objects, but always has null for the values.</p>
  
  <p>Here's the code I have been using to debug this.</p>
  
  <p>I created a WebApi method to give me a list of MyModel items, so I can see how JSON was creating them.</p>
  
  <pre><code>    [HttpPost]
      public JsonResult GetSavedItemsJson(int accountId)
      {
          var tmpItem = new List&lt;MyModel&gt;();
          tmpItem.Add( new MyModel
          {
              ItemType = "Item1",
              MinCount = 3000,
              MaxCount = 5000,
              KeyValuePairs = new List&lt;KeyValuePair&lt;string, string&gt;&gt;
              {
                  new KeyValuePair&lt;string, string&gt;("MinItems", "3.0"),
                  new KeyValuePair&lt;string, string&gt;("MaxItems", "11.0")
              }
          });
          tmpItem.Add(new MyModel
          {
              ItemType = "Item2",
              MinCount = 1500,
              MaxCount = 2500,
              KeyValuePairs = new List&lt;KeyValuePair&lt;string, string&gt;&gt;
              {
                  new KeyValuePair&lt;string, string&gt;("PaymentMin", "150"),
                  new KeyValuePair&lt;string, string&gt;("PaymentMax", "500")
              }
          });
          var result = new JsonResult
          {
              MaxJsonLength = int.MaxValue,
              Data = tmpItem
          };
          return result;
      }
  </code></pre>
  
  <p>This gives me back the following JSON:</p>
  
  <pre><code>[
    {
    "ItemType ":"Item1",
    "KeyValuePairs":[
       {
          "Key":"MinItems",
          "Value":"3.0"
       },
       {
          "Key":"MaxItems",
          "Value":"11.0"
       }
    ],
    "MinCount ":3000,
    "MaxCount ":5000
   },
   {
    "ItemType ":"Item2",
    "KeyValuePairs":[
       {
          "Key":"PaymentMin",
          "Value":"150"
       },
       {
          "Key":"PaymentMax",
          "Value":"500"
       }
    ],
    "MinCount ":1500,
    "MaxCount ":2500
     }
  ]
  </code></pre>
  
  <p>I tried adding in my additional properties and making the List of items an array.  </p>
  
  <pre><code>{
   "itemName":"MyTestItem",
   "accountId":54321,
   "userId":12345,
   "itemModels":[
    {
       "ItemType":"Item1",
       "KeyValuePairs":[
          {
             "Key":"MinItems",
             "Value":"3.0"
          },
          {
             "Key":"MinItems",
             "Value":"11.0"
          }
       ],
       "MinCount":3000,
       "MaxCount":5000
    },
    {
       "ItemType":"Item2",
       "KeyValuePairs":[
          {
             "Key":"PaymentMin",
             "Value":"150"
          },
          {
             "Key":"PaymentMax",
             "Value":"500"
          }
       ],
       "MinCount":1500,
       "MaxCount":2500
    }
   ]
  }
  </code></pre>
  
  <p>I get the accountId, ItemName and userId numbers fine.  I also get the List items with the MinCount, MaxCount and ItemType values.  It's just the KeyValuePairs list that give me 2 items for each object, but with null for the values.</p>
  
  <p>The above values I used REST Console to send the values to the WebApi.</p>
  
  <p>If it makes a difference, I used this javascript to create the object.  It gives me the exact same result though.</p>
  
  <pre><code>function saveItem() {
  
  var saveData = new Array();
  var properties = new Array();
  properties.push({ "MinItems": "3.0" });
  properties.push({ "MinItems": "11.0" });
  saveData.push({ ItemType: "Item1", MinCount: 3000, MaxCount: 5000, KeyValuePairs: properties });
  properties = new Array();
  properties.push({ "PaymentMin": "50" });
  properties.push({"PaymentMax": "300" });
  saveData.push({ ItemType: "Item2", MinCount: 1500, MaxCount: 2500, KeyValuePairs: properties });
  $.ajax({
      method: "POST",
      url: "/Area1/SomeArea/SaveItem",
      data: { itemName: "MyTestItem", accountId: 54321, userId: 12345, budgetModels: saveData },
      dataType: "json",
      success: function (data) {
          debugger;
          console.log("Data: " + data);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
          console.log("Status: " + textStatus);
          console.log("Error: " + errorThrown);
      }
  });
  }
  </code></pre>
  
  <p>I must be doing something wrong, but am having trouble finding any decent answers on stack overflow or any other sites.</p>