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 属性加载的单独文件。

根据您的用户群和数据大小以及数据更改的频率，最好使用哪个。