传递颜色字典以查看 MVC答案

【问题标题】：Passing dictionary of colours to view MVC传递颜色字典以查看 MVC
【发布时间】：2013-07-21 21:01:45
【问题描述】：

我正在尝试从我的视图中检索模型上的颜色字典。但是我收到一个错误，即颜色字典无法序列化。在我的模型中，我按如下方式创建列表。

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

我在模型中创建这样的列表

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

在视图中我执行以下操作，基本上用户单击按钮并调用创建表的此函数，它在 Json.Encode 行上出错，当我查看颜色列表时正确填充它但它不会序列化，我错过了什么？

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

这是错误。

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.

【问题讨论】：

Have a look here, please
很抱歉，你确实需要学习一些JS。你现在写的代码有点可怕。
我是 javascript 新手，所以它可能不是最好的，但我认为堆栈溢出是为需要帮助的人准备的

标签： c# javascript jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

问题是您的字典不能包含非字符串键，因为 javascript 无法正确理解它们。但是，在您的情况下修复似乎很简单 - 只需将您的字典变成使用数字字符串表示作为键的字典：

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

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

【讨论】：