Question

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

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

例如：

用户导航到“http://localhost/MyApp/”，MVC返回布局页面，然后我们导航到默认状态。
用户点击页面上的链接，并通过客户端路由导航到该特定状态，网址现为“http://localhost/MyApp/UserManagement/EditUser”
用户点击浏览器的刷新按钮，它会加载没有布局的“UserManagement / EditUser”局部视图

当用户点击浏览器的刷新按钮时，我们需要做些什么才能重新加载布局？

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

我希望这会有所帮助。

Answer 2

首先由您的ASP.NET应用程序路由该URL，如果您希望加载角度应用程序，则需要将所有这些“其他”请求重定向到您的角应用程序所在的页面。

您可以在web.config文件中执行此操作：

<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>

Answer 3

您可以在ui-router FAQ中找到很好的解释。配置文件中有重写配置：

<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>

如何使用带有ASP.NET MVC的ui.router处理AngularJS中的页面刷新

3 个答案: