services.js

app.service("CRUDservices", function ($http) {

this.selectEmployees = function () {
return $http.get("/api/Empdet/SelectEmployees");
};

this.selectEmployee = function (id) {
return $http.get("/api/Empdet/SelectEmployee/" + id);
};

this.addEmployee = function (Empdet) {
var request = $http(
{
    method: "post",
    url: "/api/Empdet/AddEmployee",
    data: Empdet
});
return request;
};
this.updateEmployee = function (id, Empdet) {
var request = $http(
{
    method: "put",
    url: "/api/Empdet/UpdateEmployee/" + id,
    data: Empdet
});
return request;
};
this.deleteEmployee = function (id) {
var request = $http(
{
    method: "delete",
    url: "/api/Empdet/DeleteEmployee/" + id,
    data: Empdet
});
return request;
};
});

ShowempController.js

app.controller("ShowempController", function ($scope, $location, CRUDservices, SharedData) {

$scope.loadRecords = function () {
    //CRUDservices.selectEmployees().success(function (response) {
    //    $scope.Employees = response;
    //});
    console.log('init');

    var promiseGetEmpdet = CRUDservices.selectEmployees();

    promiseGetEmpdet.then(function (pl) {

        console.log(pl);
        $scope.Employees = pl.data
        console.log($scope.Employees);
    },
        function (errorpl) {
            $scope.error = 'failure loading employee', errorpl;
        });        
};

$scope.Addemp = function () {
    console.log('addemp');
    $location.path("/Addemp");
};

$scope.Editemp = function (Id) {
    ShareData.value = Id;
    $location.path("/Editemp");
};
$scope.Deleteemp = function (Id) {
    ShareData.value = Id;
    $location.path("/Deleteemp");
};
});

Showemp.cshtml

<div ng-controller="ShowempController" ng-init="loadRecords()">
<h2>List of Employees</h2>
@* <a href="Addemp()" ng-click="Addemp()">Add Employee </a>*@
<button ng-click="Addemp()" value="Add Employee">Add Employee</button>
<br />
<table border="1" class="mytable">
    <thead>
        <tr>
            <th>Id</th>
            <th>PhotoFile</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Email</th>
            <th>Age</th>
            <th>PhotoText</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="Empdet in Employees">
            <td>{{Empdet.Id}}</td>
            <td>{{Empdet.PhotoFile}}</td>
            <td>{{Empdet.FirstName}}</td>
            <td>{{Empdet.LastName}}</td>
            <td>{{Empdet.Email}}</td>
            <td>{{Empdet.Age}}</td>
            <td>{{Empdet.PhotoText}}</td>
            <td><input type="button" value="Edit" ng-click="Editemp(Empdet.Id)" /></td>
            <td><input type="button" value="Delete" ng- click="Deleteemp(Empdet.Id)" /></td>
        </tr>
    </tbody>
</table>
<div>{{error}}</div>
</div>

_layout.cshtml

<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Employee Details</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body data-ng-app="ApplicationModule">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            @Html.ActionLink("EmployeeDetails", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - Employee Details</p>
    </footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

    <script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/angular-route.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/Module.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/Services.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/ShowempController.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/AddempController.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/MyScripts/EditempController.js")"></script>
    <script type="text/javascript"  src="@Url.Content("~/MyScripts/DeleteempController.js")"></script>

@RenderSection("scripts", required: false)

</body>
</html>

Index.html

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
    <div>
        <div>
            <table>
                <tr>
                    <td><a href="Showemp"> Show Employees </a></td>
                    <td><a href="Addemp"> Add Employee </a></td>
                </tr>
            </table>
        </div>
        <div>
            <div ng-view></div>
        </div>
    </div>
</div>   

ISSUE:

When I execute the code the data is getting hit but not getting displayed and its not navigating among tabs between show employee, add employee, edit and delete.

This is getting hit while I use console.log

Object {data: Array[1], status: 200, headers: function, config: Object, statusText: "OK"}
config: Object
data: Array[1]
0: Object
$$hashKey: "object:4"
Age: 25
Email: "rikimaru@gmail.com"
FirstName: "Riki"
Id: 1
LastName: "Maru"
PhotoFile: "~/Photos/riki.jpg"
PhotoText: "Riki Maru Photo"
__proto__: Object
length: 1
__proto__: Array[0]
headers: function (name) {
status: 200
statusText: "OK"
__proto__: Object

Related posts

Recent Viewed