6

Utknąłem na czymś zupełnie podstawowym, wierzę, dlatego potrzebuję trochę wiedzy, aby pomóc mi w osiągnięciu tego zadania.Wyświetlanie słownika Jock Knockout MVC

Mam słownik, który pobiera liczbę całkowitą i ciąg znaków jako wartości w celu zapisania listy wyników (które pokażę poniżej). Moim zdaniem model i Kontroler ten kod, który opublikować dane jako JSON String do Knockout:

[code dla ViewModel]

public class ResultModel 
{ 
    public Dictionary<int, string> dictResult { get; set; } 
    public string dictResultJson { get; set; } 

    public ResultModel() 
    { 
     dictResult = new Dictionary<int, string>(); 
    } 
} 

[code dla cshtml plik]

<h2>Results</h2> 
<table> 
    <tbody data-bind="template: { name: 'tblResult', foreach: dictResultJson() }"></tbody> 
</table> 

<script id="tblResult" type="text/html"> 
    <tr> 
     <td data-bind="value: key"></td> 
     <td data-bind="value: value"></td> 
    </tr> 
</script> 

<script type="text/javascript"> 
    var ResultModel = function(m) { 
     var self = this; 
     self.dictResultJson = ko.observableArray(mapDictionaryToArray(m.DictJson)); 
    }; 

    function mapDictionaryToArray(dictionary) { 
     var result = []; 
     for (var key in dictionary) { 
      if (dictionary.hasOwnProperty(key)) { 
       result.push({ key: key, value: dictionary[key] }); 
      } 
     } 

     return result; 
    } 

    var data = @(Html.Raw(Json.Encode(Model))); 
    var dataFromServer = ko.utils.parseJson(data.dictResultJson); 
    console.log(dataFromServer); 

    ko.applyBindings(new ResultModel(dataFromServer)); 
    console.log("apply binding"); 
</script> 

W moim pliku cshtml parsuję zwracany obiekt z kontrolera MVC i konwertuję go do tablicy. Problem polega na tym, że nie wyświetla żadnych danych, ale zmienna dataFromServer zawiera właściwe dane. Ma to dane:

Object {1: "Kate", 3: "Alex", 4: "Jane"}

Teraz, jak mam do pętli to json Wynik w celu wyświetlenia go w formie tabeli, jak

Tabela

1 Kate

3 Alex

4 Jane

góry dzięki

Jesmond

+1

moim zdaniem jest to lepszy pomysł, aby wdrożyć „mapDictionaryToArray” po stronie serwera. Skompilowany kod działa znacznie szybciej, prawda? – RredCat

Odpowiedz

2

Jeśli chcesz wyświetlić wartości w tabeli jako tekst musisz użyć text binding zamiast value

<tr> 
    <td data-bind="text: key"></td> 
    <td data-bind="text: value"></td> 
</tr> 

I jest jeszcze jeden problem ze swoim kod. Po wywołaniu new ResultModel(dataFromServer) jest już zawiera dane w odpowiednim formacie. Więc nie trzeba m.DictJson w funkcji ResultModel:

var ResultModel = function(m) { 
     var self = this; 
     self.dictResultJson = ko.observableArray(mapDictionaryToArray(m)); 
}; 
+0

Wielkie dzięki, ma sens! – user1889181