[RESOLVED]How To Populate DropDownList based On Other DropDownSelection in asp.net MVC 4.0

i want to know how to populate dropdownlist based on another dropdown selection

For example,

I have two dropdownlist named drpState,drpCity

When User selects drpState value

drpCity Should Be populated based on selection

I Want To Perform this functionality in asp.net mvc 4.0..

public partial class CountryDropdowns : System.Web.UI.Page
{
    string strcon = ConfigurationManager.ConnectionStrings["sqlconn"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindContrydropdown();
}
 
}
/// <summary>
/// Bind COuntrydropdown
/// </summary>
protected void BindContrydropdown()
{
//conenction path for database
SqlConnection con = new SqlConnection(strcon);
con.Open();
SqlCommand cmd = new SqlCommand("select * from Counrty", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlCountry.DataSource = ds;
ddlCountry.DataTextField = "Country";
ddlCountry.DataValueField = "Id";
ddlCountry.DataBind();
ddlCountry.Items.Insert(0, new ListItem("--Select--", "0"));
ddlCity.Items.Insert(0, new ListItem("--Select--", "0"));
ddlState.Items.Insert(0, new ListItem("--Select--", "0"));
 
}
/// <summary>
/// Bind State Dropdown Based on CountryID
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
int Id = Convert.ToInt32(ddlCountry.SelectedValue);
SqlConnection con = new SqlConnection(strcon);
con.Open();
SqlCommand cmd = new SqlCommand("select * from City where Id="+Id, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlCity.DataSource = ds;
ddlCity.DataTextField = "City";
ddlCity.DataValueField = "CityId";
ddlCity.DataBind();
ddlCity.Items.Insert(0, new ListItem("--Select--", "0"));
if(ddlCity.SelectedValue=="0")
{
ddlState.Items.Clear();
ddlState.Items.Insert(0, new ListItem("--Select--", "0"));
}
 
}
/// <summary>
/// Bind Region dropdown based on Re
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e)
{
int CityId = Convert.ToInt32(ddlCity.SelectedValue);
SqlConnection con = new SqlConnection(strcon);
con.Open();
SqlCommand cmd = new SqlCommand("select * from State where CityId=" + CityId, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlState.DataSource = ds;
ddlState.DataTextField = "State";
ddlState.DataValueField = "StateId";
ddlState.DataBind();
ddlState.Items.Insert(0, new ListItem("--Select--", "0"));
}
}

pls refer this url
http://www.codeproject.com/Questions/578240/CascadingplusDropplusdownpluslistplusinplusasp-net

Suresh Sivalingam

He wants to do it in MVC4. Your posted code is for Web Forms.

Hi VivekBheda,

Thanks for your post.

 According to your description,

VivekBheda

how to populate dropdownlist based on another dropdown selection

I did a simple sample,you can refer to the following code snippet:

controller:

 public ActionResult demo5()
        {

            List<string> items = new List<string>();
            items.Add("Please select");
            items.Add("USA");
            items.Add("UK");
            items.Add("India");
            SelectList countries = new SelectList(items);
            ViewData["countries"] = countries;
            return View();
        }
        public JsonResult GetStates(string country)
        {
            List<string> states = new List<string>();
            switch (country)
            {
                case "USA":
                    states.Add("California");
                    states.Add("Florida");
                    states.Add("Ohio");
                    break;
                case "UK":
                    //add UK states here
                    states.Add("ss");
                    break;
                case "India":
                    //add India states hete
                    states.Add("sa");
                    break;
            }
            return Json(states);
        }

view:

@{
    ViewBag.Title = "demo5";
}
<script>
    $(document).ready(function () {
        $("#state").prop("disabled", true);
        $("#country").change(function () {
            if ($("#country").val() != "Please select") {
                var options = {};
                options.url = "/home/getstates";
                options.type = "POST";
                options.data = JSON.stringify({ country: $("#country").val() });
                options.dataType = "json";
                options.contentType = "application/json";
                options.success = function (states) {
                    $("#state").empty();
                    for (var i = 0; i < states.length; i++) {
                        $("#state").append("<option>" + states[i] + "</option>");
                    }
                    $("#state").prop("disabled", false);
                };
                options.error = function () { alert("Error retrieving states!"); };
                $.ajax(options);
            }
            else {
                $("#state").empty();
                $("#state").prop("disabled", true);
            }
        });
    });
</script>

<h2>demo5</h2>
@using(Html.BeginForm("ProcessForm","Home",FormMethod.Post)){ 
<div>Select Country :</div>
@Html.DropDownList("country", ViewData["countries"] as SelectList)
<br /><br />
<div>Select States :</div>
<select id="state"></select>
<br /><br />
<input type="submit" value="Submit" />
}


Like this:

More information:

#Creating Cascading DropDownLists using ASP.NET MVC 4 and jQuery

http://www.bipinjoshi.net/articles/b58fde6b-415e-454d-985b-d5dc4ad2fca8.aspx

Hope this can be helpful.

Best Regards,

Eileen

Leave a Reply