Create a Folder called AngularController in Scripts Folder. Please find the screen shot below.
2) Add JavaScript file in that folder, In the above screen , i have file called JSFile.js
3) Create a Controller called Data Controller.
4) Add a JsonResult Method which returns Full list of employee details.
public JsonResult GetEmployeeList()
{
List<EmpployeeAddress> eAddress = new List<EmpployeeAddress>();
using (EmployeeDBContext dbContext = new EmployeeDBContext())
{
eAddress = dbContext.EmpployeeAddresses.OrderBy(a => a.FirstName).ToList();
}
return new JsonResult { Data = eAddress, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
Create a ActionResult method in the DataController. Please find the screen shot below.
Right click on that Part4. Create a view. Please find the screen shot below.
Then in Script folder write a method to get all list of employees from the data base.
angular.module('MyApp', ['EmployeeService'])
.controller('Part4Controller',
function ($scope, EmployeeService) {
$scope.EmployeeList = null;
EmployeeService.GetEmployeeList().then(function (d) {
$scope.EmployeeList = d.data;
});
});
angular.module('EmployeeService', [])
.service('EmployeeService', function ($http) {
var fac = {};
fac.GetEmployeeList = function () {
return $http.get('http://localhost:52893/Data/GetEmployeeList')
}
return fac;
});
In the view, please find the code below.
Part4 View :-
<style>
input {
padding: 5px;
border: 1px solid #A5A5A5;
}
input.ng-dirty.ng-invalid {
border: 1px solid red;
background-color: rgb(255, 244, 244);
font-family:Calibri;
font-size:12px;
}
.error {
color: red;
}
</style>
<style>
.tableData {
border-left: solid 1px #D8C3C3;
border-top: solid 1px #D8C3C3;
font-family: Calibri;
}
.tableData tr {
}
.tableData td, .tableData th {
border-right: solid 1px #D8C3C3;
border-bottom: solid 1px #D8C3C3;
text-align: left;
font-family: Calibri;
padding: 5px;
}
.tableData td {
}
.tableData th {
background-color: lightseagreen;
padding: 7px 5px;
border-bottom-color: #9C9C9C;
font-family: Calibri;
font-size: 13px;
color: white;
}
.odd {
background-color: #f3f3f3;
}
.even {
background-color: #ffffff;
}
</style>
<br /><br />
<div ng-controller="Part4Controller">
<br />
<table>
<tr>
<td>
<a href="~/Data/part6">Create Employee</a>
</td>
</tr>
</table>
<table class="tableData" width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Last Name</th>
<th>Email Id</th>
<th>Region Id</th>
</tr>
<tr ng-repeat="e in EmployeeList" ng-class-odd="'odd'" ng-class-even="'even'">
<td>{{e.EId}}</td>
<td>{{e.FirstName}} </td>
<td>{{e.Lastname}}</td>
<td>{{e.EmailId}}</td>
<td>{{e.RegionId}}</td>
</tr>
</table>
<br />
</div>
@section scripts{
<script src="~/Scripts/AngularController/JSFile.js"></script>
}
Please find the output below.
Please find the data base script
USE [Employee]
GO
/****** Object: Table [dbo].[EmpployeeAddress] Script Date: 10/20/2015 16:53:18 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[EmpployeeAddress](
[EId] [int] IDENTITY(1,1) NOT NULL,
[FirstName] [nvarchar](250) NULL,
[Lastname] [nvarchar](250) NULL,
[EmailId] [nvarchar](250) NULL,
[RegionId] [int] NULL,
CONSTRAINT [PK_EmpployeeAddress] PRIMARY KEY CLUSTERED
(
[EId] 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 IDENTITY_INSERT [dbo].[EmpployeeAddress] ON
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (1, N'FName1', N'LName1', N'Email1@gmail.com', 1)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (2, N'Fname2', N'Lname2', N'Email2@yahoo.com', 2)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (3, N'Fname3', N'Lname3', N'Email3@gmail.com', 3)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (4, N'Fname4', N'Lname4', N'Email4@rediffmail.com', 4)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (5, N'Fname5', N'Lname5', N'Email5@hotmail.com', 5)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (6, N'Fname6', N'Lname6', N'Email6@live.com', 6)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (7, N'Fname7', N'Lname7', N'Email7@Gmail.com', 1)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (8, N'FName8', N'LName8', N'Email8@rediffmail.com', 1)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (9, N'FName9', N'LName9', N'Email9@yahoo.com', 2)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (10, N'Fname10', N'LName10', N'Email10@hotmail.com', 2)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (11, N'Fname11', N'LName11', N'Email11@rediffmail.com', 3)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (12, N'FName12', N'LName12', N'Email12@gmail.com', 4)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (13, N'FName13', N'LName13', N'email13@live.com', 5)
INSERT [dbo].[EmpployeeAddress] ([EId], [FirstName], [Lastname], [EmailId], [RegionId]) VALUES (14, N'FName14', N'LName14', N'email14@gmail.com', 6)
SET IDENTITY_INSERT [dbo].[EmpployeeAddress] OFF
No comments :
Post a Comment