forum

Home / DeveloperSection / Forums / How we load a dropdown field on the base of other Dropdown field selected value???

Ask Question

How we load a dropdown field on the base of other Dropdown field selected value???

Asif khan 1518 27-Nov-2015
No Content
.net asp.net mvc 
Updated on 27-Nov-2015
Asif khan

Asif khan

Follow

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

27-Nov-2015
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.

Liked By