I have done the same in my own website. This is how I do it:
Firstly, create a action for controller which returns JSON value:
public ActionResult GetCountryNames()
{
List<string> CountryNames = new List<string>();
CountryNames = context.GetCountries(); // your EF context to get countrynames from database
return Json(CountryNames.ToArray());
}
Then in your view add this html mark up:
<select id="countrylist" onchange="DoSomething();"></select>
This is your dropdownlist. It has javascript function declared in "onchange" event, if you want to do something when value changes.
Lastly, you need to add your javascript function, which does ajax call to your controller action, gets values and set it to your dropdownlist:
function GetCountryList() {
var serviceURL = '/Home/GetCountryNames';
$.ajax({
type: "post",
dataType: "json",
url: serviceURL,
success: successFunc,
async: false,
error: errorFunc
});
function successFunc(data, status) {
var countrylist = $('#countrylist');
countrylist.empty();
for (var i = 0; i < data.length; i++) {
var $option = $("<option>", { id: "option" + i });
$option.append(data[i]);
countrylist.append($option);
}
}
function errorFunc(data, status) {
alert('error');
}
}
And when your document is ready, run function GetCountryList().
Probably easiest is to do it with jQuery. Like this:
<script type="text/javascript">
$(document).ready(function () {
GetCountryList();
});
</script>