Angular and ASP.NET MVC

Question 1

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 Screen Shot

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>

UPDATEJSON RESULT

Question 2

Try to take /Product out of the link in your Index View.

Question 3

What is your controller name ? (the class that contains your Test action.

Question 4

@RickestRick I get the following Server Error in '/' Application. And URL is localhost:14634/Test

Question 5

@CodeNotFound Product Controller

Question 6

In $http.get('Product/Test').

Question 7

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').

Question 8

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"}]

Question 9

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

Question 10

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

Question 11

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)

Question 12

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

CodeNotFound CodeNotFound 23.4k10 gold badges75 silver badges73 bronze badges · Accepted Answer · 2016-02-12 20:10:37Z

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').

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"}]
it did not effect, still get the same result, I have updated the question and included a screen shot
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
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)

CollectivesTM on Stack Overflow

Angular and ASP.NET MVC

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related