Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
1.80/5 (2 votes)
See more:
Hai i have two dropdownlists,in that my first dropdownlist is Select Country and second dropdownlist is select state ,Country information and state information ineed to bind from database,when i select country from first dropdown list and i need to display corresponding states in second dropdown list in asp.net mvc.any one help me please..Thanks in advance..
Posted
Updated 26-Oct-21 2:08am
v2
Comments
F-ES Sitecore 12-May-15 6:11am    
google "cascading dropdown mvc"
Philippe Mori 12-May-15 12:17pm    
It is not much different that having a single one... So what is the problem?

Step 1 : Create your Model.

C#
public class Employee
    {
        [ScaffoldColumn(false)]
        public int EmployeeId { get; set; }       

        public string SelectedStateId { get; set; }
        public List<state> States { get; set; }

        public string SelectedCityId { get; set; }
        public List<city> Citys { get; set; }
    }
    public class State {

        public string ID { get; set; }
        public string Name { get; set; }        
    }
    public class City
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string StateID { get; set; }
    }
</city></state>

Step 2 : Create your cshtml page.
Create a view from your index action method your controller. Right click => add View.
HTML
@model YourNamespace.Models.Employee

<div class="formElements">
                @Html.Label("Select State", new { @class = "control-label col-md-2" })
                @Html.DropDownListFor(model => model.SelectedStateId, new SelectList(Model.States, "ID", "Name", "Null"), new { @id = "SelectedState" })
            </div>
            <div class="formElements" style="display:none" id="select-city-div">

            </div>


Step 3 : Add the below Javascript into your view created at step 2.
Here we are getting the value of selected state from dropdown and pass value to a method called "GetCities".

JavaScript
<script type="text/javascript">

     $('#SelectedState').change(function () {

         var selectedStateValue = $('#SelectedState option:selected').val();
         // Get the values of selected state
         if (selectedStateValue == "NULL") {
             $('#select-city-div').hide();
         }// Hide the cities if no state selected.(Please Select option (Value - NULL))
         else {
             $.ajax({

                 type: "GET",
                 url: "/Employee/GetCities",
                 data: { stateId: selectedStateValue },
                 success: function (data) {

                     $('#select-city-div').show();
                     $('#select-city-div').html(data);
                 },
                 error: function (e, ts, et) {
                     alert(ts);
                 }
             });
         }

     });

 </script>


Step 4 : Implement the "GetCities" method
C#
        public static List<city> listCity = new List<city>();
 public void GetData()
       {
           if (listState.Count() <= 0)
           {
               listState.Add(new State { Name = "-Please Select-", ID = "NULL" });
               listState.Add(new State { Name = "Andhra Pradesh", ID = "0" });
               listState.Add(new State { Name = "West Bengal", ID = "1" });
               listState.Add(new State { Name = "Maharastra", ID = "2" });
           }

           if (listCity.Count() <= 0)
           {
               listCity.Add(new City { Name = "-Please Select-", ID = "NULL" , StateID="0" });
               listCity.Add(new City { Name = "Hyderabad", ID = "0", StateID="0"});
               listCity.Add(new City { Name = "Vijaywada", ID = "1", StateID="0" });

               listCity.Add(new City { Name = "-Please Select-", ID = "NULL", StateID = "1" });
               listCity.Add(new City { Name = "Kolkata", ID = "0", StateID = "1" });
               listCity.Add(new City { Name = "Durgapur", ID = "1", StateID = "1" });

               listCity.Add(new City { Name = "-Please Select-", ID = "NULL", StateID = "2" });
               listCity.Add(new City { Name = "Mumbai", ID = "0", StateID = "2" });
               listCity.Add(new City { Name = "Pune", ID = "1", StateID = "2" });
           }
}

       [HttpGet]
       public ActionResult GetCities(string stateId)
       {
           GetData();
           var listFilteredCity = listCity.FindAll(x => x.StateID == stateId);
           return PartialView("City", listFilteredCity);
       }


Step 5 : Add a partial view named as "City.cshtml" and place the below code.
HTML
@model IEnumerable<YourNamespace.models.city>

@Html.Label("Select City", new { @class = "control-label col-md-2" })
@Html.DropDownListFor(x=>x.FirstOrDefault().ID, new SelectList(Model, "ID", "Name", "Null"), new { @class = "inputalign", @id = "SelectedCity" })
</oneemployee.models.city>


Step 6 : Enjoy your hard work.

Basically we are rendering a partial view[City.cshtml] based on the State selection through an Ajax call.

In real time scenario we will not be using static list like I have used for List of cities or state. This is just an example. In your case you get the list of country and state from database.
 
Share this answer
 
v3
Here we need to replace
public List<city> Citys { get; set; }
as
public List<City> Citys { get; set; }


public List<state> States { get; set; }
as
public List<State> States { get; set; }
 
Share this answer
 
Comments
Richard Deeming 26-Oct-21 9:23am    
This should have been a comment to the existing solution, not a new solution!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900