Knockoutjs Multiselect shows index instead of text value when using viewbag - asp.net-mvc

Question

I'm using a viewbag to load the options for a multi-select list. However, when I do that I'm getting a 1-based index instead of the actual text value.
<td> #Html.DropDownList("MAMUserGroupName", (MultiSelectList)ViewBag.MAMUserGroupsList, new { multiple = "multiple", data_bind = "selectedOptions:MAMUserGroups" })</td>
Here's the viewModel:
var viewModel = new UserModel([
{
id: ko.observable(""), firstName: ko.observable(""), lastName: ko.observable(""),MAMUserGroups: ko.observable()
}
]);
When the value is selected and I call the knockout save function, the value is 1, 2, and/or 3, instead of the actual text value; in this case "Group1", "Group2", "Group3"
When I do it the standard way of hard-coded options like here it works as expected: Knockout selectedOptions example. But in my case I need to load it from the viewbag.

Answer 1

The #Html.DropdownList is a server side rendering of the list and knockoutjs is a client side rendering of the list and the two do not know about each other. What you need to do is either render the list to a javascript array on they page, or retrieve it via Ajax/fetch from the server then render it client side. So using your code examples, i would be filling you knockoutjs view model with the data you need. something like the following.
var PageModel = function(data) {
var users = ko.observableArray();
var userGroups = ko.observableArray();
var mappedUsers = data.Users.map(function(user) {
return {
id: ko.observable(user.id),
firstName: ko.observable(user.firstName),
lastName: ko.observable(user.lastName),
mameUserGroups: ko.observableArray()
};
});
users(mappedUsers);
var mappedGroups = data.MAMUserGroups.map(function(item) {
return {
id: item.id,
name: item.name
};
});
userGroups(mappedGroups);
return {
users: users,
userGroups: userGroups
};
};
ko.applyBindings(new PageModel({
//****** Data loaded here ******
Users: [{
id: 1,
firstName: "test",
lastName: "user 1"
}, {
id: 2,
firstName: "test",
lastName: "user 2"
}, {
id: 3,
firstName: "test",
lastName: "user 3"
}, {
id: 4,
firstName: "test",
lastName: "user 4"
}],
MAMUserGroups: [{
id: 1,
name: "User Group 1"
}, {
id: 2,
name: "User Group 2"
}, {
id: 3,
name: "User Group 3"
}, {
id: 4,
name: "User Group 4"
}]
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<tbody data-bind="foreach: users">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
<td>
<select data-bind="options: $parent.userGroups, selectedOptions: mameUserGroups, optionsText: 'name' " size='5' multiple='true'> </select>
</td>
</tr>
</tbody>
</table>
<ul data-bind="foreach: users">
<li>
<span data-bind="text: firstName"></span><span data-bind="text: lastName"></span>
<ul data-bind="foreach: mameUserGroups">
<li data-bind="text: name"></li>
</ul>
</li>
</ul>
<!--
<script type="text/javascript">
// Render the data on the page server side to then be used client side
$().ready(function(){
var users = #(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Users)));
var mamUserGroups = #(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.mamUserGroups)));
});
</script>
-->
EDIT Ajax implementation
This is one way to do it. probably more code than is needed but i like to break things up into separate area of responsibility. If you try running this snippet from here what you will get is an error alert and a finished alert for the users and user groups.
var app = window.app || {};
app.modelMap = (function() {
function userMap(user) {
return {
id: ko.observable(user.id),
firstName: ko.observable(user.firstName),
lastName: ko.observable(user.lastName),
mameUserGroups: ko.observableArray()
};
}
function userGroupMap(userGroup) {
return {
id: userGroup.id,
name: userGroup.name
};
}
return {
userMap: userMap,
userGroupMap: userGroupMap
}
})();
app.data = (function() {
function getUserGroups() {
return $.get("<MAMUSerGroup_URL_HERE>").then(function(data) {
alert("successfully retrieved user group data");
return data.map(app.modelMap.userGroupMap);
})
.fail(function() {
alert("error");
})
.always(function() {
alert("finished");
});
};
function getUsers() {
return $.get("<Users_URL_HERE>").then(function(data) {
alert("successfully retrieved user data");
return data.map(app.modelMap.userMap);
})
.fail(function() {
alert("error");
})
.always(function() {
alert("finished");
});
}
return {
getUserGroups: getUserGroups,
getUsers: getUsers
}
})();
app.pageModel = (function() {
var users = ko.observableArray();
var userGroups = ko.observableArray();
function getUsers() {
return app.data.getUsers().done(users);
}
function getUserGroups() {
return app.data.getUserGroups().done(userGroups);
}
function activate() {
getUsers();
getUserGroups();
}
var vm = {
users: users,
userGroups: userGroups,
activate: activate
};
return vm;
})();
var vm = app.pageModel;
vm.activate();
ko.applyBindings(vm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>