ASP.NET / Webforms / C# - 基于第一个下拉列表填充第二个下拉列表而没有回发,后面绑定代码

时间:2017-11-17 03:16:09

标签: c# asp.net webforms

请帮忙。

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

选择第一个下拉列表(国家/地区)后,第二个下拉列表应填入特定端口列表,然后根据第一个和第二个下拉列表,第三个下拉列表也将被填充。

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

现在,我正在使用OnSelectedIndexChanged,因为回发而非常慢。

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

谢谢, 千斤顶

2 个答案:

答案 0 :(得分:0)

可能有几种方法可以实现这一目标。其中一种方法是使用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>

答案 1 :(得分:0)

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

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