MVC 4: Showing Records in DropDown List and GridView Format

Rahul Saxena
10y
56.5k
0
3

Article

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.

Figure 1.

The following is the Script of my table.

CREATE TABLE [dbo].[EmployeeTeam](
[Employee_ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Manager_ID] [int] NULL,
[Email] [varchar](50) NULL,
[Mobile] [varchar](50) NULL,
[Country] [varchar](50) NULL,
[IsManager] [bit] NULL,
CONSTRAINT [PK_EmployeeTeam] PRIMARY KEY CLUSTERED
(
[Employee_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
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.

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.

Figure 7.

Figure 8.

Figure 9.

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_DropDown_and_GridView.Models
{
public class Employee
{
public List<SelectListItem> ManagerEmployeeList { get; set; }
public List<Employee> EmployeeTeamGrid { get; set; }
public int Employee_ID { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Country { get; set; }
public string Mobile { get; set; }
}
}

Figure 12.

Now right-click on the Controller Folder and Add New Empty Controller. Name it EmployeeController.cs and use the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_DropDown_and_GridView.Models;
namespace MVC_DropDown_and_GridView.Controllers
{
public class EmployeeController : Controller
{
//
// GET: /Employee/
private EmployeeDBEntities db = new EmployeeDBEntities();
public ActionResult Index()
{
Employee _model = new Employee();
var managerList = db.EmployeeTeam.ToList().Where(a => a.IsManager.Equals(true));
_model.ManagerEmployeeList = (from d in managerList
select new SelectListItem
{
Value = d.Employee_ID.ToString(),
Text = d.Name
}).ToList();
var qq = (from e in db.EmployeeTeam
select new Employee
{
Employee_ID = e.Employee_ID,
Name = e.Name,
Email = e.Email,
Country = e.Country,
Mobile = e.Mobile
}).ToList();
_model.EmployeeTeamGrid = qq;
return View("Index", _model);
}
public ActionResult Filter(int Manager_ID)
{
int? emp_ID = Convert.ToInt32(Manager_ID);
List<Employee> y = null;
var qq = y;
if (emp_ID == 0)
{
qq = (from e in db.EmployeeTeam
select new Employee
{
Employee_ID = e.Employee_ID,
Name = e.Name,
Email = e.Email,
Country = e.Country,
Mobile = e.Mobile
}).ToList();
}
else
{
qq = (from e in db.EmployeeTeam
where e.Manager_ID == emp_ID
select new Employee
{
Employee_ID = e.Employee_ID,
Name = e.Name,
Email = e.Email,
Country = e.Country,
Mobile = e.Mobile
}).ToList();
}
return PartialView("_ShowManagerTeam", qq);
}
}
}

Now right-click on the Index Action method and select Add View. Name it Index.cshtml.

@model MVC_DropDown_and_GridView.Models.Employee
@{
ViewBag.Title = "MVC 4 - Showing Data in DropDown And Grid View";
}
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/StyleSheet1.css" rel="stylesheet" />
<table style="width: 90%; text-align: center; background-color: #ADD8E6; padding: 10px;">
<tr> <td style="padding: 10px; text-align: center; height:30px; background-color:#FF0000;
font-size:20pt; font-weight:bold; color:white;">Select Manager #
@Html.DropDownList("lstManagerEmployee", Model.ManagerEmployeeList)
</td></tr>
<tr><td><div id="employeeListGrid">
@Html.Partial("_ShowManagerTeam", Model.EmployeeTeamGrid)
</div>
</td></tr>
</table>
<script>
$(document).ready(function () {
$("#lstManagerEmployee").append($("<option></option>").val("0").html("All Employee"));
$("#lstManagerEmployee").val("0");
});
</script>
<script type="text/javascript">
$('#lstManagerEmployee').change(function (e) {
e.preventDefault();
var url = '@Url.Action("Filter")';
$.get(url, { Manager_ID: $(this).val() }, function (result) {
$('#employeeListGrid').html(result);
});
});
</script>

Figure 13.

Now right-click on Views, then Employee and ADD a Partial View (_ShowManagerTeam.cshtml).

<div id="gridposition" style="width: 100%;">
@{
var grid1 = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
@grid1.GetHtml(mode: WebGridPagerModes.All,
tableStyle: "gridTable",
headerStyle: "gridHead",
footerStyle: "gridFooter",
rowStyle: "gridRow",
alternatingRowStyle: "gridAltRow",
htmlAttributes: new { id = "positionGrid" },
fillEmptyRows: false,
columns: grid1.Columns(
grid1.Column("Employee_ID", header: "Employee_ID"),
grid1.Column("Name", header: "Name"),
grid1.Column("Email", header: "Email"),
grid1.Column("Country", header: "Country "),
grid1.Column("Mobile", header: "Mobile")))
}
</div>

Figure 14.

To design my web grid I will add a style sheet as in the following.

.gridTable {margin: 5px;padding: 10px;border: 1px #c8c8c8 solid;
border-collapse: collapse;min-width: 550px;
background-color: #fff;color: #fff; width:100%;}
.gridHead th{font-weight: bold;background-color: #030D8D;
color: #fff;padding: 10px; text-align:left;}
.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
.gridHead a:hover {text-decoration:underline;}
.gridTable tr.gridAltRow{background-color: #efeeef;}
.gridTable tr:hover{background-color: #f6f70a;}
.gridAltRow td{padding: 10px;margin: 5px; color: #333;text-align:left;}
.gridRow td{padding: 10px;color: #333; text-align:left;}
.gridFooter td{padding: 10px; color: #ffffff;font-size: 12pt;
text-align: center; background-color:#228B22;}
.gridFooter a{font-weight: bold;color: blue; border: 2px #f00 solid;}