Angular and ASP.NET MVC

Question

I am learning angular, and I am using ASP.NET MVC5. I am unable to return data from mvc controller via angular.

The route should be localhost/Product/Test, but when angular get method is calling it the url is locahost/Product/Product/Test. Any help is appreacited.

Is the approach I have taken correct also? Because I have seen many tutorials where they show how to return a view only. But cannot seem to find how to return a view and data.

Screenshot

MVC controller

public ActionResult Test()
        {
            List<Product> products = new List<Product>();
            var db = new HotStuffPizzaContext();

            var result = (from p in db.Products
                          select p)
                          .Where(x => x.ProductID != 0)
                          .Select(a => new
                          {
                              ProductID = a.ProductID,
                              Description = a.Description
                          });
            return View("~/Views/Product/_Test.cshtml", result);
}

Angular app

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/Test', {
        url: '/Product',
        templateUrl: '../../Views/Product/_Test.cshtml',
        controller: 'testCtrl'
    }).otherwise({
        redirectTo: '/'
    });

}]);

myApp.controller('testCtrl', ['$scope', '$http',
  function ($scope, $http) {
      $http.get('Product/Test').success(function (data) {
          $scope.products = data;
      });
  }]);

Partial View

<html data-ng-app="myApp">
<head>
    <title></title>
    <script src="../../Scripts/angular.min.js"></script>
    <script src="../../Scripts/angular-route.js"></script>
    <script src="../../Scripts/App/app.js"></script>
</head>
<body data-ng-controller="testCtrl">
    <div>
        <table class="table table-striped">

            <tr data-ng-repeat="p in products">
                <th>id</th>
                <th>description</th>
            </tr>
            <tr>
                <td>{{p.productid}}</td>
                <td>{{p.description}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

Index View

<h1>INDEX VIEW</h1>
<div data-ng-view=""></div>

<a href="/Product/Test">Test</a>

<script src="../../Scripts/angular.min.js"></script>
<script src="../../Scripts/angular-route.js"></script>
<script src="../../Scripts/App/app.js"></script>

UPDATE

What is your controller name ? (the class that contains your Test action. — CodeNotFound
– CodeNotFound, Commented Feb 12, 2016 at 19:53
@RickestRick I get the following Server Error in '/' Application. And URL is localhost:14634/Test — Harry
– Harry, Commented Feb 12, 2016 at 19:53

CodeNotFound · Accepted Answer · 2016-02-12 20:35:29Z

2

First replace "Product/Test" with "/Product/Test" notice the "/" at the beginning

Your action will are not implemnted to return a json data but a View (which will be plain HTML) sent to your Angular App.

You must return a Json data in your Test action. Replace the following line:

return View("~/Views/Product/_Test.cshtml");

by this line:

return Json(result.ToList());

You might need to allow GET method with AJAX request then use:

return Json(result.ToList(), JsonRequestBehavior.AllowGet);

Don't forget to add [GET] attribute to your Test action.

You must look at using ASP.Net Web API instead of ASP.Net MVC.

Update 1: Based on the comment below this answer :

Replace linq query by renaming your anonymous type correctly like this :

var result = (from p in db.Products
               select p)
               .Where(x => x.ProductID != 0)
               .Select(a => new
                {
                    productid = a.ProductID,
                    description = a.Description
                });

Notice that there is no upper case into anonymous type properties. You must use it like this because your AngularJS App need it:

<tr>
     <td>{{p.productid}}</td>
     <td>{{p.description}}</td>
</tr>

Update 2: You need to have two actions

One that return your view Test
another one to get your data TestData

Your Test will look like this:

public ActionResult Test()
{
     return View("~/Views/Product/_Test.cshtml");
}

Your TestData liek this:

public ActionResult TestData()
{
        List<Product> products = new List<Product>();
        var db = new HotStuffPizzaContext();

        var result = (from p in db.Products
                      select p)
                      .Where(x => x.ProductID != 0)
                      .Select(a => new
                      {
                          productid= a.ProductID,
                          description = a.Description
                      });
        return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}

Finally replace the url of $http.get('Product/Test') with $http.get('/Product/TestData').

edited Feb 12, 2016 at 20:35

answered Feb 12, 2016 at 20:10

CodeNotFound

23.4k10 gold badges75 silver badges73 bronze badges

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

12 Comments

Harry Over a year ago

I just tried this, and it takes me to a result of json [{"ProductID":1,"Description":"Margarita"},{"ProductID":2,"Description":"Pepperoni"},{"ProductID":3,"Description":"Burger"}]

Harry Over a year ago

it did not effect, still get the same result, I have updated the question and included a screen shot

Harry Over a year ago

It doesn't work, it just returns what is in my screen shot. in the debugger i cannot see any scripts loaded into the page

Harry Over a year ago

no, by clicking the href in Index view. The Product Controller is now doing return Json(result.ToList(), JsonRequestBehavior.AllowGet); (this is what is causing to do this)

Harry Over a year ago

I have tried this, and still get the same result. :z

|

Collectives™ on Stack Overflow

Angular and ASP.NET MVC

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related