Dependent dropdownlist in ASP.NET MVC

Question

At present I have two tables (Teams and Employees) I am populating the dropdownList for Teams perfectly, next I am trying to populate the second dropdownlist depending on the selectedId of Teams for Employees.

Controller:

 // GET: CalView
        public ActionResult Index(string ses, string DH)
        {     //Team Lead Members
                var eID = Convert.ToInt32(Session["currentEmployeeID"]);
                var EmpID = Session["currentEmpID"];
                Employee obj = (from o in db.Employees
                                where o.EnrollNumber == EmpID
                                select o).FirstOrDefault();

                Department dept = (from dep in db.Departments
                                   where dep.LeadBy == obj.EmployeeId
                                   select dep).FirstOrDefault();
                //this works fine
                ViewBag.showTeams = new SelectList(db.Teams.Where(tm => (tm.DeptID == dept.DepartmentId) && (dept.LeadBy == eID)), "TeamID","Name");
               //this obviously does not
                ViewBag.showMembers = new SelectList(db.Employees.Where(empt => (empT.TeamID == selectedIdFromPreviousDropDownList), "EmployeeID", "Employee"));

                return View();
        }

View:

if ((Session["UT"] == "DD") && (@ViewBag.DeptLead != null))
  {
//this works
  @Html.DropDownList("showTeams", null, "-Select Team-", htmlAttributes: new { @class = "form-control" })
//this does not work
  @Html.DropDownList("showMembers", null, "-Select Team-", htmlAttributes: new { @class = "form-control" })
   }

Do I need some AJAX call? or perhaps a POST method? Totally new to MVC.

Yes, I think the best way to do it, is making an **Ajax** call, are you using JQuery? — Matheus Cuba, Dec 08 '17 at 15:52
Possible duplicate of [Cascading Dropdown lists MVC 3 C#](https://stackoverflow.com/questions/10016560/cascading-dropdown-lists-mvc-3-c-sharp) — Roman Koliada, Dec 08 '17 at 16:13
Suggest you study the code in [this DotNetFiddle](https://dotnetfiddle.net/1bPZym) to understand how to implement cascading dropdownlists — , Dec 08 '17 at 20:04

score 9 · Accepted Answer · answered Dec 08 '17 at 16:42

Do I need some AJAX call? or perhaps a POST method? Okay then, lets do it this way:

Give your DropdownLists some id's probably:

 @Html.DropDownList("showTeams", null, "-Select Team-", htmlAttributes: new { id = "ddshowTeams", @class = "form-control" })
 @Html.DropDownList("showMembers", null, "-Select Team-", htmlAttributes: new {id = "ddshowMembers", @class = "form-control" })

Create a jsonResult function, GetMembers and some Magic right there:

<script type="text/javascript">

        $(document).ready(function () {
            //Dropdownlist Selectedchange event
            $("#ddshowTeams").change(function () {
                console.log("pehla andar");
                $("#ddshowMembers").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetMembers")',
                    dataType: 'json',
                    data: { id: $("#ddshowTeams").val() },
                    success: function (mems) {
                        console.log("wich ayaeee");
                        // states contains the JSON formatted list
                        // of states passed from the controller
                        $.each(mems, function (i, member) {
                            $("#ddshowMembers").append('<option value="'
    + member.Value + '">'
    + member.Text + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed to retrieve states.' + ex);
                    }
                });
                return false;
            })
        });
</script>

and in your controller:

 public JsonResult GetMembers(int id)
        {
            return Json(new SelectList(db.Employees.Where(empt => (empt.TeamId == id)), "EmployeeID", "FirstName"));
        }

Dependent dropdownlist in ASP.NET MVC

1 Answers1

Linked