user1030181 user1030181 - 3 months ago 14
ASP.NET (C#) Question

View does not show results. Angularjs MVC

I am trying to fetch records from database using asp.mvc with angular js but i am not able to get records.

I am having Employee Table

enter image description here

Employee Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SelectData.Models;

namespace SelectData.Controllers
{
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult Index()
{
return View();
}

public ActionResult getAll()
{
using (EmployeeDBEntities dbContext = new EmployeeDBEntities())
{
var employeeList = dbContext.Employees.ToList();
return View(employeeList);
}
}
}
}


Angular JS module

var app = angular.module("AngularApp", []);


Angular JS Service

app.service("EmployeeService", function ($http) {
this.getEmployee = function () {
debugger;
return $http.get("/employee/getAll");
};
});


Angular JS Controller

app.controller("EmpCtrl", function ($scope, EmployeeService) {
GetAllEmployee();

function GetAllEmployee() {
debugger;
var getAllEmployee = EmployeeService.getEmployee();
getAllEmployee.then(function (emp) {
$scope.employees = emp.data;
}, function () {
alert('Data not found');
});
}
});


View

@{
ViewBag.Title = "getAll";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<div ng-controller="EmpCtrl">
<div>
<h2 align="center">Angular JS Basic Example</h2>
<h5 align="center">Employee List</h5>
<table border="1" cellpadding="10" align="center">
<tr>
<td>
Employee Id
</td>
<td>
First Name
</td>
<td>
Address
</td>
</tr>
<tr ng-repeat="emp in employees">
<td>
{{emp.EmpId}}
</td>
<td>
{{emp.FirstName}}
</td>
<td>
{{emp.LastName}}
</td>
</tr>
</table>
</div>
</div>


_Layout.cshtml

<!DOCTYPE html>
<html ng-app="AngularApp">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="~/Content/angular/Module.js"></script>
<script src="~/Content/angular/Service.js"></script>
<script src="~/Content/angular/Controller.js"></script> @Styles.Render("~/Content/css")
</head>

<body>
@RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)
</body>

</html>


Data is not shown in the browser , but it shows as json format on browser. Please suggest

enter image description here

Answer

Your getAll action method is returning a view result which is basically html markup (a string). Your should be returning a json array representing your data. Each item in your array should have EmpId,FirstName and LastName properties..

public ActionResult getAll()
{
    using (var db = new EmployeeDBEntities())
    {
       var employeeList = db.Employees.Select(f=>new { EmpId =f.EmpId ,
                                                       FirstName = f.FirstName,
                                                       LastName = f.LastName }
                                             ).ToList();
       return Json(employeeList,JsonRequestBehavior.AllowGet);
    }
}

Here i am projecting the Employee items to an annonymous object. So the result of getAll will be a json array like.

[
    {
        "EmpId": 1,
        "FirstName": "Shyju",
        "FirstName": "K"
    }
] 

Which your angular code will be able to use for the ng-repeat

BTW, your markup code should be in another view (other than getAll.cshtml) and you should try to access that action method in your browser( May be the index view ?)