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:
Step 3: In the next wizard, choose the Backbone.js SPA Project.
Visual Studio wi; automatically create the project.
Step 4: Run the application by pressing Ctrl+F5.
Step 5: You can also click on "My Account" to see the My Account page.
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:
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
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.