Chandrashekar
9/26/2019 - 6:50 AM

Cascading Dropdown Usig Ajax In MVC

 @Html.DropDownListFor(model => model.GroupId, ViewBag.listSLIGroup as IEnumerable<SelectListItem>, "Select Group", new { @id = "ddlstate", @class = "form-control input-sm", @onchange = "javascript:GetGroupEngineersByFgId(this.value);" })
 
 @Html.DropDownListFor(Model => Model.EngEmpId, ViewBag.listSLIEngineers as IEnumerable<SelectListItem>, "Select Engineer", new { @class = "form-control input-sm", id = "ddlEngineer" })
 
 
 
<script language="javascript" type="text/javascript">

        function GetGroupEngineersByFgId(_GroupId) {
            var procemessage = "<option value='0'> Please wait...</option>";
            $("#ddlEngineer").html(procemessage).show();

            $.ajax({
                async: false,
                cache: false,
                type: "POST",
                url: "@(Url.Action("GetGroupEngineersByFgId", "Audits"))",
                data: { "GroupId": _GroupId },
                success: function (data) {
                    var markup = "<option value='0'>Select Engineer</option>";
                    for (var x = 0; x < data.length; x++) {
                        markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                    }
                    $("#ddlEngineer").html(markup).show();
                },
                error: function (reponse) {
                    alert("error : " + reponse);
                }
            });
        }
</script>



[HttpPost]
public JsonResult GetGroupEngineersByFgId(int GroupId)
{
	CurrentUser objCurrentUser = Utility.GetCurrentUser(User.Identity.Name);
	GroupDAL objGroupDal = new GroupDAL();
	List<Models.Employee> objcity = objGroupDal.GetGroupEngineersByFgId(GroupId);
	IEnumerable<SelectListItem> listGroup = objcity.Select(p => new SelectListItem
	{
		Value = p.EMPID,
		Text = p.Name

	});
	return Json(listGroup);

}