HOW WE LOAD A DROPDOWN FIELD ON THE BASE OF OTHER DROPDOWN FIELD SELECTED VALUE???

Asif khan

Total Post:1

Points:7
Posted by  Asif khan
 652  View(s)
Ratings:
Rate this:
No Content
  1. Pawan Shukla

    Post:38

    Points:274
    Re: How we load a dropdown field on the base of other Dropdown field selected value???

    Step 1.Create a model 

     public class Model
        {
            public class CountryModel
            {
                public List<State> StateModel { get; set; }
                public SelectList FilteredCity { get; set; }
            }
            public class State
            {
                public int Id { get; set; }
                public string StateName { get; set; }
            }
            public class City
            {
                public int Id { get; set; }
                public int StateId { get; set; }
                public string CityName { get; set; }
            }
        }
    Step 2. Now add a controller to this
    public class HomeController : Controller
        {
            //
            // GET: /Home/
            public ActionResult Index()
            {
                LoadDropDown.Models.Model.CountryModel objcountrymodel = new LoadDropDown.Models.Model.CountryModel();
                objcountrymodel.StateModel = new List<LoadDropDown.Models.Model.State>();
                objcountrymodel.StateModel = GetAllState();
                return View(objcountrymodel);
            }

            //Action result for ajax call
            [HttpPost]
            public ActionResult GetCityByStaeId(int stateid)
            {
                List<LoadDropDown.Models.Model.City> objcity = new List<LoadDropDown.Models.Model.City>();
                objcity = GetAllCity().Where(m => m.StateId == stateid).ToList();
                SelectList obgcity = new SelectList(objcity, "Id", "CityName", 0);
                return Json(obgcity);
            }
            // Collection for state
            public List<LoadDropDown.Models.Model.State> GetAllState()
            {
                List<LoadDropDown.Models.Model.State> objstate = new List<LoadDropDown.Models.Model.State>();
                objstate.Add(new LoadDropDown.Models.Model.State { Id = 0, StateName = "Select State" });
                objstate.Add(new LoadDropDown.Models.Model.State { Id = 1, StateName = "State 1" });
                objstate.Add(new LoadDropDown.Models.Model.State { Id = 2, StateName = "State 2" });
                objstate.Add(new LoadDropDown.Models.Model.State { Id = 3, StateName = "State 3" });
                objstate.Add(new LoadDropDown.Models.Model.State { Id = 4, StateName = "State 4" });
                return objstate;
            }
            //collection for city
            public List<LoadDropDown.Models.Model.City> GetAllCity()
            {
                List<LoadDropDown.Models.Model.City> objcity = new List<LoadDropDown.Models.Model.City>();
                objcity.Add(new LoadDropDown.Models.Model.City { Id = 1, StateId = 1, CityName = "City1-1" });
                objcity.Add(new LoadDropDown.Models.Model.City { Id = 2, StateId = 2, CityName = "City2-1" });
                objcity.Add(new LoadDropDown.Models.Model.City { Id = 3, StateId = 4, CityName = "City4-1" });
                objcity.Add(new LoadDropDown.Models.Model.City { Id = 4, StateId = 1, CityName = "City1-2" });
                objcity.Add(new LoadDropDown.Models.Model.City { Id = 5, StateId = 1, CityName = "City1-3" });
                objcity.Add(new LoadDropDown.Models.Model.City { Id = 6, StateId = 4, CityName = "City4-2" });
                return objcity;
            }
        }
    Step 3. Create a view and bind it to controller.

    @model LoadDropDown.Models.Model.CountryModel
    <title>Home</title>

    <script language="javascript" type="text/javascript">
        function GetCity(_stateId) {
            var procemessage = "<option value='0'> Please wait...</option>";
            $("#ddlcity").html(procemessage).show();
            var url = "/Home/GetCityByStaeId/";
            $.ajax({
                url: url,
                data: { stateid: _stateId },
                cache: false,
                type: "POST",
                success: function (data) {
                    var markup = "<option value='0'>Select City</option>";
                    for (var x = 0; x < data.length; x++) {
                        markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                    }
                    $("#ddlcity").html(markup).show();
                },
                error: function (reponse) {
                    alert("error : " + reponse);
                }
            });
        }
    </script>
    @using (Html.BeginForm())
    {
        @Html.DropDownListFor(m => m.StateModel, new SelectList(Model.StateModel, "Id", "StateName"), new { @id = "ddlstate", @style = "width:200px;", @onchange = "javascript:GetCity(this.value);" })
        <br />
        <br />
        <select id="ddlcity" name="ddlcity" style="width: 200px">
        </select>
        <br />
        <br />
    }

    Thanks.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!