0

我有一个从后端检索的国家/地区列表。大约有 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;
    }

因此，当用户从下拉列表中选择一个国家/地区时，会查找该国家/地区的代码并将其显示为下拉列表旁边的标签。

我遇到的问题是，在后端我定义了两次国家/地区列表，一次用于国家列表及其值，一次用于代码。

我很想看看是否有人有更好的解决方案。

提前致谢，

4

1 回答 1

1

如果你想让你的代码更紧凑和可读，我建议你研究一下 Angular，它看起来像这样：

服务器

public JsonResult GetCountries()
{
    var items = db.Countries.Select(q => new
    {
        id = q.CountryID,
        name = q.Name,
        code = q.Code

    });
    return Json(items, JsonRequestBehavior.AllowGet);
}

客户

<select ng-model="Countries" ng-options="item as item.name for 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>
于 2013-10-06T17:22:44.323 回答