current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 3 down vote favorite
1

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; }
                        }
                    }
                });
        }]);
share|improve this question
    
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 Jun 26 at 1:35
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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>
share|improve this answer
up vote 0 down vote

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>
share|improve this answer
    
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Tony Hinkle Jun 27 at 12:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.