I am performing CRUD operations using Angular JS in MVC without API. Below is my whole snippet.
My table doesn't fetch data from database. Please review the code and help.
Index.cshtml:
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/angular.js"></script>
<script src="~/AngularCode.js"></script>
<style>
.btn-space {
margin-left: -5%;
background-color: cornflowerblue;
font-size: large;
}
</style>
<div ng-app="myApp">
<div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
<h3>List of Employee</h3>
<table cellpadding="12" class="table table-bordered table-hover">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Email</b></td>
<td><b>Gender</b></td>
<td><b>Country ID</b></td>
</tr>
<tr ng-repeat="Emp in employees">
<td> {{Emp.ID}} </td>
<td> {{Emp.Name}} </td>
<td> {{Emp.Email}} </td>
<td> {{Emp.Address}} </td>
<td> {{Emp.Gender}} </td>
<td> {{Emp.CountryID}} </td>
<td>
<input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
<input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
</td>
</tr>
</table>
</div>
</div>
AngularCode.js :
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$scope.GetAllData = function () {
$http({
method: "get",
url: "http://localhost/Employees/Get_AllEmployee"
}).then(function (response) {
$scope.employees = response.data;
}, function () {
alert("Error Occur");
})
};
});
EmployeeController.cs :
using CRUDusingAngularJS.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CRUDusingAngularJS.Controllers
{
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult Index()
{
return View();
}
public JsonResult Get_AllEmployee()
{
using (EmpolyeesEntities Obj = new EmpolyeesEntities())
{
List<Employee> Emp = Obj.Employees.ToList();
return Json(Emp, JsonRequestBehavior.AllowGet);
}
}
}
}