Cascading dropdowns

You can add drop-down menus to almost any Bootstrap component using the dropdown plugin. A cascading drop-down menu is a drop-down menu that updates its data based on a value selected in another drop-down menu. To add cascading drop-down menus, perform the following steps:

  1. Inside Visual Studio, add a new controller called DropdownController.cs to your Controllers folder.
  2. In the Index action, add the following code, which will create a list of managers and load a list of reporting employees for the selected manager:
            public IActionResult Index(int id = 2) 
        { 
            var managers = new List<EmployeeModel>(); 
            var vicePresident = new EmployeeModel { Id = 2, Name = "Andrew 
            Fuller", JobTitle = "Vice President, Sales", ReportsTo = null }; 
            var salesManager = new EmployeeModel { Id = 5, Name = 
            "Steven Buchanan", JobTitle = "Sales Manager", ReportsTo = null }; 
            managers.Add(vicePresident); 
            managers.Add(salesManager); 
 
            ViewBag.Managers = managers; 
            var model = GetEmployees(id); 
            return View(model); 
        }
  3. The GetEmployees method simply returns an EmployeeModel with its child collection of reporting employees. The code for the method is as follows:
            private EmployeeModel GetEmployees(int id = 2) 
        { 
            if (id == 2) 
            { 
                var vicePresident = new EmployeeModel { Id = 2, Name = 
                "Andrew Fuller", JobTitle = "Vice President, Sales", 
                ReportsTo = null }; 
                var vicePresidentEmployees = new List<EmployeeModel> 
                { 
                    new EmployeeModel { Id = 1, Name = "Nancy Davolio",
                    JobTitle = "Sales Representative", ReportsTo = 2}, 
                    new EmployeeModel { Id = 3, Name = "Janet Leverling",                      JobTitle = "Sales Representative", ReportsTo = 2 }, 
                    new EmployeeModel { Id = 4, Name = "Laura Callahan",                      JobTitle = "Inside Sales Coordinator", ReportsTo = 2 } 
                }; 
                vicePresident.ReportingEmployees = vicePresidentEmployees; 
                return vicePresident; 
            } 
 
 
            var salesManager = new EmployeeModel { Id = 5, Name =
            "Steven Buchanan", JobTitle = "Sales Manager", ReportsTo = null }; 
            var salesManagerEmployees = new List<EmployeeModel> 
            { 
                new EmployeeModel { Id = 1, Name = "Michael Suyama",
                JobTitle = "Sales Representative", ReportsTo = 5 }, 
                new EmployeeModel { Id = 3, Name = "Robert King", 
                JobTitle = "Sales Representative", ReportsTo = 5 },
                new EmployeeModel { Id = 4, Name = "Anne Dodsworth", 
                JobTitle = "Inside Sales Coordinator", ReportsTo = 5 } 
            }; 
            salesManager.ReportingEmployees = salesManagerEmployees; 
 
            return salesManager; 
        }
  4. Next, add a new view called Index.cshtml to the ViewsDropdown folder.
  5. The view will only contain two Bootstrap drop-down buttons. One will show a list of managers and the other a list of the managers' reporting employees. The list of managers will pass in via the ViewBag object and the list of employees will read from the model that will be passed into the view. The HTML markup for the view is as follows:
            <div class="container"> 
          <h1 id="heading">Cascading dropdown</h1> 
            <form> 
             <div class="form-group row"> 
                <label class="col-sm-2 form-control-label">Manager</label> 
                  <div class="col-sm-10"> 
                    <div class="btn-group"> 
                      <button type="button" class="btn btn-danger"         
                       id="selectedManager">@Model.Name</button> 
                      <button type="button" class="btn btn-danger dropdown-                        toggle" data-toggle="dropdown" aria-haspopup="true" 
                       aria-expanded="false"> 
                        <span class="sr-only">Toggle Dropdown</span> 
                      </button> 
                      <div class="dropdown-menu" id="managerlist"> 
                        @foreach (var manager in ViewBag.Managers) 
                        { 
                            <a class="dropdown-item" href="#"         
                            data-id="@manager.Id">@manager.Name</a> 
                        } 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div class="form-group row"> 
            <label class="col-sm-2 form-control-label">Employee</label> 
            <div class="col-sm-10"> 
                <div class="btn-group"> 
                    <button type="button" class="btn btn-primary">
                     Select Employee</button> 
                    <button type="button" class="btn btn-primary dropdown-                      toggle" data-toggle="dropdown" aria-haspopup="true"                       aria-expanded="false"> 
                        <span class="sr-only">Toggle Dropdown</span> 
                    </button> 
                    <div class="dropdown-menu" id="employees"> 
                        @foreach (var employee in Model.ReportingEmployees) 
                        { 
                            <a class="dropdown-item" href="#"
                             data-id="@employee.Id">@employee.Name</a> 
                        } 
                    </div> 
                </div> 
            </div> 
        </div> 
    </form> 
</div>
  6. In order to update the employees' dropdown button with the list of reporting employees for the selected manager, you will need to add the following JavaScript to the page:
            <script type="text/javascript"> 
            $('#managerlist a').on('click', function () { 
                var $this = $(this); 
                var managerId = $this.data('id'); 
                $("#selectedManager").text($this.text()); 
 
                $.ajax({ 
                    type: 'GET', 
                    dataType: 'html', 
                    url: '@Url.Action("GetReportingEmployees", "Dropdown")', 
                    data: { id: managerId } 
                }).done(function (data) { 
                    $('#employees').replaceWith(data); 
                }); 
            }); 
        </script>
  7. The preceding JavaScript will get the ID value of the selected manager via its data-id attribute. Next, it will make an AJAX call to the GetReportingEmployees action in the Dropdown controller.
  8. The GetReportingEmployees method in the Dropdown controller will return a partial view result containing the list of reporting employees. The code for the method is as follows:
            public PartialViewResult GetReportingEmployees(int id) 
        { 
            var model = GetEmployees(id); 
            return PartialView("_employees", model.ReportingEmployees); 
        }

    Note

    A partial view enables you to render content or a child view inside another or parent view.

  9. You would need to add a new partial view to the ViewsDropdown folder called _employees.cshtml for the preceding code to work. The HTML markup for the view looks as follows:
            @model IEnumerable<Chapter4.Models.EmployeeModel>
         <div class="dropdown-menu" id="employees">
         @foreach (var employee in Model)
         {
          <a class="dropdown-item" href="#"         
          data-id="@employee.Id">@employee.Name</a>
         }
         </div>
  10. The preceding HTML/Razor markup loops through the list of employees, passed in via the model, and creates a new dropdown button with the data.

The result of the preceding steps should be a view similar to the following screenshot:

Cascading dropdowns
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.134.151