Hi All,
I am using ASP.Net MVC with AngularJS in the following way, I have a .Net Controller as below
namespace TestAngularJSApplication.Controllers
{
public class EmployeeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
DAL oDAL = new DAL();
List<Employee> listOfEmployees = oDAL.employees.ToList();
return Json(listOfEmployees,JsonRequestBehavior.AllowGet);
}
}
}
Then I have Index.cshtml as below
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Employee Details</title>
<script src="~/Scripts/jquery-2.2.4.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/myApp.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="employeeController">
<table style="border:solid 1px gray;">
<tr>
<td style="border:solid 1px gray;">Employee Id</td>
<td style="border:solid 1px gray;">Employee Name</td>
<td style="border:solid 1px gray;">Employee Address</td>
<td style="border:solid 1px gray;">Employee Salary</td>
<td style="border:solid 1px gray;">Is Active</td>
</tr>
<tr data-ng-repeat="emp in employees">
<td>{{emp.Id}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.EmployeeAddress}}</td>
<td>{{emp.EmpployeeSalary}}</td>
<td>{{emp.IsActive}}</td>
</tr>
</table>
</div>
</body>
</html>
Then I have myApp.js file as below
var myApp = angular.module('myApp', []);
myApp.controller = ('employeeController', function ($scope, $http) {
$scope.employees = "";
$http.get("/EmployeeController/GetEmployees")
.success(function (result) {
$scope.employees = result;
})
.error(function (result) {
console.log(result);
});
});
Then I have DAL class which is connecting to the Database and serving me the data.
public class DAL : DbContext
{
public DAL() : base("TestConnectionString") { }
public DbSet<Employee> employees { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Entity<Employee>().ToTable("EmployeeTable");
modelBuilder.Entity<Employee>().HasKey(x => x.Id);
}
}
After seeing all the Problem here is I am not able to display the data in the Table in the View. And when I checked if the GetEmployees method is being called then its not being called as well. When I checked if the "employeeController" of the angularJS controller, then it is also not being called. Can anybody please help me in checking why employeeController the angular controller is not being called?
I am googling and trying to find what is missing, any type of help will be very very helpful. Thanks in advance.
What I have tried:
I am googling and trying to find what is missing. And trying to keep break-points and debug the code.
Submit an article or tip