Create Application in Web API Using Backbone.JS

Mudita Rathore
10y
11.3k
0
0
100
Article

Introduction

In this article we will create a Web API application using backbone.js. We will create a single-page API application and Backbone.js.

Let's see how to use backbone.js in the Web API.

Step 1

Create a Web API application using the following:

Start Visual Studio 2013.
From Start window Select "New Project".
Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET MVC4 Web Application".

Select MVC4

Click on the "OK" button.
From the MVC4 project window select "Web API".

Select Web API

Click on the "OK" button.

Step 2

Now add the model class to the project:

In the Solution Explorer.
Right-click on the Model Folder.
Select "Add" -> "Class".
Select "Installed" -> "Visual C#" and select "Class".

Add MOdel Class

Click on the "Add" button.

Add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace backboneAPI.Models

{

public class Item

{

public int ID { get; set; }

public string Name { get; set; }

public int order { get; set; }

public bool complete { get; set; }

}

Step 3

Now add an MVC controller "ItemController" to the project.

In Solution Explorer right-click on the Controller folder.
Select "Add" then "Controller", select "Empty MVC controller" from the templates and click on the "Ok" button.

Add MVC controller

public class ItemController : Controller

{

// GET: /Item/

public ActionResult Index()

{

return View();

}

In the ItemController class is an action method Index(). Right-click on the index method and select "AddView" then click on the "OK" button.

Select Add View

Now we can see in the Solution Explorer that there is a folder named "Item" added and the View is generated in this folder.

Index file

Step 4

Now we add a API controller with Entity Framework in the Controller folder. Before adding it we need to build our application.

In the Solution Explorer.
Right-click on the Controller folder and Select "API Controller with read/write actions, using Entity Framework" from the template.
Select the Model Class.
Now select the Context Data Class.

Add API Controller

And click on the "Ok" button.

In the ItemsController the code is automatically generated with read write operations. And there is a context class added in the Model folder.

Context class

Step 5

Now add the code in the Index.cshtml page. We can find this file from "View" -> "Item" -> "Index.cshtml" and add the following code:

<!DOCTYPE html>

<head>

<title>Backbone.js Items</title>

</head>

<body>

<h1>Add new items</h1>

</header>

<label for="toggle-all">Ckeched as all complete</label>

</section>

<a id="clear-completed">Clear completed</a>

</footer>

</div>

double click to add items

</div>

</div>

</script>

<% if (done) { %>

<a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>

<% } %>

</script>

</body>

</html>

Step 6

We need to change some code in the Todos.js file.

var TodoList = Backbone.Collection.extend({

// Reference to this collection's model.

model: Todo,

url: function () {

return 'api/items';

Step 7

We need to add a JS fie in your project, such as "backbone.js", "underscore.js", "jquery-1.8.2.min.js" and "todos.js".

Js file

Step 8

Execute the application:

Output screen

Add the items to the list:

Add the Items

You can delete these items. First check the cheakbox for deleting items. Then click on "Clear items".

Delete Items

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all