ASP.NET / WebForms / C# - 使用绑定后的代码填充基于第一个下拉列表的第二个下拉列表，而不回发

Question

请帮忙。

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

选择第一个下拉列表(国家/地区(后，第二个下拉列表应填充特定端口的列表，然后根据第一个和第二个下拉列表，还将填充第三个下拉列表。

这是一次性的输入。这意味着一旦选择完成，用户将把它保存在 db 中，除非用户更改，否则该值应保留在下拉列表中。

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

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

谢谢Jack

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

最佳使用方法将根据您的用户群和数据大小以及数据更改的频率而有所不同。