asp.net client routing with page.js

Question

I am trying to build a simple asp.net application (webforms) and I would like to do the routing in the client. This is a SPA.

I am using the page.js library to handle the routing. My development environment is visual studio 2015 Enterprise. This is an example of a routing

page('/admin', display_admin);
page('/items/:sub/:id', display_item);

In the server-side, I setup things so that for every url request, index.html is loaded (since routing is handled in the client) and the appropriate route handler is called and executed. In the web.config I have:

<configuration>
<system.webServer>
  <modules runAllManagedModulesForAllRequests="true" />
  <rewrite>
    <rules>
      <!--Redirect selected traffic to index -->
      <rule name="Index Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

see this article ASP.NET 5 and AngularJS Part 3, Adding Client Routing

Everything works fine when the custom url is of this form '/xxx' for example '/admin' , '/items' etc... But it does not work for complex url where the path of the form '/xxx/yyy/zzz'. ex: 'items/cars/10'. In visual studio during debug the application craches:

You can see that the server (embedded webserver in visual studio) tries to load resources for page "1" from the folder at 'localhost:port/items/c/' which of course does not exist. This request does not reach my server where a redirect would occur to page 'index.html'.

How can I implement client-side routing in asp.net (with .html files, not .aspx files) and with complex url path?

I am guessing that this is problem related to the embedded webserver in visual studio (which is a light iis version...)

Any help, any hint would be greatly appreciated

Thank you stackoverflow community

Answer 1

You are most likely using relative paths to scripts. This means the browser will assume the page being served is under /something/else/entirely and will ask for it there. Use an absolute path as /bootstrap.min.js to make sure it's requested properly.

The server may internally redirect to /index.html with your configuration but the browser doesn't know that.

The reason why single level /something works is due to browser still assuming everything is on the root level. An additional slash and the context moves down one "folder."