Creating MVC RESTful API with Backbone.js - Part 3

This is the last part of the series for creating MVC RESTful API with Backbone.js. In previous two posts I have:

• Created MVC RESTful API
• Created Backbone model, collection and views

In this part, I will be rendering the client-side backbone views on server-side razor view pages.

I have two razor views: Index.cshtml and Details.cshtml.

In Index.cshtml I will be rendering the  ProductListView (backbone view) that I created before. Here is how to render this:

Here at the very beginning I am initializing the Products collection and then fetching collection data. The fetch method will cause to send a GET request to the specified URL of the collection. I am initializing and rendering ProductListView inside success callback of collection fetch method so that the view is rendered after the collection data is ready. The "el" attribute of the view indicates the root DOM element of this view.

Similarly ProductView is rendered at Details.cshtml:

Here I've passed the PropertyId from route data to initialize Product model and initializing the ProductView using this Product model.

That's all for rendering the views as HTML and the backbone views does necessary things for communicating with the server. Here you can get the whole thing together :)