ASP.NET / Webforms / C# - populating 2nd dropdown based on 1st dropdown without postback with code behind binding

Question

Please help.

I have 3 dropdowns : 1. Country 2. Port 3. Company Name

Once 1st dropdown (countries) is selected, 2nd dropdown should be populated with a list of specific ports, then based on 1st and 2nd dropdown, the 3rd dropdown will be populated also.

this is a one time key-in. Meaning once selection is done, the user will save it in db and the value should remain in the dropdown unless the user change.

Right now, i'm using OnSelectedIndexChanged which is very slow because of the postback.

let me know if there's any other way of doing.

Thanks, Jack

Answer 1

there could have several ways to achieve this. One of the ways is using WebService [WebMethod]. Ajax and 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

You basically have 2 options, preload your values into a js structure (counties, ports and companies), or use a ajax/xmlhttprequest call to load just the relevant information (just the ports for a specific country). If preloading the values, you can either mix it in with your html in the body of a script tag, or have it be a seperate file that is loaded via a src attribute.

Which is best to use will vary based upon your user base and data size, and how frequently the data changes.