MVC Cascading dropdownlist

Question

My View is 

 

@model TryMVC.Models.MobileData   @{     ViewBag.Title = "SelectDistrict"; }    <script src="~/Scripts/jquery-1.7.1.min.js"></script>       <h2>Cascading Dropdownlist</h2>   <table>       <tr>           <td>               <label>State</label>           </td>           <td>   @Html.DropDownListFor(x => x.stateNamesModel, Model.stateNamesModel, "--Select--", new { @id="ddlState"});         </td>        </tr>       <tr>         <td>             <label>District</label>         </td>         <td id="District">             @Html.DropDownListFor(x => x.DistrictNamesModel, new List<SelectListItem>(), "--Select--", new { @id = "ddlDistrict" });         </td>     </tr>   </table>      <script type="text/javascript">     $(document).ready(function () {         $('#ddlState').change(function () {             $.ajax({                 type: "post",                 url: "/DropDownList/GetDistrict",                 data: { stateId: $('#ddlState').val() },                 datatype: "json",                 traditional: true,                 success: function (data) {                     var district = "<select id='ddlDistrict'>";                     district = district + '<option value="">--Select--</option>';                     for (var i = 0; i < data.length; i++) {                         district = district + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';                     }                     district = district + '</select>';                     $('#District').html(district);                 }             });         });     }); </script>    

 

My Controller Is 

 

   public ActionResult SelectDistrict()         {             MobileData md = new MobileData();             DBData dd = new DBData();             DataSet ds = new DataSet();             ds = dd.getState();             List<SelectListItem> stateNames = new List<SelectListItem>();                            foreach (DataRow item in ds.Tables[0].Rows)             {                 stateNames.Add(new SelectListItem { Text = item["StateName"].ToString() ,Value=(item["StateId"].ToString()) });             }             md.stateNamesModel = stateNames;             return View(md);         }           [HttpPost]         public ActionResult GetDistrict(string stateId)         {             MobileData md = new MobileData();             int statId;             List<SelectListItem> DistrictNames = new List<SelectListItem>();             if (!string.IsNullOrEmpty(stateId))             {                 statId = Convert.ToInt32(stateId);                 DBData dd = new DBData();                 DataSet ds = new DataSet();                 ds = dd.GetCityOnstate(statId);                                            foreach (DataRow item in ds.Tables[0].Rows)             {                 DistrictNames.Add(new SelectListItem { Text = item["City"].ToString() , Value=(item["CityId"].ToString()) });             }                     }             return Json(DistrictNames, JsonRequestBehavior.AllowGet);         }   

My Model Is

 

 

 public class MobileData     {            public IList<SelectListItem> stateNamesModel { get; set; }             public IList<SelectListItem> DistrictNamesModel { get; set; }             }   

 

 

My problem is , The dropdownlist for State is populated but [HttpPost] event for  GetDistrict is not Firing....Help me plz

GetDistrict