Retaining the content of cascaded dropdownlistfor after postback - MVC4 razor/JQuery

See more:

C#

jQuery

Razor

MVC4

I have four dropdownlistfor and a radiobuttonlistfor group. The radiobutton is for location type (which can either be an urban or rural location).

The first dropdownlistfor is the state which a user must select first before choosing either urban or rural. When the radiobuttonlistfor is selected it triggers a jquery click event which calls an action in my controller to populate the second dropdownlistfor for cities under the selected state and location type.

Controller

[AcceptVerbs(HttpVerbs.Get)]
    public ActionResult GetCitiesByStateId(int stateId)
    {
        if (stateId==0)
        {
            throw new ArgumentNullException("stateId");
        }
        var x = _repository.GetAllCitiesByStateId(stateId);
        var result = (from s in x
                      select new
                      {
                          id = s.id,
                          name = s.CityName
                      }).ToList();

        return Json(result, JsonRequestBehavior.AllowGet);
    }

 [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult GetRuralArea(int stateId)
    {
        if (stateId == 0)
        {
            throw new ArgumentNullException("stateId");
        }

        var x = _repository.GetAllAreaInRural(stateId);
        var result = (from s in x
                      select new
                      {
                          id = s.id,
                          name = s.AreaName
                      }).ToList();

        return Json(result, JsonRequestBehavior.AllowGet);
    }

View

State:

@Html.DropDownListFor(x => x.State.ID, Model._State(), "Select")
@Html.RadioButton("UrbanRural", "1", false, new { id = "urban" })
@Html.RadioButton("UrbanRural", "2", false, new { id = "rural" })
@Html.DropDownListFor(x => x.City.ID, Model._Cities)
@Html.DropDownListFor(x => x.AreaRural.ID, Model._AreaRural)

Issue:

I observed that when my button is clicked the city or area dropdownlistfor as the case may be empties. How do I retain the content after a postback?