How to get data from db using angularjs and entity framework in mvc

Question

I am newbie in learning AngularJS. Can anyone help me to understand how to get data from database using angularjs and entity-framework in mvc5.

Let's say we have data table named:
tbl_student {rollno, name}
and we want all the students data from the database. So what should be the most understandable way for new learners.

Angular-Code

var myApp = angular.module("MyModule", []);
myApp.controller("DBcontroller", function ($scope, $http) {
$http.get("AngularController/AllStudents")
    .then(function (response) {
        $scope.students = response.data
    })
})

Html-code in file named "Test.cshtml"

<body  ng-app="MyModule">
<table ng-controller="DBcontroller">
     <thead>
          <tr>
             <th>Name</th>
             <th>City</th>
             <th>Institute</th>
           </tr>
     </thead>
           <tr ng-repeat="student in students">
             <td>{{ student.Name }}</td>
             <td>{{ student.City }}</td>
             <td>{{ student.Institute }}</td>
          </tr>
 </table>
 </body>

In MVC Controller

public class AngularController : Controller
{
    // GET: Angular
    public ActionResult Test()
    {
        return View();
    }

    public JsonResult AllStudents()
    {
        using (EducationContext context = new EducationContext())
        {
            var students = context.tbl_Student.ToList();
            return Json(students, JsonRequestBehavior.AllowGet);
        }
    }
}

it says "Failed to load resource: the server responded with a status of 404 (Not Found)" and on clicking on error it says "The resource cannot be found." — WasiF
– WasiF, Commented Jun 22, 2016 at 14:54
Take Controller off of AngularController.. so it should just be $http.get("/Angular/AllStudents") — Grizzly
– Grizzly, Commented Jun 22, 2016 at 14:56

Grizzly · Accepted Answer · 2016-06-22 15:03:31Z

2

The reason why this probably isn't working is because in your get you are adding the word Controller after Angular.

That is unnecessary.

This should work:

var myApp = angular.module('MyModule', []);
    myApp.controller('DBcontroller', function ($scope, $http) {
    $http.get('/Angular/AllStudents') // added an '/' along with deleting Controller portion
        .then(function (response) {
            $scope.students = response.data
        })
    })

answered Jun 22, 2016 at 15:03

Grizzly

5,9559 gold badges62 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

WasiF Over a year ago

now everything is fine, now the reason is that data is displayed on page through post-request but not by get-request. what could be the reason?

Grizzly Over a year ago

@WASIF sorry, could you clarify what you are trying to ask?

WasiF Over a year ago

In angular, $http.get() does not give me data but when I change it to $http.post() it gives me data on display.

Grizzly Over a year ago

@WASIF maybe this will help

WasiF Over a year ago

this is fine and it is telling about difference about $http.get() and $http.post() but I want to know how to get data through $http.get(), not by $http.post()

vivek · Accepted Answer · 2016-09-12 10:39:31Z

0

If you add this in web.config file Http Get will also work

<configuration>
  <system.web>
    <webServices>
      <protocols>
       <add name="HttpGet"/>
      </protocols>
    </webServices>
  </system.web>
</configuration>

answered Sep 12, 2016 at 10:39

vivek

1

Comments

Ori Dar · Accepted Answer · 2017-03-15 19:16:15Z

-1

try to change from $http.get to $http.post

var myApp = angular.module('MyModule', []);
myApp.controller('DBcontroller', function ($scope, $http) {
    $http.post('/Angular/AllStudents') // added an '/' along with deleting Controller portion
    .then(function (response) {
        $scope.students = response.data
    });

});

edited Mar 15, 2017 at 19:16

Ori Dar

19.1k5 gold badges61 silver badges76 bronze badges

answered Mar 15, 2017 at 7:34

Shazia Idrees

11 bronze badge

Collectives™ on Stack Overflow

How to get data from db using angularjs and entity framework in mvc

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related