MVC Cascading dropdownlist

10y855.NET

My View is

@model TryMVC.Models.MobileData   @{     ViewBag.Title = "SelectDistrict"; }    <script src="~/Scripts/jquery-1.7.1.min.js">script>       <h2>Cascading Dropdownlisth2>   <table>       <tr>           <td>               <label>Statelabel>           td>           <td>   @Html.DropDownListFor(x => x.stateNamesModel, Model.stateNamesModel, "--Select--", new { @id="ddlState"});         td>        tr>       <tr>         <td>             <label>Districtlabel>         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 = "';                     $('#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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bikesh Srivastava10y ago
check it..
https://bikeshsrivastava.blogspot.in/2016/06/part-18how-to-implement-cascading.html

10y ago

well organised code is here

My View is

@model TryMVC.Models.MobileData

 @{     ViewBag.Title = "SelectDistrict"; }

<script src="~/Scripts/jquery-1.7.1.min.js">script>

 <h2>Cascading Dropdownlisth2>

 <table>

 <tr>

<td> <label>Statelabel> td>

 <td> @Html.DropDownListFor(x => x.stateNamesModel, Model.stateNamesModel, "--Select--", new { @id="ddlState"});         td>

tr>

 <tr>

<td> <label>Districtlabel> 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 = "';

$('#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 plzGetDistrict

10y ago

Yes i debugged it... But after reaching to

 @Html.DropDownListFor(x => x.DistrictNamesModel, new List<SelectListItem>(), "--Select--", new { @id = "ddlDistrict" });

i get redirected to webpage to choose State and after selecting State , i am not able to jump on HTTPPostback method

Midhun Tp10y ago
Hi,
Have you tried debugging the code?
Is this jquery function is firing?$('#ddlState').change(function () {