How can I use Backbone.js with ASP.Net MVC?

Question

I'm preparing to implement a Backbone.js UI (client-side MVC) within ASP.Net MVC 3+ web application (server-side MVC).

I've read plenty of Backbone tutorials, but none that illustrate how the technology may or may not be useful in an ASP.Net MVC scenario.

What strategy should I follow when combining these two pieces?

Solution 1

To be fair, Backbone.js (client application) and MVC (server application) should have nothing in common. The only thing Backbone.js requires is a Restful Api. So what I would do is take a look at MVC 4's Web Api (Example). There are quite a few tutorials on the subject, but the one I listed gives quite a good overview.

Once you understand how to implement a Restful API, look at any tutorial on backbone.js that integrates with a server application. Just substitute your api with the tutorial's api and you should be in business. Read this book, it is priceless and contains brilliant examples on how to implement a backbone.js application locally and with a server.

On a side note, MVC 4's Web API integrates perfectly with backbone. Have a look at a plugin developed by Addy Osmani, Backbone.Paginator. It helps make filtering, pagination, skip, sort etc extremely easy with MVC 4's Web API and odata filters.

Solution 2

After learning Backbone.js and using it on a few projects, I've found that most of my time is spent figuring out how to use it, and not what my backend is doing. In terms of ASPMVC, you setup a few controller actions that return JSON.

Rob Connery uses Backbone.js with MVC3 in his series Real-World ASP.NET MVC3 on Tekpub.

Episode 6 - BackboneJS - is spent entirely introducing you to backbone and ASPMVC3 integration. Unfortunately, you must purchase the entire series for $32 and it helps to watch the whole thing to get a sense for whats being built. Further, I don't agree with the way he approaches everything in the videos but his use and description of Backbone.js is very helpful if you are new.

DocumentCloud (the project from which Backbone.js emerged) maintains a page entitled Tutorials, blog posts and example sites. They don't always list the backends used so you may have to browse all the links to see if you find anything.

This is quick little tutorial from real-world experience, basically wiring a backbone application to some ASPMVC endpoints.

Finally, here is a recent post on Microsoft's own ASP.NET Weblogs called "Integrating Backbone.js with ASP.NET Web API".