RouteConfig triggers 500 error when refreshing page

I am using angularJS with ASP.NET. When I run my Web application, all links are working and there is no 500 error.

But when I refresh page I got 500 error like this one:

The partial view ‘Contacts’ was not found or no view engine supports the searched locations. The following locations were searched:

I am using angularJS controller to load template from ./templates folder and angularJS is doing that job very well…

Does someone knows why I am getting this error and how to fix it?

Also inside View folder there is only Index.cshtml file because because I load templates from ./templates directory
Here is RouteConfig.cs code:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute("templates", "templates/{action}.html",
         new { controller = "Home", action = "Templates", name = "" }
        );
        routes.MapRoute("contacts","contacts",
           new { controller = "Home", action = "Contacts", id = UrlParameter.Optional }
       );
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Controller class:

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

// ActionResult prikazan ispod služi da bi angularJS 
// mogao lodati HTML template u template folderu
public ActionResult Contacts()
{
    return PartialView();
}

public ActionResult Templates()
{
    return PartialView();

}

and here is angularJS route config:

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/contacts',
            {
                controller: 'ContactsController',
                templateUrl: 'templates/contacts.html'
            })
        .when('/add-contact',
            {
                controller: 'ContactAddController',
                templateUrl: 'templates/addContact.html'
            })
        .when('/edit-contact/:contactId',
            {
                controller: 'ContactEditController',
                templateUrl: 'templates/editContact.html'
            })
        .when('/display-contact/:contactId',
            {
                controller: 'ContactDetailsController',
                templateUrl: 'templates/displayContact.html'
            })

        .when('/bookmarked-contacts',
            {
                controller: 'ContactsController',
                templateUrl: 'templates/bookmarkedContacts.html'
            })
        .when('/search-contacts',
            {
                controller: 'SearchContactsController',
                templateUrl: 'templates/searchContacts.html'
            })
        .otherwise({ redirectTo: '/contacts' });
    $locationProvider.html5Mode(true);

});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The issue is related to improperly set server side. Firstly try to turn off the html5 mode

//$locationProvider.html5Mode(true);
$locationProvider.html5Mode({enabled: false});

And check that after refresh all is working. It should.

Change the routing like this:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("fonts*.woff");
routes.IgnoreRoute("*.js");
routes.IgnoreRoute("*.html");
routes.IgnoreRoute("*.css");
routes.IgnoreRoute("api/*");

routes.MapRoute(
    name: "Default",
    url: "{dummyController}/{dummyAction}/{dummy1}/{dummy2}/{dummy3}",
    defaults: new { controller = "Home", action = "Index"
        , dummyController = UrlParameter.Optional
        , dummyAction = UrlParameter.Optional
        , dummy1 = UrlParameter.Optional
        , dummy2 = UrlParameter.Optional
        , dummy3 = UrlParameter.Optional
    }
);

This should do what we need. Whenever there is anything comming to server:

• it ends with js, html, css … it is returned
• /api/ (ASP.NET Web API) is also skipped here
• and any url like /somestuff/somepart is treated as Home/Index

This setting url: "{dummyController}/{dummyAction}/{id}", makes the above. any part coming from html5mode is treated as a route key “dummyController”, “dummyAction”, while the Home and Index are passed as controller and action in the defaults: new { controller = "Home", action = "Index" ...

And because your application is expecting some parts of your routing, you should use it like this:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.IgnoreRoute("fonts*.woff");
    routes.IgnoreRoute("*.js");
    routes.IgnoreRoute("*.html");
    routes.IgnoreRoute("*.css");
    routes.IgnoreRoute("api/*");

    // keep this application special settings
    routes.MapRoute("templates", "templates/{action}.html",
     new { controller = "Home", action = "Templates", name = "" }
    );
    routes.MapRoute("contacts","contacts",
       new { controller = "Home", action = "Contacts", id = UrlParameter.Optional }
    );

    // this should do the job on F5
    routes.MapRoute(
        name: "Default",
        url: "{dummyController}/{dummyAction}/{dummy1}/{dummy2}/{dummy3}",
        defaults: new { controller = "Home", action = "Index"
            , dummyController = UrlParameter.Optional
            , dummyAction = UrlParameter.Optional
            , dummy1 = UrlParameter.Optional
            , dummy2 = UrlParameter.Optional
            , dummy3 = UrlParameter.Optional
        }

);

Also check this

How to: Configure your server to work with html5Mode

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0