Click here to Skip to main content
15,923,142 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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)
    {
        //base.OnModelCreating(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.
Posted
Updated 23-May-16 22:44pm
Comments
Richard Deeming 24-May-16 7:45am    
REPOST
You have already posted this in the Web Development forum:
http://www.codeproject.com/Messages/5251241/AngularJS-controller-is-not-firing-in-ASP-NET-MVC.aspx[^]
[no name] 24-May-16 15:23pm    
Is there any issue in this DAL class, this is not returning any data?

public class DAL : DbContext
{
public DAL() : base("TestConnectionString") { }

public DbSet<employee> employees { get; set; }

protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
//base.OnModelCreating(modelBuilder);
modelBuilder.Entity<employee>().ToTable("EmployeeTable");
modelBuilder.Entity<employee>().HasKey(x => x.Id);
}
}

1 solution

use Employee instead of EmployeeController
JavaScript
$http.get("/Employee/GetEmployees")


correct this line
JavaScript
myApp.controller = ('employeeController', function ($scope, $http) {

JavaScript
myApp.controller('employeeController', function ($scope, $http) {
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900