2015-05-07 5 views
6

У меня есть действие контроллера, которое передает словарь в представление с помощью ViewBag.Преобразование словаря, который будет использоваться javascript

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.

EDIT:

После hutchonoid ответ я сериализован мой словарь в JSON с помощью Json.NET.

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

, а затем добавил его в моем яваскрипте кода

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: "..." } 
    ] 
} 

Почему ключевой объект не правильно ли сериализоваться?

+2

Можете ли вы сериализовать словарь в JSON с помощью JSON.net, а затем использовать эту строку в ViewBag? – ASG

+0

Да, я мог. Моя проблема заключается в том, как использовать его из javascript. Не могли бы вы показать мне исходный образец? – Lorenzo

+0

Либо это, либо вы используете api-controller и делаете вызов этому, чтобы получить ваши данные ... –

ответ

12

Используя простой пример создания словаря:

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

сериализовать в вашем JavaScript

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

Loop его, используя каждый с ключом и значением:

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

Консольный выход

Console output

Update

Основываясь на структуре поставляемой в обновлении вложенная петля будет делать это, если структура меняется, однако, вам нужно будет адаптировать его.

<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 от вашей продукции.

+0

Спасибо за ваш ответ. К сожалению, это работает неправильно. Можете ли вы посмотреть мое редактирование? – Lorenzo

+0

@ Lorenzo Хорошо, дай мне несколько минут. – hutchonoid

+0

@Lorenzo Посмотрите мое обновление, которое будет на основе ваших данных. :) – hutchonoid

Смежные вопросы