Question

我正在尝试将我的JSON字符串通过ViewBag传递到我的knockout observable并使用它来填充多选列表。我不确定我做错了什么，但是现在它将JSON字符串中的每个字符都放在选择列表中的自己的行中。

这是我的C＃控制器代码：

Dictionary<string, string> salesReps = new Dictionary<string, string>();
        foreach ( var rep in salespeople.Salesperson )
        {
            salesReps.Add( rep.Code, rep.Code + " - " + rep.fullName );
        }
        //ViewBag.salespeople = salespeople.Salesperson.Select( x => x.Code ).Distinct().ToList();
        ViewBag.salespeople = JsonConvert.SerializeObject( salesReps );

这是Knockout代码：

var cSource = function (data) {
        var self = this;

        .....
        self.salesPeople = ko.observableArray();
};

$(document).ready(function () {

        var modelData = @Html.Raw( Json.Encode( Model ) );

        mySource = new cSource(modelData);

        //var salesRepList = Html.Raw( Json.Encode( ViewBag.salespeople ) );
        var salesRepList = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.salespeople));
        console.log(salesRepList);

        mySource.salesPeople = salesRepList;

这是HTML选择代码：

<select data-bind="
options: salesPeople,
selectedOptions: chosenReps,
optionsCaption: 'Choose rep(s)'
"></select>

我的console.log吐出的一小段内容：

{"USERNAME1":"USERNAME1 - Full Name 1","USERNAME2":"USERNAME2 - Full Name 2","USERNAME3":"USERNAME3 - Full Name 3",..... }

更新

我改变了c＃代码，现在在JSON中创建命名变量。这是我的新console.log输出：

{"username":"BOBC","fullname":"Bob Cottin"},{"username":"JIMT","fullname":"Jim Thorpe"},{"username":"LUKEP","fullname":"Luke Peppin"}, ....}

Answer 1

选项绑定需要一组对象或值，但根据您的控制台日志，salesPeople是一个字典样式对象。您可能需要将其转换为数组，以便绑定知道如何将其解析为选择选项。

如果你只需要value属性并且可以忽略“Username1”，“Username2”等，那么你可以使用这样的循环来获取对象的value属性：

for (var x in salesRepList) {
    if (salesRepList.hasOwnProperty(x)) {
        mySource.salesPeople.push(salesRepList[x]);
    }
}

如果您需要更复杂的类型，那么您将不得不创建一个对象数组，或者（根据您的上一次编辑）让您的json使用标准参数名称传递它们。然后你可以使用knockout的optionsText绑定来告诉select对象上的哪个属性用作显示文本。

每个例子：knockout docs

中的3个

<select data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry,
                   optionsCaption: 'Choose...'"></select>

这是一个jsFiddle，其中一些适合你的例子：fiddle

将JSON字符串放入Knockout可观察的多选列表

1 个答案: