c# - 转换字典以供 javascript 使用

Question

我有一个 Controller 操作，它使用 ViewBag 将字典传递给 View 。

public async Task<ActionResult> MyAction() {
    Dictionary<ATypeViewModel, IEnumerable<BTypeViewModel>> all = await GetDictionary();
    ViewBag.MyData = all;
    return View();
}

在 View 中，我需要使用这个字典来创建级联单选按钮列表。第一个列表将包含像

这样的键值

@{
    Dictionary<ATypeViewModel, IEnumerable<BTypeViewModel>> services = ViewBag.MyData;
}

@foreach ( KeyValuePair<ATypeViewModel, IEnumerable<BTypeViewModel>> entry in services ) {
    <div class="radio">
        <label for="aType"><input type="radio" name="aType" value="@entry.Key.ATypeID" />&nbsp;&nbsp;@entry.Key.Description</label>
    </div>
}

我需要 jQuery 来创建这段代码，但不幸的是我不知道如何转换字典以供 javascript 使用。

编辑:

正在关注 hutchonoid answer 我已经使用 Json.NET 将我的字典序列化为 json。

Dictionary<ATypeViewModel, IEnumerable<BTypeViewModel>> list = new Dictionary<ATypeViewModel, IEnumerable<ATypeViewModel>>();
[...]
return await JsonConvert.SerializeObjectAsync( list );

然后将它添加到我的javascript代码中

var collection = @Html.Raw( Json.Encode(services) );

不幸的是，序列化后的字符串不正确，它的格式如下

var collection = {
    ATypeViewModel: [
        { BTypeID: 11, Description: "..." },
        { BTypeID: 12, Description: "..." },
        { BTypeID: 13, Description: "..." },
        { BTypeID: 14, Description: "..." }
    ],
    ATypeViewModel: [
        { ServiceTypeID: 21, Description: "..." },
        { ServiceTypeID: 22, Description: "..." },
        { ServiceTypeID: 23, Description: "..." },
        { ServiceTypeID: 24, Description: "..." }
    ]
}

为什么关键对象没有正确序列化？

Answer 1

使用一个简单的例子创建一个字典:

@{
   var services = new Dictionary<string, string> {{"1", "One"},{"2", "Two"}};
 }

在你的 javascript 中序列化它

var collection = @Html.Raw(Json.Encode(services));

使用带有键和值的 each 循环它:

 $.each(collection, function (key, value) {
               console.log(key);
               console.log(value);
            });

控制台输出

更新

基于更新中提供的结构，嵌套循环将执行此操作，如果结构发生变化，您将需要对其进行调整。

<script type="text/javascript">
    var collection = {
        ATypeViewModel: [
            { BTypeID: 11, Description: "..." },
            { BTypeID: 12, Description: "..." },
            { BTypeID: 13, Description: "..." },
            { BTypeID: 14, Description: "..." }
        ],
        BTypeViewModel: [
            { ServiceTypeID: 21, Description: "..." },
            { ServiceTypeID: 22, Description: "..." },
            { ServiceTypeID: 23, Description: "..." },
            { ServiceTypeID: 24, Description: "..." }
        ]
    }

    $.each(collection, function (outerKey, outerValue) {

        $.each(outerValue, function (key, value) {

                $.each(value, function (innerkey, innervalue) {
                    console.log(innerkey);
                    console.log(innervalue);
                });
            });

        });

 </script>

请注意，我需要将输出中的属性更改为 BTypeViewModel。