如何在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中的頁面刷新

回答

相關問題