How to handle page refresh in AngularJS using ui.router with ASP.NET MVC

Question

We are creating a single-page ASP.NET MVC application which uses AngularJS ui.router for client-side routing.

Currently, the back/forward buttons work as expected, but when the user clicks the browser's refresh button, the partial view is loaded without the layout page.

For example:

User navigates to "http://localhost/MyApp/", MVC returns the layout page and then we navigate to the default state.
User clicks on a link on the page and is navigated to that particular state via client side routing, url is now "http://localhost/MyApp/UserManagement/EditUser"
User clicks on browser's refresh button, it loads the "UserManagement/EditUser" partial view without the layout

What else do we need to do in order for the layout to be reloaded when the user clicks the browser's refresh button?

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

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

var baseFrameworkApp = angular.module("BaseFrameworkApp", ['ui.router'])
    .config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider',
        function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider) {
            $locationProvider.hashPrefix("!").html5Mode(true);
            $urlRouterProvider.otherwise("/");
            $stateProvider
                .state('Default', {
                    url: '/{controller}/{action}',
                    views: {
                        "mainContainer": {
                            templateUrl: function (params) { return params.controller + '/' + params.action; }
                        }
                    }
                });
        }]);

Can you share your layout page code ? I assume you do have a <base href="/"> tag there. Also, you have to provide a catch-all url in your RouteConfig. All url requests without a # goes to server, so server should map all urls to a single layout rendering action — v1p
– v1p, Commented Jun 26, 2016 at 1:35

shammelburg · Accepted Answer · 2016-06-14 14:11:12Z

1

Your MVC RouteConfig.cs file should be like this,

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

        routes.MapRoute(
            name: "angular",
            url: "{*.}",
            defaults: new { controller = "Home", action = "Index"}
        );

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

As for your state configuration it is different to how I implement my states. Example below,

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

$stateProvider
.state('home', { url: '/', templateUrl: 'Angular/views/home.html', controller: '' })
.state('login', { url: '/login', templateUrl: 'Angular/views/account/login.html', controller: 'LoginController' });

I hope this helps.

answered Jun 14, 2016 at 14:11

shammelburg

7,3687 gold badges29 silver badges36 bronze badges

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

1 Comment

Ravi Sankar Rao Over a year ago

this was something. I tried to change web config and added <rewrite> but it did not work. Added the "angular" route and worked.

Norbert Huurnink · Accepted Answer · 2016-06-26 15:14:03Z

0

The url is routed by your ASP.NET application first, if you want the angular app to load, you will need to redirect all those 'other' requests to the page where your angular app lives.

You could do this in web.config file:

<system.webServer>
    <rewrite>
        <rules> 
            <rule name="AngularJS Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> <!-- ignore stuf you don't want rerouted -->
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
         </rules>
     </rewrite>
</system.webServer>

answered Jun 26, 2016 at 15:14

Norbert Huurnink

1,32610 silver badges18 bronze badges

Comments

Mikalai · Accepted Answer · 2016-06-27 15:25:31Z

0

You can find good explanation in ui-router FAQ. There is rewrite configuration in config file:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

edited Jun 27, 2016 at 15:25

answered Jun 27, 2016 at 11:48

Mikalai

1,5258 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to handle page refresh in AngularJS using ui.router with ASP.NET MVC

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related