MVC 4: Showing Records in DropDown List and GridView Format

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.

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] [intNULL,  
  5.           [Email] [varchar](50) NULL,  
  6.           [Mobile] [varchar](50) NULL,  
  7.           [Country] [varchar](50) NULL,  
  8.           [IsManager] [bitNULL,  
  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  = ONON [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;  
  6.   
  7. namespace MVC_DropDown_and_GridView.Models  
  8. {  
  9.     public class Employee  
  10.     {  
  11.         public List<SelectListItem> ManagerEmployeeList { getset; }  
  12.         public List<Employee> EmployeeTeamGrid { getset; }  
  13.         public int Employee_ID { getset; }  
  14.         public string Name { getset; }  
  15.         public string Email { getset; }  
  16.         public string Country { getset; }  
  17.         public string Mobile { getset; }  
  18.           
  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;  
  7.   
  8. namespace MVC_DropDown_and_GridView.Controllers  
  9. {  
  10.     public class EmployeeController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /Employee/   
  14.   
  15.         private EmployeeDBEntities db = new EmployeeDBEntities();  
  16.   
  17.         public ActionResult Index()  
  18.         {  
  19.             Employee _model = new Employee();   
  20.             var managerList = db.EmployeeTeam.ToList().Where(a => a.IsManager.Equals(true));              
  21.   
  22.             _model.ManagerEmployeeList = (from d in managerList  
  23.                                    select new SelectListItem  
  24.                                    {  
  25.                                        Value = d.Employee_ID.ToString(),  
  26.                                        Text = d.Name  
  27.                                    }).ToList();  
  28.   
  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();  
  38.   
  39.             _model.EmployeeTeamGrid = qq;  
  40.             return View("Index", _model);  
  41.         }  
  42.   
  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.         }  
  75.   
  76.   
  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");  
  4.     
  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.