简体   繁体   English

重写angular和ASP.NET MVC的规则

[英]Rewrite rules for angular and ASP.NET MVC

I'm following this article (the bottom section about using the URL Rewrite). 我正在关注本文(有关使用URL重写的底部)。 My IIS Express (launched from VS) config file seems to be located C:\\Users[usernamehere]\\documents\\IISexpress\\applicationhost.config. 我的IIS Express(从VS启动)的配置文件似乎位于C:\\ Users [此处的用户名] \\ documents \\ IISexpress \\ applicationhost.config。

I place the rewrite rule inside the <system.webServer> tag like that article (and a lot of other articles I've read) say to. 我将重写规则放在<system.webServer>标记内,就像该文章(以及我读过的许多其他文章)所说的那样。 So it looks like: 所以看起来像:

<system.webServer>

        <rewrite>
        <rules>
            <rule name="angularjs routes"
                    stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" 
                        matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" 
                        matchType="IsDirectory" negate="true" />
                    <add input="{REQUEST_URI}" 
                        pattern="^/(api)" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
        </rewrite>

... all the other crap that was already there
</system.webServer>

In my VS project I have index.htm off the root and my test views under a Views folder. 在我的VS项目中,我的根目录下有index.htm,在Views文件夹下有测试视图。 This is the index.htm and it works when I click the link just fine. 这是index.htm,当我单击链接就可以了。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<head>
    <base href="/">
    <title></title>
    <meta charset="utf-8" />
</head>
<body ng-app="myApp">
    <p><a href="/">Main</a></p>

    <a href="red">Red</a>
    <a href="green">Green</a>
    <a href="blue">Blue</a>

    <!-- below is where the partial pages will replace -->
    <div ng-view></div>

    <script>
    var app = angular.module("myApp", ["ngRoute"]);

    app.config(function($routeProvider, $locationProvider) {
        $routeProvider
        .when("/red", {
            templateUrl: "Views/red.htm",
            controller: "redController"
        })
        .when("/green", {
            templateUrl: "Views/green.htm",
            controller: "greenController"
        })
        .when("/blue", {
            templateUrl: "Views/blue.htm",
            controller: "blueController"
        });

        $locationProvider.html5Mode(true);
    });

    app.controller("redController", function($scope){
        //alert("Red");
    });

    app.controller("blueController", function ($scope) {
        //alert("Blue");
    });

    app.controller("greenController", function ($scope) {
        //alert("Green");
    });
    </script>
</body>
</html>

The problem comes when I try to type in one of those pages direction: ie. 当我尝试输入这些页面方向之一时,就会出现问题:即。 http://localhost:60553/red http:// localhost:60553 / red

I get a 404. Which tells me that rewrite rule isn't being hit and doing it's job. 我得到一个404。这告诉我,重写规则没有被执行,而是在起作用。 Why am I getting a 404 even with that rewrite rule? 即使使用该重写规则,为什么也得到404?

I am guessing this is because your Views folder has a web.config that explicitly blocks request to it. 我猜这是因为您的Views文件夹有一个web.config ,它明确阻止了对其的请求。 That is placed there by default in MVC projects for security reasons. 出于安全原因,默认情况下将其放置在MVC项目中。

Note the following code in Views/Web.Config 请在Views/Web.Config注意以下代码

  <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>

If you comment this out, your code should work. 如果您对此进行注释,则您的代码应该可以工作。

However, I would advise moving your angular views to a different folder that isn't sort of a de-facto reserved folder for MVC. 但是,我建议将您的角度视图移到另一个文件夹中,这不是MVC的实际保留文件夹。 Change to something like ngView and this code will work. 更改为ngView代码,此代码将起作用。 It will be cleaner and clearer that way, and you don't run the risk of exposing your razor code to snooping users. 这样一来,它会变得更加干净和清晰,而且您不会冒把窥探者代码暴露给窥探用户的风险。

UPDATE The above is not the issue, per comments. 更新根据评论,以上不是问题。 The issue is that the rewrite rules were not being used from the file mentioned. 问题是未从提到的文件中使用重写规则。 Move them to web.config if possible - that will avoid setting up global rules that will apply to all iis express apps anyway. 如果可能的话,将它们移至web.config-这将避免设置全局规则,无论如何将其应用于所有iis Express应用程序。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM