Refresh ASP.Net DropDownList on Click using jQuery Ajax

Hi kankon,

Refer below sample.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField HeaderText="CustomerId" DataField="CustomerId" />
        <asp:BoundField HeaderText="Name" DataField="ContactName" />
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:DropDownList ID="ddlCountries" runat="server">
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=ddlCountries]').on('click', function (e) {
            var ddl = $(this);
            var selected = $(this).val();
            $.ajax({
                async: true,
                type: 'POST',
                url: "Default.aspx/GetModels",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    ddl.empty().append('<option selected="selected" value="0">--SELECT COUNTRY--</option>');
                    $.each(response.d, function () {
                        ddl.append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                    $(ddl).val(selected);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    });
</script>

Namespaces

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGridView();
    }
}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string connection = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(connection))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT DISTINCT Country FROM Customers ORDER BY Country", con))
            {
                con.Open();
                cmd.Connection = con;
                DropDownList ddlCountries = e.Row.FindControl("ddlCountries") as DropDownList;
                ddlCountries.DataSource = cmd.ExecuteReader();
                ddlCountries.DataTextField = "Country";
                ddlCountries.DataValueField = "Country";
                ddlCountries.DataBind();
                ddlCountries.Items.Insert(0, "--SELECT COUNTRY--");
                con.Close();
            }
        }
    }
}

private void BindGridView()
{
    string connection = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(connection))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, ContactName, Country FROM Customers", con))
        {
            con.Open();
            gvCustomers.DataSource = cmd.ExecuteReader();
            gvCustomers.DataBind();
            con.Close();
        }
    }
}

[WebMethod]
public static List<ListItem> GetModels()
{
    string query = "SELECT DISTINCT Country FROM Customers ORDER BY Country";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<ListItem> countries = new List<ListItem>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    countries.Add(new ListItem
                    {
                        Value = sdr["Country"].ToString(),
                        Text = sdr["Country"].ToString()
                    });
                }
            }
            con.Close();

            return countries;
        }
    }
}