ASP.net MVC SPA routing

Question

I'm planning to build a SPA with asp.net MVC4 but I'm not quite sure how I have to Setup my Project because of the Routing. Most SPA's work with hashrouting like this mypage/#/News/today for instance.

What would happen if the browses directly to mypage/News/today if I haven't specified a Controller named News with an action today?

The App should handle both types of Routing, how can I achieve this?

Do I have to build my App in a classic way, like Adding several Controllers with appropriate Actions and views and also build a clientside MVC structure with knockout, jquery etc?

Answer 1

You'll have to let all routes to "pages" fall through to let your SPA handle them (including essentially fake 404s if it's not to a real page in your SPA), but at the same time, need to make sure that you get the correct responses for API calls and/or file requests.

Below is the setup I have (I am using Vue as the js framework but that doesn't matter much for this, and not at all for the server-side piece).

First, add this to your Startup.cs, in addition to your default route setup:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        ...

        app.Use(async (context, next) =>
        {
            await next();

            var path = context.Request.Path.Value;
            // If there's no available file and the request doesn't contain an extension, we're probably trying to access a page
            if (context.Response.StatusCode == (int)HttpStatusCode.NotFound && !Path.HasExtension(path) && !path.StartsWith("/api"))
            {
                context.Request.Path = "/Home/SpaRedirect"; // attempts to redirect to the URL within the SPA
                context.Response.StatusCode = (int)HttpStatusCode.OK; // Make sure we update the status code, otherwise it returns 404
                await next();
            }
        });

        ...
    }

So the newly added SpaRedirect to HomeController looks like this, and just stores the requested URL in ViewData...

    public IActionResult SpaRedirect()
    {
        ViewData["RequestUrl"] = HttpContext.Request.Path;
        return View("Index");
    }

Then in Index.cshtml, just capture that requested url in session storage so we have it available on the client-side:

<script src="~/dist/main.js" asp-append-version="true">
    sessionStorage.setItem("redirectAttempt", @ViewData["RequestUrl"]);
</script>

Then in your boot script file (the entry-point for your SPA), add something like:

let redirectAttemptUrl = sessionStorage.getItem("redirectAttempt");
if (redirectAttemptUrl) {
    router.push(redirectAttemptUrl);
    sessionStorage.removeItem("redirectAttempt");
}

Which just checks for the presence of a requested url, and then the SPA's router attempts to navigate to it (in the example above it is a vue-router), then removes it from storage.

So this way, if a user attempts to navigate directly to a URL by entering it in the url bar (or via a bookmark) the app will load and take them to the right place, IF it exists... which takes us to the last piece...

Finally, you have to handle "404s" within your SPA, which is done by adding a catch-all route to your routes defs that takes user to a 404 component page you set up, which for Vue would look like this:

// adding an explicit 404 path as well for programmatically handling when something is not found within the app, i.e. return this.$router.push('/404')
{ path: '/404', component: NotFound, name: '404', alias: '*' }, // remove alias to not show the actual url that resulted in our little 404 here
{ path: '*', redirect: '/404' }, // this is the catch-all path to take us to our 404 page

Caveat: I'm no expert so could be missing something, would love additional comments on how to improve this. One thing that this doesn't handle is if the user is ALREADY in the SPA and for some reason edits the URL directly to navigate to someplace else, it would still trigger a server call and full reload, which ideally wouldn't be the case, but this is a pretty trivial issue I'd say.