AngularJS, ASP.NET MVC 4 and SEO

What if you want your single-page app to behave like a regular multi-page website when the client’s browser doesn’t support JavaScript? Here is an example of how to implement it with AngularJS and ASP.NET MVC:

Demo: http://angularjs-seo.tarkus.me/

Create a new ASP.NET MVC 4 project. Extract HTML from within the <body> tag of the /Views/_Layout.cshtml file into a separate layout (_BodyLayout.cshtml).

At the top of _BodyLayout.cshtml, specify the parent layout and make sure it will be set to null if the request is made with the “X-Requested-With: XMLHttpRequest” header by using Request.IsAjaxRequest()

Update the default layout name in /Views/_ViewStart.cshtml.

Add a reference to angular.js and your custom app.js files in the parent layout (_Layout.cshtml). Add <ng-view>@RenderBody()<ng-view> into _Layout.cshtml.

Add the ng-app=”App” attribute to the <html> tag and insert the following code into your app.js file with routing information:

var app = angular.module('App', []);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', { templateUrl: '/home/index' })
        .when('/home/about', { templateUrl: '/home/about' })
        .when('/home/contact', { templateUrl: '/home/contact' });
    $locationProvider.html5Mode(true);
}]);

That’s it!

Single-Page App with AngularJS and ASP.NET MVC 4

You want to try creating a single-page web application (SPA) on top of AngularJS, a client-side MVC framework by Google. I assume, you’re already familiar with ASP.NET MVC. Will these two play together nicely? The answer is YES! With a few gotchas…

First, why on earth would you want to mix a client-side MVC-family framework with a server-side one? I think you do not want to do that. On the other hand, ASP.NET MVC 4 provides a great framework for creating RESTful services: Web API. And that’s what we’re going to use. So, create a new ASP.NET MVC project and select the Web API template, as shown below:

Even though you selected the Web API project type, there are a few ASP.NET MVC artifacts we want to remove:

Then, add your static views (either .html or .cshtml) into the project, as shown below:

If you want to use .cshtml views instead of .html ones, you need to make sure that public access to .cshtml files is enabled in web.config:

You also need to make sure that Default.html or Default.cshtml will be used for non-existent URLs. This can be done with IIS URL Rwrite module. For example, something like this:

Also, keep in mind that .cshtml Razor pages work differently in ASP.NET MVC and WebMatrix contexts. I described the usage of non-MVC Razor pages here. For example, in ASP.NET MVC .cshtml files, you can write @Url.Content(“~/images/logo.png”); in non-MVC Razor pages, you write this instead: @VirtualPathUtility.ToAbsolute(“~/images/logo.png”) or @Href(“~/images/logo.png”).

Want to customize your Razor views? Start with adding the following section in web.config

Still have questions? Feel free to ask me here.

Top