Post
Ask Question
imran bhatti

imran bhatti

  • NA
  • 28
  • 5.1k

cascade four dropdownlist using ajax or jquery.

Dec 22 2016 7:00 AM
// This code is for two dropdownlist but it is not working. i want the code for four dropdownlist
 
 
 //This is my Home controller
 
 
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
RTC_PRINT_XMLEntities db = new RTC_PRINT_XMLEntities();
ViewBag.District = new SelectList(db.RTC_XML_ADT, "ADT_DIST_CODE", "ADP_DIST_NAME");
 return View();
}
public JsonResult GetTalukById(string ID)
{
 List<SelectListItem> taluk = new List<SelectListItem>();
 var talukList = this.Gettaluk(Convert.ToInt32(ID));
 var talukData = talukList.Select(m => new SelectListItem()
 {
 Text = m.ADT_TALUK_NAME,
 Value = m.ADT_TALUK_CODE.ToString(),
 });
 return Json(talukData, JsonRequestBehavior.AllowGet);
}
public IList<RTC_XML_ADT> Gettaluk(int ADT_DIST_ID)
{
 RTC_PRINT_XMLEntities db = new RTC_PRINT_XMLEntities();
 return db.RTC_XML_ADT.Where(m => m.ADT_DIST_CODE == ADT_DIST_ID).ToList();
}
[HttpPost]
public ActionResult Index(FormCollection formdata)
{
 Get Employee information to insert into Data Base
 return RedirectToAction("Index", "Home");
}
}
}
 
 
This is my Index view 
 
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Fetch details", " Home ", FormMethod.Post))
{
<div>
@Html.LabelFor(model => model.ADT_DIST_CODE)
<div>
@Html.DropDownListFor(model => model.ADT_DIST_CODE, ViewBag.District as SelectList, "Select District", new { id = "ADT_DIST_CODE" })
</div>
</div>
<div> 
@Html.LabelFor(model => model.ADT_TALUK_CODE)
<div>
@Html.DropDownListFor(model => model.ADT_TALUK_CODE, new SelectList(string.Empty, "Value", "Text"), " Select Taluk ",
new { style = "width:250px", @class = "dropdown1" })
</div>
</div>
@*<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Country Dropdown Selectedchange event
$("#RTC_XML_ADT").change(function () {
$("#RTC_XML_ADT").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("GetTalukById")', // Calling json method
dataType: 'json',
data: { id: $("#RTC_XML_ADT").val() },
// Get Selected Country ID.
success: function (taluk) {
$.each(taluk, function (i, takuks) {
$("##RTC_XML_ADT").append('<option value="' + taluks.Value + '">' +
taluks.Text + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve states.' + ex);
}
});
return false;
})
});
</script>
 
 

Answers (4)