Popular Posts

Apr 29, 2023

Creating Simple Cascading DropDownList In ASP.NET Core MVC With New Tag Helpers







 Controller:

[HttpGet]

        [AllowAnonymous]

        public IActionResult ChamberRegister()

        {

            var _divisions = _context.DivisionsList.ToList();

            _divisions.Add(new DivisionsVM()

            {

                Id = 0,

                Name = "--Select Division--"

            });

            var _districts = new List<DistrictsVM>();

            _districts.Add(new DistrictsVM()

            {

                Id = 0,

                Name = "--Select District--"

            });


            var _Upzila = new List<UpazilasVM>();

            _Upzila.Add(new UpazilasVM()

            {

                Id = 0,

                Name = "--Select Upzila--"

            });


            var _Unions = new List<UnionsVM>();

            _Unions.Add(new UnionsVM()

            {

                Id = 0,

                Name = "--Select Union--"

            });


            ViewData["DivisionData"] = new SelectList(_divisions.OrderBy(s => s.Id), "Id", "Name");

            ViewData["DistrictData"] = new SelectList(_districts.OrderBy(s => s.Id), "Id", "Name");

            ViewData["UpzilaData"] = new SelectList(_Upzila.OrderBy(s => s.Id), "Id", "Name");

            ViewData["UnionData"] = new SelectList(_Unions.OrderBy(s => s.Id), "Id", "Name");




            var chamberListObj = (from c in _context.DropdownValues

                                  where c.EnumValueType== EnumValueType.CHAMBER_TYPE

                                  select new SelectListItem()

                                {

                                    Value = c.DropDownValue,

                                    Text = c.DropDownText

                                }).ToList();

            ViewBag.chamberList = chamberListObj;



            string host = $"{Request.Scheme}://{Request.Host}{Request.PathBase}/";

            ViewData["BaseUrl"] = host;




            return View();

        }




JsonResult In Controller:


 public JsonResult GetDistrictListByID(int divisionid)

        {


            List<SelectListItem> getState = new List<SelectListItem>();

            var Getstateresult = _context.DistrictsList.Where(c => c.Division_id == divisionid).ToList(); 

            

            if (divisionid != 0)

            {

                return Json(Getstateresult);

                //return Json(new SelectList(Getstateresult, "Id", "Name"));

            }


            return null;

        }

        public JsonResult GetUpazilaList(int district_id)

        {

            List<SelectListItem> UpazilaListItems = new List<SelectListItem>();

            var Getstateresult = _context.UpazilasList.Where(c => c.district_id == district_id).ToList();


            if (district_id != 0)

            {

                return Json(Getstateresult);

            }

            return null;

        }



        [HttpPost, ActionName("GetDistrictsByDivisionId")]

        public JsonResult GetDistrictsByDivisionId(string divisionId)

        {

            int catId;

            List<DistrictsVM> listsObj = new List<DistrictsVM>();

            if (!string.IsNullOrEmpty(divisionId))

            {

                catId = Convert.ToInt32(divisionId);

                listsObj = _context.DistrictsList.Where(s => s.Division_id.Equals(catId)).ToList();

            }

            return Json(listsObj);

        }


        [HttpPost, ActionName("GetUpaziaByDivisionId")]

        public JsonResult GetUpaziaByDivisionId(string divisionId)

        {

            int catId;

            List<UpazilasVM> listsObj = new List<UpazilasVM>();

            if (!string.IsNullOrEmpty(divisionId))

            {

                catId = Convert.ToInt32(divisionId);

                listsObj = _context.UpazilasList.Where(s => s.district_id.Equals(catId)).ToList();

            }

            return Json(listsObj);

        }



        [HttpPost, ActionName("GetUnionByUpzilaId")]

        public JsonResult GetUnionByUpzilaId(string upzilaId)

        {

            int catId;

            List<UnionsVM> listsObj = new List<UnionsVM>();

            if (!string.IsNullOrEmpty(upzilaId))

            {

                catId = Convert.ToInt32(upzilaId);

                listsObj = _context.UnionsList.Where(s => s.upazilla_id.Equals(catId)).ToList();

            }

            return Json(listsObj);

        }



In View:


@{

    ViewBag.Title = "Chamber Register";

    var baseurl = ViewBag.BaseUrl;

}





<select asp-for="Division" class="form-control"

                        asp-items="ViewBag.DivisionData"

                        id="DivisionId" onchange="loadDivision(this)"></select>


<select asp-for="District" class="form-control" asp-items="ViewBag.DistrictData" id="ddlDistrictId"></select>

<select asp-for="Upzila" class="form-control" asp-items="ViewBag.UpzilaData"  id="ddlUpzailaId"></select>

<select asp-for="Thana" class="form-control" asp-items="ViewBag.UnionData" id="ddlThanaId"></select>

  @Html.DropDownListFor(m => m.TypesOfChambers, new SelectList(ViewBag.chamberList, "Value", "Text"), "Select Chamber Type", new { @class = "form-control" })              



Javascript:

<script src="~/../lib/jquery/dist/jquery.js"></script>


<script type="text/javascript">

        $(document).ready(function () {

            var a = 0;

        });

    function loadDivision(obj) {

            var value = obj.value;

            var url = "@baseurl";

            $.post(url + "Account/GetDistrictsByDivisionId", { divisionId: value }, function (data) {

                debugger;

                PopulateDistrictDropDown("#ddlDistrictId", data);

            });

        }

    function PopulateDistrictDropDown(dropDownId, list, selectedId) {

            $(dropDownId).empty();

            $(dropDownId).append("<option>--Select Division--</option>")

            $.each(list, function (index, row) {

                $(dropDownId).append("<option value='" + row.id + "'>" + row.name + "</option>")

            });

    }



    $('#ddlDistrictId').change(function () {

        var value = $("#ddlDistrictId").val();

            var url = "@baseurl";

        $.post(url + "Account/GetUpaziaByDivisionId", { divisionId: value }, function (data) {

                debugger;

            PopulateUpzilaDropDown("#ddlUpzailaId", data);

            });

    });


    function PopulateUpzilaDropDown(dropDownId, list, selectedId) {

        $(dropDownId).empty();

        $(dropDownId).append("<option>--Select Upzila--</option>")

        $.each(list, function (index, row) {

            $(dropDownId).append("<option value='" + row.id + "'>" + row.name + "</option>")

        });

    }



    $('#ddlUpzailaId').change(function () {

        var value = $("#ddlUpzailaId").val();

            var url = "@baseurl";

        $.post(url + "Account/GetUnionByUpzilaId", { upzilaId: value }, function (data) {

                debugger;

            PopulateThanaDropDown("#ddlThanaId", data);

            });

    });


    function PopulateThanaDropDown(dropDownId, list, selectedId) {

        $(dropDownId).empty();

        $(dropDownId).append("<option>--Select Thana--</option>")

        $.each(list, function (index, row) {

            $(dropDownId).append("<option value='" + row.id + "'>" + row.name + "</option>")

        });

    }

</script>