javascript - 如何使用 ui.router 和 ASP.NET MVC 在 AngularJS 中处理页面刷新

Question

我们正在创建一个单页 ASP.NET MVC 应用程序，它使用 AngularJS ui.router 进行客户端路由。

目前，后退/前进按钮按预期工作，但当用户单击浏览器的刷新按钮时，将加载局部 View ，而不会加载布局页面。

例如:

1. 用户导航到“http://localhost/MyApp/”，MVC 返回布局页面，然后我们导航到默认状态。
2. 用户点击页面上的链接并通过客户端路由导航到该特定状态，url 现在是“http://localhost/MyApp/UserManagement/EditUser”
3. 用户点击浏览器的刷新按钮，加载没有布局的“UserManagement/EditUser”部分 View

为了在用户单击浏览器的刷新按钮时重新加载布局，我们还需要做什么？

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; }
                        }
                    }
                });
        }]);

Answer 1

你的 MVC RouteConfig.cs 文件应该是这样的，

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 }
        );
    }
}

至于您的状态配置，它与我实现状态的方式不同。下面的例子，

$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' });

希望对您有所帮助。