Passer le dictionnaire de couleurs pour voir MVC

Question

J'essaie de récupérer un dictionnaire de couleurs sur mon modèle de ma vue. Mais je reçois une erreur que le dictionnaire de couleurs ne peut pas être sérialisé. Dans mon modèle, je crée la liste comme suit.

public Dictionary<int, Color> Colourlist = new Dictionary<int, Color>(); 

Je crée la liste comme celui-ci dans le modèle

public Dictionary<int, Color> CreateColourPalette() 
     { 
      Colourlist.Add(1, System.Drawing.ColorTranslator.FromHtml("#f2dcdb")); 
      Colourlist.Add(2, System.Drawing.ColorTranslator.FromHtml("#e6b8b7")); 
      Colourlist.Add(3, System.Drawing.ColorTranslator.FromHtml("#da9694")); 
      Colourlist.Add(4, System.Drawing.ColorTranslator.FromHtml("#C20046")); 
      Colourlist.Add(5, System.Drawing.ColorTranslator.FromHtml("#d8e4bc")); 
      Colourlist.Add(6, System.Drawing.ColorTranslator.FromHtml("#c4d79b")); 
      Colourlist.Add(7, System.Drawing.ColorTranslator.FromHtml("#76933C")); 
      Colourlist.Add(8, System.Drawing.ColorTranslator.FromHtml("#b7dee8")); 
      Colourlist.Add(9, System.Drawing.ColorTranslator.FromHtml("#92cddc")); 
      Colourlist.Add(10, System.Drawing.ColorTranslator.FromHtml("#4F81BD")); 
      Colourlist.Add(11, System.Drawing.ColorTranslator.FromHtml("#CCCCFF")); 
      Colourlist.Add(12, System.Drawing.ColorTranslator.FromHtml("#b1a0c7")); 
      Colourlist.Add(13, System.Drawing.ColorTranslator.FromHtml("#711471")); 
      Colourlist.Add(14, System.Drawing.ColorTranslator.FromHtml("#eeece1")); 
      Colourlist.Add(15, System.Drawing.ColorTranslator.FromHtml("#ddd9c4")); 
      Colourlist.Add(16, System.Drawing.ColorTranslator.FromHtml("#c4bd97")); 
      Colourlist.Add(17, System.Drawing.ColorTranslator.FromHtml("#494529")); 
      Colourlist.Add(18, System.Drawing.ColorTranslator.FromHtml("#00AEEF")); 

      return Colourlist; 
     } 

Dans la vue que je fais ce qui suit, en gros utilisateur clique sur le bouton et il appelle cette fonction qui crée une table, il des erreurs sur le Json La ligne .Encode, la Colourlist est remplie correctement quand je la vois mais elle ne sérialisera pas, qu'est-ce qui me manque?

function createTable() 
     { 

      var num_cols = 0; 
      var headings = new Array(); 
      headings.push("Cost Type"); 
      var colours = @Html.Raw(Json.Encode(Model.Colourlist)); 
      var checkbox = $("input[name=SelectedYears]"); 
      for (var i = 0; i < checkbox.length; i++) { 
       if (checkbox[i].checked) { 
        var chkBoxText = checkbox[i].nextSibling; 
        if (chkBoxText != null) 
         headings.push(chkBoxText.nodeValue); 
       } 
      } 

      var num_cols = headings.length; 
      var theader = '<table border="1">\n'; 
      var tbody = ''; 

      //create heading row 
      tbody += '<tr>'; 
      for (var j = 0; j < headings.length; j++) 
      { 
       tbody += '<td style="margin-right:10px;">'; 
       tbody += headings[j].toString(); 
       tbody += '</td>' 
      } 

      var costtypes = $("input[name=SelectedCostTypes]") 
      tbody += '</tr>\n'; 

      for(var i=0; i<costtypes.length;i++) 
      { 
       if (costtypes[i].checked) { 
        var chkCostTypeText = costtypes[i].nextSibling; 
        if (chkCostTypeText != null) 
        { 
         tbody += '<tr>'; 
         tbody += '<td>'; 
         tbody += chkCostTypeText.nodeValue; 
         tbody += '</td>' 
         tbody += '<td>'; 
         tbody += colours[i]; 
         tbody += '</td>' 
         tbody += '</tr>\n'; 
        } 
       } 
      } 
      var tfooter = '</table>'; 
      document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
     } 

Ceci est l'erreur.

Type 'System.Collections.Generic.Dictionary`2[[System.Int32, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089],[System.Drawing.Color, System.Drawing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a]]' is not supported for serialization/deserialization of a dictionary, keys must be strings or objects. 

Answer 1

Le problème est que votre dictionnaire ne peut pas avoir de clé non-chaîne car il ne sera pas correctement compris par javascript. Cependant fixer dans votre cas semble être assez simple - il suffit de tourner votre dictionnaire en un seul qui utilise la représentation de chaîne de nombres en tant que clés:

public Dictionary<string, Color> Colourlist = new Dictionary<string, Color>(); 

public Dictionary<string, Color> CreateColourPalette() 
{ 
    Colourlist.Add("1", System.Drawing.ColorTranslator.FromHtml("#f2dcdb")); 
    ...