Rewrite rules for angular and ASP.NET MVC

Question

I'm following this article (the bottom section about using the URL Rewrite). My IIS Express (launched from VS) config file seems to be located C:\\Users[usernamehere]\\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. 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. This is the index.htm and it works when I click the link just fine.

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

I get a 404. Which tells me that rewrite rule isn't being hit and doing it's job. Why am I getting a 404 even with that rewrite rule?

Answer 1

I am guessing this is because your Views folder has a web.config that explicitly blocks request to it. That is placed there by default in MVC projects for security reasons.

Note the following code in 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. Change to something like ngView and this code will work. 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.

Rewrite rules for angular and ASP.NET MVC

Question

1 answers

solution1
1 ACCPTED 2016-10-18 18:57:34

Rewrite rules for angular and ASP.NET MVC

Question

1 answers

solution1 1 ACCPTED 2016-10-18 18:57:34

solution1
1 ACCPTED 2016-10-18 18:57:34