Ah yes, XSRF.

So the basics are we need to ensure that the content of a POST request is coming from our site and has not been intercepted by a ne’er-do-well.

In ASP.Net MVC it’s pretty straighforward. In your Razor file, just add an Html.AntiForgeryToken() into the form in question and then, on the action, add a [ValidateAntiForgeryToken] filter and all is well.

I prefer JSON camel cased. The default setup in ASP.net Web Api using the Newtonsoft JsonSerializer is for Pascal Case. To switch to camel case is easy and makes for a much more seamless angularJS and Web Api interaction. In the WebAPiConfig class:

1
2

var jsonFormatter = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

There are a number of ways to authenticate an angularJS application. This is the one I am currently using. It uses a FormsAuthentication cookie in the same way as a regular ASP.Net WebForms/MVC app would.

The structure is basically Web Api, a single MVC home controller with an Index.cshtml and angular.

When an angularjs site initially starts up, it can take a little time for all the various HTTP requests to complete.

HTTP requests

• GET Index.cshtml
• GET the various JS and CSS files (hopefully only one minified version of each)

For those using Web Api to deliver json payloads, you might come across an issue relating to dates, more specifically, timezones.

The ISO8601 date format is becoming the defacto format for date strings and is now the default for the default Web Api serialiser, Json.Net.

The ISO8601 date specification explicitly states what happens when the TZD (or time zone designator) is ommited. Read more here. It states:

We want to minify and combine our javascript and css files when moving into a production environment to reduce as much as we can the time taken for our web pages to load. In .Net land, we might use the Microsoft ASP.NET Web Optimization Framework to do this.

There is sometimes an issue where a css file has a relative path reference to an image. An example of this is in twitter bootstrap. See that url? That’s a problem for us.

Update – this Drag and Drop post covers some other aspects of this plug-in.

FullCalendar is a JavaScript calendar JQuery plug-in. I’ve used it now on 2 projects and it’s just great.

So on another project, we needed to be able to see the calendar agenda day view with it split into vertical columns for each ‘resource’. There are a few forks that are doing this with FullCalendar but they aren’t really suitable for us. One has resource rows rather than columns and the other is a fork of an old version of the FullCalendar code.

So I went ahead and forked the source on github. The goal was to keep the forked version as similar to the core as possible – that way upstream merging should be easier.

By default, the routing in angular utilises the hash character in the URI path. For example http://myapp/#/customers/5. By setting the $locationProvider to html5Mode, we can get to http://myapp/customers/5 which is a lot nicer.

1
2
3
4
5
6
7
8
9

angular.module('myApp', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
      when('/customers/:customerId', {templateUrl: 'partials/customer.html', controller: CustomerCtrl}).
      otherwise({redirectTo: '/'});

  $locationProvider.html5Mode(true);

}]);

Today I upgraded to node 0.10.15 and just ran npm install on a project I am working on. I started seeing a lot of these failures:

npm - ERR! registry error parsing json
npm - ERR! SyntaxError: Unexpected token <

I had already run the npm install command maybe 30 minutes previously so I thought it might be something to do with the node/npm versions so I did the usual and rolled back. Same issue. Ok so maybe a corrupt module or something? npm cache clean was next. Still no change.

Let’s say we have a controller action that returns a JsonResult with an anonymous type:

1
2
3
4
5
6

public JsonResult Customer(int id)
{
    var customer = new { Id = id, Name = "John" };

    return Json(customer, JsonRequestBehavior.AllowGet);
}