Binding html select using knockoutjs and asp.net mvc

Suppose we have a ViewModel like this

	model.user = UserManager.GetUserByID(id);
	model.locations = Location.GetLocations();

view raw ob-bind-select-knockout-mvc.cs hosted with ❤ by GitHub

The markup to populate HTML Select should be

	<p data-bind="with: user">
	Your country:
	<select data-bind="options: $root.availableLocations,
	optionsText: 'Text',
	optionsValue: 'Value',
	value: LocationID,
	optionsCaption: 'Choose...'">
	</select>
	</p>

view raw ob-bind-select-knockout-mvc.html hosted with ❤ by GitHub

	var userObject = @Html.Raw(Json.Encode(Model.user));
	var locationsArray = @Html.Raw(Json.Encode(Model.locations));
	var vm = {
	user: ko.observable(userObject),
	availableLocations: ko.observableArray(locationsArray)
	};
	ko.applyBindings(vm);

view raw ob-bind-select-knockout-mvc.js hosted with ❤ by GitHub

Related Posts :

knockoutjs

• Utility function to make an array observable in knockoutjs

asp.net mvc