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..
see the following:
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.
Refer below links
http://aspdotnet-kishore.blogspot.in/2013/10/how-to-create-cascading-dropdownlist-in.html
http://aspdotnet-kishore.blogspot.in/2013/10/json-create-cascading-dropdownlist-from.html
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