Click here to Skip to main content
14,877,943 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 11-May-15 23:42pm
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?

1 solution

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.
   
v3

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