私は別の問題に遭遇しましたが、それはマイナーかもしれません。
現在、次の構造があります。
【ViewModelのコード】
public class ResultModel
{
public Dictionary<Person, List<Person>> dictPeople { get; set; }
public string dictPeopleJson { get; set; }
public ResultModel()
{
dictPeople = new Dictionary<Person, List<Person>>();
}
}
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
}
【コントローラー用コード】
public ActionResult Index()
{
var p1 = new Person();
p1.ID = 100;
p1.Name = "John";
p1.Surname = "Smith";
var p2 = new Person();
p2.ID = 104;
p2.Name = "John";
p2.Surname = "Harvard";
var p3 = new Person();
p3.ID = 109;
p3.Name = "Kate";
p3.Surname = "Robinson";
var p4 = new Person();
p4.ID = 116;
p4.Name = "Kate";
p4.Surname = "Smith";
var p5 = new Person();
p5.ID = 130;
p5.Name = "Kate";
p5.Surname = "Jane";
List<Person> lstPerson1 = new List<Person>();
lstPerson1.Add(p1);
lstPerson1.Add(p2);
List<Person> lstPerson2 = new List<Person>();
lstPerson1.Add(p3);
lstPerson2.Add(p4);
lstPerson2.Add(p5);
var vm = new ResultModel();
vm.dictPeople.Add(new Person() {ID = 001, Name = "John", Surname = "Family"}, lstPerson1);
vm.dictPeople.Add(new Person() {ID = 002, Name = "Kate", Surname = "Family"}, lstPerson2);
vm.dictPeopleJson = JsonConvert.SerializeObject(vm.dictPeople, Formatting.Indented);
vm.dictPeople = null;
return View(vm);
}
【CSHTMLのコード】
<h2>Results</h2>
<table>
<tbody data-bind="template: { name: 'tblResult', foreach: dictPeopleJson() }"></tbody>
</table>
<script id="tblResult" type="text/html">
<tr>
<td data-bind="foreach: key">
<table>
<td data-bind="text: ID"></td>
<td data-bind="text: Name"></td>
<td data-bind="text: Surname"></td>
</table>
</td>
<td>
<table data-bind="foreach: value">
<td data-bind="text: ID"></td>
<td data-bind="text: Name"></td>
<td data-bind="text: Surname"></td>
</table>
</td>
</tr>
</script>
<script type="text/javascript">
var ResultModel = function(m) {
var self = this;
self.dictPeopleJson = ko.observableArray(mapDictionaryToArray(m), function(person) {
var per = new Person(person);
return per;
});
};
var Person = function(person) {
var self = this;
self.ID = ko.observable(person.Id);
self.Name = ko.observable(person.Name);
self.Surname = ko.observable(person.Surname);
};
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.dictPeopleJson);
console.log(dataFromServer);
ko.applyBindings(new ResultModel(dataFromServer));
console.log("apply binding");
</script>
次のような表示を取得しようとしています。
001 John Family 100 John Smith 104 John Harvard
002 Kate Family 109 Kate Robinson 116 Kate Smith ... etc
ただし、出力は最後の行バインディングのみで返されます (辞書のキー部分は表示されません)。
116 Kate Smith
130 Kate Jane
John ファミリーの値は失われ、配列には Kate のファミリーの値のみが含まれます
なぜこれが起こっているのですか?json 文字列への変換が完了すると、すべての値が文字列に表示されますが、コンソール ウィンドウには kate ファミリ (辞書の最後の項目) のみが表示されます。
ありがとう