无法使用AngularJS和MVC获得输出

I'm new to asp.net mvc and angularjs. I'm stuck with a piece of code where I'm unable to get the output. Can any of you suggest the bug below:

我是asp.net mvc和angularjs的新手。我遇到了一段我无法获得输出的代码。你们中的任何人都可以建议下面的错误:

Here's my code:
i. Module.js
var app = angular.module("myApp", []);

ii. Controller.js

这是我的代码:我。 Module.js var app = angular.module(“myApp”,[]); II。 Controller.js

app.controller("myCntrlr", function ($scope, angularService) {    
    GetAllEmployee();

    function GetAllEmployee(){
        var getData = angularService.getEmployees();
        getData.then(function (emp) {
            $scope.employees = JSON.parse(emp.data);
        }, function () {
            alert('Error in getting records');
        });
    }
});

iii. Service.js

app.service("angularService", function ($http) {
    this.getEmployees = function () {
        return $http.get("Home/GetAll");
    };
});

A. HomeController.cs

    public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetAll()
    {
        EmployeeDAL objDAL = new EmployeeDAL();
        var employeeList = objDAL.SelectAllData();
        return Json(employeeList, JsonRequestBehavior.AllowGet);
    }
}

A(i). EmployeeDAL.cs (My DataAccessLayer)

A(i)中。 EmployeeDAL.cs(我的DataAccessLayer)

public string SelectAllData()
    {
        SqlConnection conn;
        DataTable dt = new DataTable();
        String json = String.Empty;
        try
        {
            conn = new SqlConnection(ConfigurationManager.ConnectionStrings["myCon"].ToString());
            conn.Open();
            SqlCommand cmd = new SqlCommand("SELECT * FROM Employees", conn);
            SqlDataReader dr = cmd.ExecuteReader();
            dt.Load(dr);
            json = GetJson(dt);
            conn.Close();
            return json;                
        }
        catch
        {
            return json;
        }
    }

    // Method to convert Datatable to JSON Array
    public string GetJson(DataTable dt)
    {
        JavaScriptSerializer JSSerializer = new JavaScriptSerializer();
        List<Dictionary<String, Object>> DtRows = new List<Dictionary<String, Object>>();
        Dictionary<String, Object> newRow = null;

        // Code to loop through each row in datatable and add it to the dictionary object
        foreach(DataRow drow in dt.Rows)
        {
            newRow = new Dictionary<String, Object>();
            foreach(DataColumn col in dt.Columns)
            {
                newRow.Add(col.ColumnName.Trim(), drow[col]);
            }
            DtRows.Add(newRow);
        }
        // Serialising the dictionary object to produce json
        return JSSerializer.Serialize(DtRows);
    }<br/>

B. Index.cshtml

@*@model AngularCRUD.Models.Employee*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div ng-app="myApp">
    <div ng-controller="myCntrlr">
        <table cellpadding="12">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                    <td>Email</td>
                    <td>Age</td>
                    <td>Action</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td>
                        {{employee.Id}}
                    </td>
                    <td>
                        {{employee.Name}}
                    </td>
                    <td>
                        {{employee.Email}}
                    </td>
                    <td>
                        {{employee.Age}}
                    </td>
                    <td>
                        Edit | Delete
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Also, I keep getting the below error
[ngRepeat:dupes]
One more query: is there a need to comment out @model AngularCRUD.Models.Employee from Index.cshtml?

另外,我一直得到以下错误[ngRepeat:dupes]还有一个问题:是否需要从Index.cshtml中注释掉@model AngularCRUD.Models.Employee?

2 个解决方案

#1

Check whether there is any data in employees array.

检查employees数组中是否有任何数据。

And don't use Asp.Net views and angular together. Use one of them.

并且不要将Asp.Net视图和角度一起使用。使用其中之一。

#2

For the error [ngRepeat:dupes]

对于错误[ngRepeat:dupes]

Angular disallow duplication

Angular禁止重复

From angular code

从角度代码

throw ngRepeatMinErr('dupes',
              "Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}",
              expression, trackById, value);

So, as the error indicate you need to use track by

所以,因为错误表明你需要使用track by

    <tr ng-repeat="employee in employees track by $index">

#1