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

Posted 2023-03-05

【中文标题】在 Asp.net HTML 控件中动态获取城市

【英文标题】：Fetching Cities dynamically in Asp.net HTML control

【发布时间】：2015-03-19 12:24:38

【问题描述】：

我有一个国家/地区的 html 下拉列表。现在我想使用 ajax 相应地填充 City 下拉列表

<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 在静态方法中未被识别。请告诉如何填写下拉列表。

【问题讨论】：

您需要在 jquery 成功函数中而不是在 web 方法中绑定来自 getcities 的数据。 Web 方法是静态的，您无法在静态上下文中访问表单控件

先生，您能告诉我这个的成功功能吗

【参考方案1】：

您不能以静态方法访问控件。您需要从 webmethod 返回城市列表并使用 javascript 填充下拉列表。在 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);

【讨论】：

谢谢你先生，但你能给我如何使用javascript填充它的代码

【参考方案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));              
 );