我有一个从后端检索的国家/地区列表。大约有 220 个国家,而且是静态的。它不会随着时间而改变。对于每个国家/地区,我还需要从后端检索并显示在视图上的电话代码。我以以下方式构建了应用程序,并且运行良好。但我确信有更好、更有效的编程方法。有人可以帮忙吗:
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 to 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 to get phone code");
}
});
});
更新控制器:
[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;
}
因此,当用户从下拉列表中选择一个国家/地区时,会查找该国家/地区的代码并将其显示为下拉列表旁边的标签。
我遇到的问题是,在后端我定义了两次国家/地区列表,一次用于国家列表及其值,一次用于代码。
我很想看看是否有人有更好的解决方案。
提前致谢,