ASP.NET / Webforms / C＃-基于第一个下拉列表填充第二个下拉列表，而无需回发，绑定后的代码

Question

请帮忙。

我有3个下拉列表：1.国家2.端口3.公司名称

选择第一个下拉列表（国家/地区）后，应使用特定端口列表填充第二个下拉列表，然后根据第一个和第二个下拉列表，也将填充第三个下拉列表。

这是一次性键入。 这意味着选择完成后，用户会将其保存在db中，并且除非用户更改，否则该值应保留在下拉列表中。

现在，我正在使用OnSelectedIndexChanged，由于回发，它非常慢。

让我知道是否还有其他方法。

谢谢杰克

Answer 1

可能有几种方法可以实现这一目标。 一种方法是使用WebService [WebMethod]。 Ajax和JSON。

//You databinding method must be public and add [WebMethod] attribute
[WebMethod]
public static List<ListItem> GetCustomers()
{
    string query = "SELECT CustId, CustName FROM Customers";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
    using (SqlCommand cmd = new SqlCommand(query))
    {
        List<ListItem> custListItem = new List<ListItem>();
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        con.Open();
        using (SqlDataReader sdr = cmd.ExecuteReader())
        {
            while (sdr.Read())
            {
                custListItem.Add(new ListItem
                {
                    Value = Convert.ToString(sdr["CustId"]),
                    Text = Convert.ToString(sdr["CustName"])
                });
            }
        }
        con.Close();
        return custListItem;
    }
}
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $.ajax({
        type: "POST",
        url: "CustomerList.aspx/GetCustomers",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var ddlCustomers = $("[id*=ddlCustomers]");
            ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
            $.each(r.d, function () {
                ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
    });
});
</script>

Answer 2

您基本上有2个选择，将值预加载到js结构中（县，港口和公司），或使用ajax / xmlhttprequest调用仅加载相关信息（仅加载特定国家/地区的端口）。 如果要预加载值，则可以将其与脚本标记正文中的html混合使用，也可以将其作为通过src属性加载的单独文件。

哪种方法最适合使用，取决于您的用户群和数据大小以及数据更改的频率。