ASP.NET MVC中的从属下拉列表 [英] Dependent dropdownlist in ASP.NET MVC

问题描述

目前我有两个表(团队和员工) 我正在完美地填充Teams的dropdownList，接下来，我要根据员工团队的selectedId填充第二个dropdownlist.

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.

控制器:

 // 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();
        }

查看:

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" })
   }

我需要打一些AJAX电话吗?还是POST方法?完全不熟悉MVC.

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

推荐答案

我需要一些AJAX调用吗?还是POST方法?那么，让我们这样做吧:

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

给您的DropdownLists一些ID可能是

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" })

在其中创建一个jsonResult函数，GetMembers和一些Magic:

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>

并在您的控制器中:

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

这篇关于ASP.NET MVC中的从属下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！