在 Asp.net HTML 控件中动态获取城市

Question

我有一个 HTML 国家/地区下拉列表。现在我想使用 ajax

相应地填充城市下拉列表

<select class="form-control" id="ddCountry" runat="server" tabindex="8"></select>

<select class="form-control" id="ddCity" runat="server" tabindex="9"></select>

<script type="text/javascript">
        $('#ddCountry').on('change', function () {

            var storeData = { countryId: this.value }

            $.ajax({
                type: "POST",
                url: "UserRegistration.aspx/GetCities",
                data: JSON.stringify(storeData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert("The data in list is "+data);
                },
                error: error
            });
        });
    </script>

我在.cs页面的方法如下：

[WebMethod]
        public static List<CityBO> GetCities(string countryId)
        {
             //returning cities
        }

问题是我可以在 GetCities 方法中获取数据，但无法在 ddCity 列表中显示它，因为它是一个 HTML 控件并且该方法是静态的，所以

ddCity.Items.AddRange(list_of_countries) 不起作用，因为 ddCity 在静态方法中未被识别。请告诉如何填写下拉列表。

Answer 1

您不能在静态方法中访问控件。您需要 return 来自 webmethod 的城市列表，并使用 javascript.In 成功方法 ajax 填写下拉列表，编写如下代码。

success: function (data) {
    fillDropDown(data.d);
}

function fillDropDown(data){
    var html = "";
    for (var i = 0; i < data.length; i++)
    {
          html += "<option value='" + data[i].ValueField+ "'>" + 
                   data[i].TextField+ "</option>";
    }
     $("select[id$=ddlCity]").html(html);
}

Answer 2

您可以使用下面给出的 ajax 成功函数。

success: function (data) 
{
 var lankanListArray = JSON.parse(data.d);
 // running a loop
 $.each(lankanListArray, function (index, value) 
 {
  $("#ddlCity").append($("<option></option>").val(this.name).html(this.value));              
 });
}

在 Asp.net HTML 控件中动态获取城市

Fetching Cities dynamically in Asp.net HTML control

html

c#

asp.net

ajax

jquery