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 1735 27-Nov-2015
No Content
.net asp.net mvc 
Updated on 27-Nov-2015
Asif khan

Other

Message
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.
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy