Angular $http.get returns 404 for my ASP.NET action?

Question

I have the following angularjs code:

  $http.get("/Home/GetEmails").then(function (response) {
            $scope.emails = response.data;
            $scope.init($scope.emails);
            $scope.totalEmails = $scope.emails.length;
        });

When I develop locally, it works fine, but when I publish to a live server, it gives the following error message:

Failed to load resource: the server responded with a status of 404 (Not Found). It is looking for http://xaisoft.com/Home/GetEmails, but it can't find it. Is there something else I need to do in ASP.NET MVC and/or Angular to get this to work. Currently, I just have the GetEmails action return a JSON object in my HomeController.

HomeController

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetEmails()
    {
        return Json(new[]
        {
            new
            {
                from = "Jet Blue",
                to = "Me",
                subject = "Buy one seat, get one free!",
                body = "That and helping Data finish 'Pop Goes the Weasel'. Also counts as a CMOH.",
                date = "Dec 20th 12:22 PM",
                isImportant = false,
                isStarred = true,
                isChecked = false,
                isRead = true
            },
            new
            {
                from = "Publix",
                to = "Me",
                subject = "Check this weeks BOGO deals",
                body = "Hurry, ends Thursday!",
                date = "Mar 15th 8:15 AM",
                isImportant = false,
                isStarred = false,
                isChecked = false,
                isRead = false
            },
            new
            {
                from = "AJ Carpio",
                to = "Me",
                subject = "When Life Gives You Questions, Google has Answers",
                body = "Get more life quotes here",
                date = "Mar 15th 8:15 AM",
                isImportant = true,
                isStarred = false,
                isChecked = false,
                isRead = true
            }
        },JsonRequestBehavior.AllowGet);
    }

}

If you visit that URL in a browser it returns a 404, so I suggest posting the .NET code rather than AngularJS. Angular doesn't seem to have anything to do with your issue. — Dan Bowling
– Dan Bowling, Commented Sep 28, 2014 at 17:18

Darin Dimitrov · Accepted Answer · 2014-09-28 17:48:16Z

2

You should never hardcode urls in an ASP.NET MVC application as you did:

$http.get("/Home/GetEmails")

You should always use url helpers. For example in your view you could set a variable:

<script type="text/javascript">
    var getEmailsUrl = @Url.Action("GetEmails", "Home");
</script>

that you could later use in your ng script:

$http.get(getEmailsUrl)

The purpose of Url helpers such as Url.Action is to take into account things like the hosting environment virtual directory and your routing configuration. All those factors could change between the various environments and if you hardcode your urls in your javascript you will pretty much get lots of 404s.

Here's a more angular way of doing this instead of registering a global javascript variable. You could use the $provide:

<script type="text/javascript">
    angular.module('myApp').config(['$provide', function ($provide) {
        // Here you can also register a complex javascript object that will serve
        // as configuration for your app and can contain multiple urls

        $provide.value('getEmailsUrl', '@Url.Action("GetEmails", "Home")');
    }]);
</script>

and then you can inject the getEmailsUrl in your controllers and services:

app.controller('HomeController', ['$scope', 'getEmailsUrl', function ($scope, getEmailsUrl) {
    // You can use the getEmailsUrl variable here.
}]);

edited Sep 28, 2014 at 17:48

answered Sep 28, 2014 at 17:21

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

7 Comments

xaisoft Over a year ago

Hi, you mentioned that use the Url Helper in my view, but I am calling http.get from an external js file, so when I try to put this var getEmailsUrl = @Url.Action("GetEmails", "Home");, it complains that it is illegal syntax.

Darin Dimitrov Over a year ago

You probably didn't read my answer carefully. I have used the Url.Action helper inside a <script> tag INSIDE your Razor view. I defined the getEmailsUrl javascript variable that I later indicated that you could use in your EXTERNAL javascript file.

xaisoft Over a year ago

Ok, no need to shout. Is this the only way? Doesn't this pollute the global scope? I am not too good with javascript.

Darin Dimitrov Over a year ago

Yes, this pollutes the global scope. You could improve this by using an Angular service and inject it as a dependency.

Darin Dimitrov Over a year ago

No, I am not refering to using the routeProvider. I am referring to the $provide. I have updated my answer to provide an example.

|

Collectives™ on Stack Overflow

Angular $http.get returns 404 for my ASP.NET action?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related