Replacing Backbone.js views with React.js views in a ASP.NET MVC 5 Application and using ASP.NET WEB API 2 as a RESTful service for Backbone.js

Overview

RESTful service: ASP.NET Web API can be used for building RESTful services on top of the .NET Framework.

Maintainable client side code with RESTful persistence: Backbone.js provides structure to client side code. Backbone.js makes client side code more maintainable in the long term. Backbone.js supports RESTful persistence through its fetch() and create() methods on Collections and fetch(), save(), and destroy() methods on Models.

Efficient DOM updates with component based structure: React.js library deals with the view layer of the application & provides a component based structure to the application. In React.js, each component decides how it should be rendered. React.js efficiently updates and render just the right components when data changes.

News Application using ASP.NET MVC 5, ASP.NET WEB API 2 (RESTful service), Backbone.js (RESTful persistence) & React.js (view layer)

The following code demonstrates how we can use Backbone.js models & collections along with React.js views. Also, in this application, ASP.NET WEB API 2 is used as a RESTful service for Backbone.js.

Step 1: Create a ASP.NET WEB API 2 service (RESTful service) which will be used by Backbone.js. This will be used to perform CRUD operations.

News Model:

News Web API for performing CRUD operations:

Step 2: Install following Nuget packages in ASP.NET MVC 5 Application:

Install Backbone.js, react.js, React.Web Nuget packages

BackboneJS Nuget Package ReactJS Nuget Packages

Step 3: Create Backbone.js model & collection:

Folder structure

Backbone.js With React.js Views

 

 Backbone.js model – newsItem.js

 Backbone.js collection – newsList.js

Step 4: Replacing Backbone.js views with React.js views:

React.js views – NewsListing.jsx

news-view.js

Step 5: app.js contents

Step 6: ASP.NET MVC 5 Application, setting up Controller & Views:

Home Controller:

News.cshtml view under “Views/Home” directory:

Step 7: React in action in React Developer Tools

React JS In Action In React Developer Tools

That’s All.

 

Kapil Khandelwal

Web Developer, Blogger, Microsoft Certified Professional (MCP), DZone’s Most Valuable Blogger (MVB)

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *