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;
    }

したがって、ユーザーがドロップダウン リストから国を選択すると、その国のコードが検索され、ドロップダウン リストの横にラベルとして表示されます。

私が抱えている問題は、バックエンドで国のリストを 2 回定義していることです。1 回目は国とその値のリスト用、もう 1 回はコード用です。

誰かがより良い解決策を持っているかどうかを知りたいです。

前もって感謝します、

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 に答える