Getting Started With BackboneJS in MVC 4

Introduction

This article explains the association of a Backbone Template with the ASP.NET MVC Web Application. If you want to get the rapid access and build the client-side web apps then you should use this Backbone.js SPA template. This template uses the Backbone.js.

There are many templates available as in the following:

Backbone Template
Breeze/Angular Template
Breeze/Knockout Template
DurandalJs Template
EmberJS Template
Hot Towel Template

We'll explain today the Backbone Template. This template equips the structure to the Bacckbone.js application with the ASP.NET MVC. You can also see the My Account, Forgot Password and Email functionality in this template.

So, let's create an ASP.NET Web MVC Application with the Backbone Template.

Prerequisites

Creating Application with Backbone Template

Before creating the application, you need to install the Backbone template. Install the template as I provided the download link above. If your Visual Studio is open then restart Visual Studio to see the changes.

In this section we'll create an ASP.NET MVC 4 Application with the Backbone Spa Template. Use the following procedure to create the sample.

Step 1: Open Visual Studio

Step 2: Select the Web Tab and create an ASP.NET MVC 4 Web Application and enter the application name as in the following:

Create Mvc Application

Step 3: In the next wizard, choose the Backbone.js SPA Project.

Backbone SPA Project

Visual Studio wi; automatically create the project.

Step 4: Run the application by pressing Ctrl+F5.

Backbone SPA Home Page

Step 5: You can also click on "My Account" to see the My Account page.

Account in Backbone Project

Application Client Code

The application client code is written in the TypeScript language. You can easily find the client code in the Solution Explorer as shown below:

Client in Application

Application

The application.ts file defines the application. It is the root directory. It maintains the configuration and state information that is shared in the entire application.

Events

Events are used to develop the loosely coupled components. There are built-in components like Model Collection and View provided by Backbone. The events object is a singleton.

Router

Routing is used to connect the client-side pages with the regarding actions and events. There is a single router defined in the Router.ts. The project has by default two views named Home and About.

Application Server Code

The server code is defined io the following sections.

Controllers

Server in Application

By default the application has many controllers and the one named HomeController is the initial page and the SupprtController controls the new user account and the reset of the password information. The rest of the controllers are the Web API controllers, that send and receive JSON data. The controller uses the WebSecurity class as a default. The following code is the example of the Controller:

public class UsersController : ApiController
{
private readonly Func<string, string, bool, string> signup;
private readonly IMailer mailer;
private bool? debuggingEnabled;
public UsersController()
: this(
(userName, password, requireConfirmation) =>
WebSecurity.CreateUserAndAccount(
userName,
password,
requireConfirmationToken: requireConfirmation),
new Mailer())
{
}
}

Views

Every section in the application has its own corresponding view. It is normal to associate the controller to the view. The template named IncludeClientViews renders all of the views in a specified folder. The following is the example of the View:

@using System.Web.Optimization
@using BackboneMvcApp.Helpers
@section Navigation {
@Html.Partial("Navigation")
}
<div class="container-fluid">
<div class="row-fluid">
<div id="container" class="span12" role="main">
@{ Html.IncludeClientViews(); }
</div>
</div>
<script id="page-template" type="text/html">
<h2 class="page-header">{{title}}</h2>
<div>{{content}}</div>
</script>
</div>

Email

The Email template exists in the View/Emails folder. The email process is for the Sign-In and Forgot Password functionality. You can find the email address in the Web.Config file. In the Web.Config, when Debug="true", the application does not require user email confirmation, to speed up development. The following code is the example code:

To: @Model.To

From: @Model.From

Reply-To: @Model.From

Subject: Reset your My Backbone.js App Password

Views: Html, Text

Summary

With this article, you can create an ASP.NET MVC Web Application with the Backbone.js Spa Template. You can also check out the application client and server code. Thanks for reading.