javascript - MVC 4 and JQuery Dropdown List: What's the best way to retrieve countries and country phone codes from the back-end? -

i have list of countries retrieving end. it's 220 countries , it's static. not change on time. each country there phone code need retrieve back-end , display on view. have structured application in following way , works well. sure there better , more efficient ways program it. can help:

javascript:

    jquery.ajax({         type: 'get',         url: '/update/populatecountries',         datatype: "json",         contenttype: "application/json; charset=utf-8",         success: function (list) {             jquery.each(list, function (index, item) {                 if (item.text == cc1) {                     jquery("#editccselect1").append("<option value='" + item.text + "' selected>" + item.text + "</option>");                     changephonecode(cc1);                 }                 else {                     jquery("#editccselect1").append("<option value='" + item.text + "'>" + item.text + "</option>");                 }             });         },         error: function (xhr, ajaxoptions, thrownerror) {             alert(xhr.status + " " + thrownerror + " unable populate countries");         }     }); 

javascript:

    jquery("select#editccselect1").change(function () {     jquery.ajax({         type: 'post',         url: '/update/getphonecode',         datatype: "json",         data: "{'country':'" + country + "'}",         contenttype: "application/json; charset=utf-8",         success: function (list) {             jquery.each(list, function (index, item) {                 jquery("#editphonecode1").text(item.code);             });         },         error: function (xhr, ajaxoptions, thrownerror) {             alert(xhr.status + " " + thrownerror + " unable phone code");         }     });  }); 

updatecontroller:

[httppost] public actionresult populatecountries() {     var data = new [] {         new {val = 0, text = ""},         new {val = 1, text = "united states"},         new {val = 2, text = "canada"},         ....         new {val = 210, text = "spain"},         new {val = 211, text = "sri lanka"},         new {val = 212, text = "sudan"},         };         return json(data, jsonrequestbehavior.allowget);     }      [httppost]     public actionresult getphonecode(string country)     {         jsonresult result = new jsonresult();         list<countrycodes> cc = new list<countrycodes>();         cc.add(new countrycodes("", ""));         cc.add(new countrycodes("united states", "+1"));         cc.add(new countrycodes("canada", "+1"));         cc.add(new countrycodes("united kingdom", "+44"));         cc.add(new countrycodes("afghanistan", "+93"));         cc.add(new countrycodes("albania", "+355"));         cc.add(new countrycodes("algeria", "+213"));         cc.add(new countrycodes("american samoa", "+1 684"));         ....         foreach (countrycodes listitem in cc)         {             if (listitem.countrycode.equals(country))             {                 var jsondata = new[] { new { code = listitem.phonecode } };                 result = json(jsondata, jsonrequestbehavior.allowget);                 break;             }                             }         return result;     } 

so when user picks country dropdown list, code country looked , displayed label next dropdown list.

the issue have in back-end defining list of countries twice, once list of countries , values , once codes.

i interested see if has better solution.

thanks in advance,

if want make code more compact , readable, recommend angular, how like:

server

public jsonresult getcountries() {     var items = db.countries.select(q => new     {         id = q.countryid,         name = q.name,         code = q.code      });     return json(items, jsonrequestbehavior.allowget); } 

client

<select ng-model="countries" ng-options="item item.name item in countrieslist"> </select>  <script> function myctrl($scope){    $http.get("/getcountries")       .success(function (data, status, headers, config) {          $scope.countrieslist = data;       })       .error(function (data, status, headers, config) {          //...       }); } <script>