CODEWITHSUNDEEP
javascriptangularjsasp.net-mvcasp.net-mvc-routingangularjs-routing
thiag0
thiag0

Reputation: 2229

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

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:

  1. User navigates to "http://localhost/MyApp/", MVC returns the layout page and then we navigate to the default state.
  2. 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"
  3. 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; }
                        }
                    }
                });
        }]);

Upvotes: 3

Views: 1950

Answers (3)

Mikalai
Mikalai

Reputation: 1525

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>

Upvotes: 0

Norbert Huurnink
Norbert Huurnink

Reputation: 1316

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>

Upvotes: 0

shammelburg
shammelburg

Reputation: 7308

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.

Upvotes: 1

Related Questions