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

回答

相关问题