转换字典以供javascript使用

Question

我有一个控制器动作,通过使用ViewBag将Dictionary传递给视图.

public async Task<ActionResult> MyAction() {
    Dictionary<ATypeViewModel, IEnumerable<BTypeViewModel>> all = await GetDictionary();
    ViewBag.MyData = all;
    return 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回答后,我使用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(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您的输出.