Introduction

In this article, you will see how to add multiple Dropdown Lists in the Web API. Here we create two dropdown lists, one for employee name and another is for the employee's address.

The following is the procedure for creating the application.

Step 1

Create a Web API application.

Step 2

Create a Model class using the following procedure:

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. namespace MultipleDrop.Models
  7. {
  8. public class Detail
  9. {
  10. public SelectList EmployeeList { get; set; }
  11. public SelectList AddressList { get; set; }
  12. }
  13. public class Employee
  14. {
  15. public int ID { get; set; }
  16. public string EmployeeName { get; set; }
  17. }
  18. public class Emp_Address
  19. {
  20. public int ID { get; set; }
  21. public string Address { get; set; }
  22. }
  23. }

Step 3

Select the "HomeController".

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using MultipleDrop.Models;
  7. namespace MultipleDrop.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. public ActionResult Index()
  12. {
  13. ViewBag.Message = "Multiple DropDown List";
  14. Detail obj = new Detail();
  15. List<Employee> obj1 = new List<Employee>();
  16. List<Emp_Address> objAdd = new List<Emp_Address>();
  17. obj1 = GetEmployeeList();
  18. SelectList objlistofcountrytobind = new SelectList(obj1, "ID", "EmployeeName", 0);
  19. objAdd = GetAddressList();
  20. SelectList objlistofstatebind = new SelectList(objAdd, "ID", "Address", 0);
  21. obj.EmployeeList = objlistofcountrytobind;
  22. obj.AddressList = objlistofstatebind;
  23. return View(obj);
  24. }
  25. public List<Employee> GetEmployeeList()
  26. {
  27. List<Employee> objEmp = new List<Employee>();
  28. objEmp.Add(new Employee { ID = 0, EmployeeName = "SelectEmployee" });
  29. objEmp.Add(new Employee { ID = 1, EmployeeName = "Smith" });
  30. objEmp.Add(new Employee { ID = 2, EmployeeName = "Jhon" });
  31. objEmp.Add(new Employee { ID = 3, EmployeeName = "Jack" });
  32. objEmp.Add(new Employee { ID = 4, EmployeeName = "jony" });
  33. return objEmp;
  34. }
  35. public List<Emp_Address> GetAddressList()
  36. {
  37. List<Emp_Address> objaddress = new List<Emp_Address>();
  38. objaddress.Add(new Emp_Address { ID = 0, Address = "SelectAddress" });
  39. objaddress.Add(new Emp_Address { ID = 1, Address = "Delhi" });
  40. objaddress.Add(new Emp_Address { ID = 2, Address = "Banaras" });
  41. objaddress.Add(new Emp_Address { ID = 3, Address = "Gujrat" });
  42. objaddress.Add(new Emp_Address { ID = 4, Address = "Bihar" });
  43. return objaddress;
  44. }
  45. }
  46. }

Step 4

In the View add some code; this file exists:

Add the following code:

  1. @model MultipleDrop.Models.Detail
  2. @{
  3. ViewBag.Title = "Home Page";
  4. }
  5. <h2>@ViewBag.Message</h2>
  6. <p>
  7. Employee : @Html.DropDownList("Employee", new SelectList(Model.EmployeeList, "Value", "Text", Model.EmployeeList.SelectedValue))
  8. Address : @Html.DropDownList("Address", new SelectList(Model.AddressList, "Value", "Text", Model.AddressList.SelectedValue))
  9. </p>

Step 5

Execute the application.

Output