Create One Get method as you write in Index method that returns Value and Text field structure. Like
public ActionResult GetALL()
{
var data = new[]
{
new SelectListItem { Value = "US", Text = "United States" },
new SelectListItem { Value = "CA", Text = "Canada" },
new SelectListItem { Value = "MX", Text = "Mexico" },
};
return Json(data, JsonRequestBehavior.AllowGet);
}
and your ViewModel like this
var DataTable = function(obj) {
var self = this;
self.Text = obj.Text;
self.Value = obj.Value;
self.Selected = obj.self;
};
var viewModel = function() {
var self = this;
self.list = ko.observableArray([]);
$.ajax({
url: "@Url.Action("GetALL", "Home")",
dataType: 'json',
async: false,
success: function (data) {
self.list.removeAll();
$.each(data,function(index,d) {
self.list.push(new DataTable(d));
});
},
error: function (xhr, e, s) {
}
});
};
Your select
<select data-bind="options: list, optionsText: 'Text', optionsValue: 'Value', optionsCaption: 'Select'"></select>