In this article I am going to show how we can bind Drop
down list in MVC and how we can show records in a Grid View format on selecting
records from Drop Down List:
Below is my Data Table in design mode:
Image 1.
Script of my table is:
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 My Table:
Image 2.
Here In this you can I have employee records with its Manager Id.
So in drop down I will see only Manage and on selecting Manager from Drop down
I will show their team information in Grid view:
Open Visual Studio 2012 -> New Project:
Image 3.
Image 4.
Now Right Click on Project's Solution Explorer -> Manage NuGet Packages -> Add jQuery reference.
Image 5.
Now Right Click on Project's Solution Explorer -> Add New Item
Image 6.
Image 7.
Image 8.
Image 9.
Image 10.
Image 11.
Now Right click on Model folder -> Add New Class ->
Employee.cs like below:
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; }
}
}
Image 12.
Now Right Click on Controller Folder -> Add New Empty
Controller -> EmployeeController.cs and do below 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 Index Action Method add View -> 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>
Image 13.
Now Right click on Views -> Employee &
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>
Image 14.
To design my web grid I added a style sheet:
.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;}
Image 15.
Now run your application:
Image 16.
Image 17.
Image 18.
Image 19.
Image 20.
Image 21.
Image 22.
Image 23.