This article shows how to bind a Drop Down List in MVC and how to show records in a GridView format on selecting records from a DropDownList.

Figure 1 shows my Data Table in design mode.

Data Table in design
Figure 1.

The following is the Script of my table.

  1. CREATE TABLE [dbo].[EmployeeTeam](
  2. [Employee_ID] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [varchar](50) NULL,
  4. [Manager_ID] [int] NULL,
  5. [Email] [varchar](50) NULL,
  6. [Mobile] [varchar](50) NULL,
  7. [Country] [varchar](50) NULL,
  8. [IsManager] [bit] NULL,
  9. CONSTRAINT [PK_EmployeeTeam] PRIMARY KEY CLUSTERED
  10. (
  11. [Employee_ID] ASC
  12. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
  13. IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  14. ) ON [PRIMARY]
  15. GO
  16. SET ANSI_PADDING OFF
  17. GO
Now we will see data in the table:

Data in My Table
Figure 2.

Here in this you can see I have employee records with their Manager Id. So in the drop down I will see only Manage and on selecting Manager from the drop down I will show their team information in the GridView.

Open Visual Studio 2012 and add a project as in Figure 3.

New Project
Figure 3.

internet application
Figure 4.

Now right-click on the Project's Solution Explorer, select Manage NuGet Packages and Add a jQuery reference as in Figure 5.

jquery
Figure 5.

Now right-click on the project's Solution Explorer and Add New Item as in Figure 6 -11.

add
Figure 6.

data connection
Figure 7.

test connection
Figure 8.

click next
Figure 9.

finish
Figure 10.

Employee edm
Figure 11.

Now right-click on the Model folder and Add New Class. Name it Employee.cs as in the following.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace MVC_DropDown_and_GridView.Models
  8. {
  9. public class Employee
  10. {
  11. public List<SelectListItem> ManagerEmployeeList { get; set; }
  12. public List<Employee> EmployeeTeamGrid { get; set; }
  13. public int Employee_ID { get; set; }
  14. public string Name { get; set; }
  15. public string Email { get; set; }
  16. public string Country { get; set; }
  17. public string Mobile { get; set; }
  19. }
  20. }
Employee
Figure 12.

Now right-click on the Controller Folder and Add New Empty Controller. Name it EmployeeController.cs and use 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 MVC_DropDown_and_GridView.Models;
  8. namespace MVC_DropDown_and_GridView.Controllers
  9. {
  10. public class EmployeeController : Controller
  11. {
  12. //
  13. // GET: /Employee/
  15. private EmployeeDBEntities db = new EmployeeDBEntities();
  17. public ActionResult Index()
  18. {
  19. Employee _model = new Employee();
  20. var managerList = db.EmployeeTeam.ToList().Where(a => a.IsManager.Equals(true));
  22. _model.ManagerEmployeeList = (from d in managerList
  23. select new SelectListItem
  24. {
  25. Value = d.Employee_ID.ToString(),
  26. Text = d.Name
  27. }).ToList();
  29. var qq = (from e in db.EmployeeTeam
  30. select new Employee
  31. {
  32. Employee_ID = e.Employee_ID,
  33. Name = e.Name,
  34. Email = e.Email,
  35. Country = e.Country,
  36. Mobile = e.Mobile
  37. }).ToList();
  39. _model.EmployeeTeamGrid = qq;
  40. return View("Index", _model);
  41. }
  43. public ActionResult Filter(int Manager_ID)
  44. {
  45. int? emp_ID = Convert.ToInt32(Manager_ID);
  46. List<Employee> y = null;
  47. var qq = y;
  48. if (emp_ID == 0)
  49. {
  50. qq = (from e in db.EmployeeTeam
  51. select new Employee
  52. {
  53. Employee_ID = e.Employee_ID,
  54. Name = e.Name,
  55. Email = e.Email,
  56. Country = e.Country,
  57. Mobile = e.Mobile
  58. }).ToList();
  59. }
  60. else
  61. {
  62. qq = (from e in db.EmployeeTeam
  63. where e.Manager_ID == emp_ID
  64. select new Employee
  65. {
  66. Employee_ID = e.Employee_ID,
  67. Name = e.Name,
  68. Email = e.Email,
  69. Country = e.Country,
  70. Mobile = e.Mobile
  71. }).ToList();
  72. }
  73. return PartialView("_ShowManagerTeam", qq);
  74. }
  77. }
  78. }
Now right-click on the Index Action method and select Add View. Name it Index.cshtml.
  1. @model MVC_DropDown_and_GridView.Models.Employee
  2. @{
  3. ViewBag.Title = "MVC 4 - Showing Data in DropDown And Grid View";
  4. }
  5. <script src="~/Scripts/jquery-2.1.4.min.js"></script>
  6. <script src="~/Scripts/jquery.validate.min.js"></script>
  7. <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
  8. <link href="~/StyleSheet1.css" rel="stylesheet" />
  9. <table style="width: 90%; text-align: center; background-color: #ADD8E6; padding: 10px;">
  10. <tr> <td style="padding: 10px; text-align: center; height:30px; background-color:#FF0000;
  11. font-size:20pt; font-weight:bold; color:white;">Select Manager #
  12. @Html.DropDownList("lstManagerEmployee", Model.ManagerEmployeeList)
  13. </td></tr>
  14. <tr><td><div id="employeeListGrid">
  15. @Html.Partial("_ShowManagerTeam", Model.EmployeeTeamGrid)
  16. </div>
  17. </td></tr>
  18. </table>
  19. <script>
  20. $(document).ready(function () {
  21. $("#lstManagerEmployee").append($("<option></option>").val("0").html("All Employee"));
  22. $("#lstManagerEmployee").val("0");
  23. });
  24. </script>
  25. <script type="text/javascript">
  26. $('#lstManagerEmployee').change(function (e) {
  27. e.preventDefault();
  28. var url = '@Url.Action("Filter")';
  29. $.get(url, { Manager_ID: $(this).val() }, function (result) {
  30. $('#employeeListGrid').html(result);
  31. });
  32. });
  33. </script>
script
Figure 13.

Now right-click on Views, then Employee and ADD a Partial View (_ShowManagerTeam.cshtml).
  1. <div id="gridposition" style="width: 100%;">
  2. @{
  3. var grid1 = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
  5. @grid1.GetHtml(mode: WebGridPagerModes.All,
  6. tableStyle: "gridTable",
  7. headerStyle: "gridHead",
  8. footerStyle: "gridFooter",
  9. rowStyle: "gridRow",
  10. alternatingRowStyle: "gridAltRow",
  11. htmlAttributes: new { id = "positionGrid" },
  12. fillEmptyRows: false,
  13. columns: grid1.Columns(
  14. grid1.Column("Employee_ID", header: "Employee_ID"),
  15. grid1.Column("Name", header: "Name"),
  16. grid1.Column("Email", header: "Email"),
  17. grid1.Column("Country", header: "Country "),
  18. grid1.Column("Mobile", header: "Mobile")))
  19. }
  20. </div>
ShowManagerTeam
Figure 14.

To design my web grid I will add a style sheet as in the following.
  1. .gridTable {margin: 5px;padding: 10px;border: 1px #c8c8c8 solid;
  2. border-collapse: collapse;min-width: 550px;
  3. background-color: #fff;color: #fff; width:100%;}
  4. .gridHead th{font-weight: bold;background-color: #030D8D;
  5. color: #fff;padding: 10px; text-align:left;}
  6. .gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
  7. .gridHead a:hover {text-decoration:underline;}
  8. .gridTable tr.gridAltRow{background-color: #efeeef;}
  9. .gridTable tr:hover{background-color: #f6f70a;}
  10. .gridAltRow td{padding: 10px;margin: 5px; color: #333;text-align:left;}
  11. .gridRow td{padding: 10px;color: #333; text-align:left;}
  12. .gridFooter td{padding: 10px; color: #ffffff;font-size: 12pt;
  13. text-align: center; background-color:#228B22;}
  14. .gridFooter a{font-weight: bold;color: blue; border: 2px #f00 solid;}
style sheet
Figure 15.

Now run your application. Figures 16 through 23 show the output.

run your application
Figure 16.

all employee
Figure 17.

next
Figure 18.

show data
Figure 19.

name
Figure 20.

table
Figure 21.

select manager
Figure 22.

employee id
Figure 23.