Tuesday, 27 May 2014

Fill drop down list on selection of another drop down list in MVC



Model:
namespace MvcApplication2.Models
{
    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; }
    }

}

Controller:
public ActionResult Index()
{
    CountryModel objcountrymodel = new CountryModel();
    objcountrymodel.StateModel = new List<State>();
    objcountrymodel.StateModel = this.GetAllState();
    return View(objcountrymodel);
}


//Action result for ajax call
[HttpPost]
public ActionResult GetCityByStaeId(int stateid)
{
    List<City> objcity = new List<City>();
    objcity = this.GetAllCity().Where(m => m.StateId == stateid).ToList();
    SelectList obgcity = new SelectList(objcity, "Id", "CityName", 0);
    return Json(obgcity);
}

// Collection for state
private List<State> GetAllState()
{
    List<State> objstate = new List<State>();
    objstate.Add(new State { Id = 0, StateName = "Select State" });
    objstate.Add(new State { Id = 1, StateName = "State 1" });
    objstate.Add(new State { Id = 2, StateName = "State 2" });
    objstate.Add(new State { Id = 3, StateName = "State 3" });
    objstate.Add(new State { Id = 4, StateName = "State 4" });
    return objstate;
}

//collection for city
private List<City> GetAllCity()
{
    List<City> objcity = new List<City>();
    objcity.Add(new City { Id = 1, StateId = 1, CityName = "City1-1" });
    objcity.Add(new City { Id = 2, StateId = 2, CityName = "City2-1" });
    objcity.Add(new City { Id = 3, StateId = 4, CityName = "City4-1" });
    objcity.Add(new City { Id = 4, StateId = 1, CityName = "City1-2" });
    objcity.Add(new City { Id = 5, StateId = 1, CityName = "City1-3" });
    objcity.Add(new City { Id = 6, StateId = 4, CityName = "City4-2" });

    return objcity;
}

View:
@model MvcApplication2.Models.CountryModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    function GetCity(_stateId) {
        var procemessage = "<option value='0'> Please wait...</option>";
        $("#ddlcity").html(procemessage).show();
        var url = "/Area/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>

<h4>MVC Cascading Dropdown List Using Jquery</h4>

@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 />
}









No comments:

Post a Comment