Angularjs html5Mode頁面刷新打破了asp.net mvc路由

我在我的asp.net應用程序中執行angularjs路由。我有一個文件夾名稱模板，它由3個html頁面組成，主頁，關於，錯誤。這裏是我的app.js文件Angularjs html5Mode頁面刷新打破了asp.net mvc路由

var app = angular.module('myApp', ['ngRoute','ngAnimate']); 

app.controller('HomeController', function ($scope) { 
    $scope.Message = "We are in home page"; 
}); 
app.controller('AboutController', function ($scope) { 
    $scope.Message = "We are in about page"; 
}); 
app.controller('ErrorController', function ($scope) { 
    $scope.Message = "404 page not found"; 
}); 

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
    $routeProvider. 
     when('/', { 
      redirectTo: function() { 
       return '/home'; 
      } 
     }). 
     when('/home', { 
      templateUrl: '/template/Home.html', 
      controller: 'HomeController' 
     }). 
     when('/about', { 
      templateUrl: '/template/About.html', 
      controller: 'AboutController' 
     }). 
     when('/error', { 
      templateUrl: '/template/Error.html', 
      controller: 'ErrorController' 
     }). 
    otherwise({ 
     redirectTo: '/error' 
    }); 
    $locationProvider.html5Mode(true); 
}]);

Home.html中包括

<div ng-controller="HomeController"> 
<h1>Home Page</h1> 
<h3>{{Message}}</h3>

等。

在我的Layout.cshtml文件中，我已經包含了模塊myApp和base屬性。

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <base href="/" />

機身擁有定義一些鏈接

<body> 
<div> 
    <ul> 
     <li><a href="/home">Home</a></li> 
     <li><a href="/about">About</a></li> 
     <li><a href="/erro">Invalid Url</a></li> 
    </ul> 
</div> 
<div class="container"> 
    <div data-ng-view="" id="ng-view" class="slide-animation"></div> 
</div>

路由工作時，我從家裏瀏覽到他人的罰款。但是，當我刷新關於頁面，它給資源找不到錯誤。爲此，我也包括服務器端重寫像這樣在我的web.config文件。

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

enter image description here

不過問題仍然需要幫助解決它。謝謝。

來源

2015-05-19 Ghazanfar Khan

頁面一覽無餘。你的重定向規則工作正常嗎？ PS：理想情況下，您應該返回所有網址的着陸頁響應，而不是重寫。簡單地說，如果您從/ about/home重定向到/ home，那麼當您重新關聯頁面時，您將最終返回主頁。 – Neo

當我刷新關於頁面錯誤時沒有找到資源未找到我的更新的問題 –

您的主頁URL是/ home其/重定向到。你的網絡服務器不知道它與/ home有什麼關係。它在你的角度應用程序中定義。 – Neo

我已讓解決它在Route.Config變化的文件

routes.MapRoute(
      name: "Default", 
      url: "{controller}/{action}/{id}", 
      defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 
     );

將其替換爲

routes.MapRoute(
     name: "Application", 
     url: "{*url}", 
     defaults: new { controller = "Home", action = "Index" });

來源

2015-05-19 11:19:43

它適用於我。但是我應該用註銷表單來做什麼？ javascript：document.getElementById（'logoutForm'）。submit（）它被忽略。 – oyaebunterkrah

我發現當我點擊刷新時，正確的視圖再次出現...但路由從URL中刪除 - 所以第二次刷新再次加載我的主頁面。例如，我在localhost/home（按F5）home重新加載，但瀏覽器中的url變爲localhost /（hit F5）主頁面重新加載。有任何想法嗎？ – Sean

任何使用Asp.Net Core的人：'url'參數現在被稱爲'template' – PhatBuck

你要重定向到您的基本網址（也就是角應用可以啓動），不url="/home"，但url="/"

來源

2015-05-19 10:48:53 wilver

問題仍然存在 –

Angularjs html5Mode頁面刷新打破了asp.net mvc路由

回答

相關問題