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

我们正在创建一个使用AngularJS ui.router进行客户端路由的单页ASP.NET MVC应用程序。如何在ASP.NET MVC中使用ui.router处理AngularJS中的页面刷新

当前，后退/前进按钮按预期工作，但当用户单击浏览器的刷新按钮时，部分视图将在没有布局页面的情况下加载。

例如：

用户导航到“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; } 
         } 
        } 
       }); 
     }]);

来源

2016-06-14 thiag0

你能分享你的布局页面代码吗？我假设你有一个''标签。此外，您必须在RouteConfig中提供一个全面的网址。所有没有'＃'的url请求都发送到服务器，因此服务器应该将所有url映射到单个布局呈现操作 – v1p

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

我希望这有助于。

来源

2016-06-14 14:11:12 shammelburg

这是一件事情。我试图改变网络配置，并添加，但它没有奏效。添加了“角度”路线并且工作。 –

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

你可以在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>

来源

2016-06-26 15:14:03 Noppey

你可以在UI路由器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>

来源

2016-06-27 11:48:04 Mikalai

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

回答

相关问题