Backbone.js with ASP.NET MVC

Question

In the last few days I've been reading about Backbone.js and how it simplifies JS code interaction with View elements, basically within HTML. I've also read about the differences between KnockoutJS and Backbone.js. Now I'm thinking whether using one or the other inevitably leads to duplicating the code that we already have in our MVC app (mostly ViewModels and routes in global.asax) inside our Views. Essentially requiring us to code another set of Models in Backbone or Knockout. As I understand, with KnockoutJS this is even more prevalent, that's why I thought I will choose Backbone but now I think it is not that different - after a few examples I saw that same duplication is becoming evident.

Also how do we maintain such an application if for instance we already have a bunch of MVC Partial Views and now we are supposed to recreate them in Backbone using some templating engine like JQuery templates?

Metabolite

the same question has been beating up my mind and i am glad u asked it – Ingram

Answer 1

Have been reading about backbone and knockoutjs myself lately, and was also pondering about how to leverage the framework with asp.net mvc. One approach to avoid the duplication of models is to serialize (json) the server side viewmodel and use it as your backbone or knockout model. Positive side effect, your client side models already contain the data on page load and don't have to fetch the data via an ajax request when the page is first loaded. I'm aware that only serializing the serverside viewmodel isn't enough for backbone/knockout, but it could be a starting point. Perhaps the serialized model could be a property on the clientside model.

About jquery templates, I usually put a jquery template in a partial view. This way they are easily rendered in your view like this:

<script id="SomeTemplate" type="text/x-jquery-tmpl">
    @Html.Partial("Templates/SomeTemplate")
</script>

Obviously, porting an existing application to leverage jquery templates will take some time and effort.

Bourke

This does provide some additional useful information. Hopefully others will answer too. – Metabolite

Hi I am new to backbone and knckout.A small question...do i need to use the router in backbone.js(i currently am using asp.net mvc4 webapi).I even feel its better to go with knockout for mvc 4 web api(becoz there's no need for routers or controllers,etc provided with backbone.js....?) – Ingram

Answer 2

I used backbone with Rails on a project once, and I ended up redoing all my templates in Underscore - underscore.js is a dependency of Backbone and comes with its own templating language.

My app was not huge, so it ended up not taking a lot of time. If your app is already pretty complex, than it may be a different story.

Like Suhas said, Backbone's collection has the ability to fetch all your models from the server and you can send them back using a save functionality that piggy-backs on Jquery's ajax calls. All you have to do is make sure they are serialized through JSON.

I found a recent 4-part series on using Backbone with ASP.NET MVC 3 - maybe it will be helpful to you: http://www.bitcandies.com/blog/2011/asp-net-mvc3-restful-application-tutorial-with-backbone-js-part-i/

Plus this makes a good reference for me to refer back to when I make a go at .net mvc :)

Wira

Answer 3

I recommend what ddango said in his comment to his answer. Start developing new functionality with backbone or knockout. We have a web app that most of the site is in conventional asp.net mvc and once we learned about knockout we started creating pages leveraging knockout. They can coexist peacefully. If then there is a desire to replace old functionality for whatever reason(maintainability or you have too much time on your hands ;) ). Then you can do it a piece at a time.

The strategy we're beginning to take is for asp.net mvc controllers to have two kinds of functions.

1. Actions that return data (used by knockout to populate templates/controls)
2. Actions that return HTML are for page requests.

HTH

Ormsby

Answer 4

If you would rather not rewrite your partials to templates, you can treat them as such by using controller methods that will return the partial view as html, which you retrieve in render or initialize of the Backbone view, eg:

        public ActionResult SomeAction(){ 
           var viewModel = new ViewModel(); 
           return View("~/path/to/partial/view.ascx", viewModel); }
        }

You could probably take this method a step further by first retrieving the view model on the client side (or building it) and then posting it to the action instead of creating a view model within the action.

(I would argue against this as anything but an interim while you migrate to templates though - you'll always be making a post to render something when you might have the data client side already, and just need the template string)

re: ViewModels, loading data from a controller via JsonResult or by serializing initially is the way to go. You don't need to duplicate much code for Backbone models - the json is loaded into the model and parsed into attributes that you can access via the Backbone api.

definitely recommend these articles (although not asp.net mvc specific):

http://backbonetutorials.com/what-is-a-model/

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

The cloudedit tutorial is a version behind (Controllers are now Routers) but is still a good place to start - and the parallels between Rails and ASP.NET MVC are easy to see.

Couldn't speak to knockout though!

Laryngo

You know, I take that back. I really can't recommend that pattern at all. If you have the time to experiment with getting your data and then making calls to get html back, you probably have the time to rewrite some templates. – Laryngo

I would go on to say, if your application is very large, just develop the new functionality using Backbone if you can, and slowly inch towards a new standard for doing things. We've been doing something similar with our application - the core of it is webforms, but we're developing most new functionality on top of MVC with Backbone. – Laryngo

i kinda understand what you're saying but could you please post a pair of code for the controller action and MVC Partial view (or regular view) with Backbone.js code in it? That way it would be easier to understand because the piece of code that you posted above that returns a partial view with and the corresponding model to it is pretty standard and straightforward. I want to see how it looks when Backbone.js is introduced in Views. – Metabolite

Answer 5

You can use your ASP.NET MVC app as a RESTful service emitting JSON for your view-models. The Backbone models can directly map to this JSON.

Caroncarotene

This does mean that I would have to rewrite my actions to send JSON data while now they return View/PartialView attached with the Model, doesn't it? Rewrite existing ones or write additional ones that deal with JSON? – Metabolite

That is right. The approach I would take is, all the new actions I wrtie would return JSON and I would keep refactoring existing one at a gradual pace to return JSON. – Caroncarotene