Introduction

In this walkthrough, you will create your first web service using ASP.NET SPA. The service itself will be very simple, but it will give you a quick introduction of ASP.NET SPA. It will allow you to create tasks using Entity Framework Code First to stor them. After that, you can follow some of the more detailed tutorials and samples.

ASP.NET SPA builds on ASP.NET Web API which provides a framework for building HTTP services on top of the .NET Framework. For a tutorial showing how to get started using Web API on its own, see Your First ASP.NET Web API (C#)

Create a new ASP.NET SPA Solution using the Single Page Application template

Create a new ASP.Net SPA project in Visual Studio by selecting File -> New -> Project.

The New Project dialog box appears.

Select the ASP.NET MCV Web Application template from Web group of the Installed Templates and name the new project MvcSpaApp1.

The New ASP.NET MVC 4 Project dialog box appears.

Select the Single Page Application template and click OK to create the solution. Notice:

• There is a TodoItem model class provided by the template.
• The scripts folder in the Solution Explorer contain jquery, knockout, upshot, nav and history Javascript libraries.

Build the solution: Select Build -> Build the Solution (F6).

Add a Controller

Right-click on the Controller folder in the Solution Explorer, choose Add -> Controller, and the Add Controller dialog box appears. Set the following options:

• Controller name: TasksController
• Template: Single Page Application with read/write actions and views, using Entity Framework
• Model class: TodoItem (MvcSpaApp1.Models)
• Data Context class: Choose <New data context...> and New Data context dialog box appears.

Click OK and the Add controller dialog box look like this.

Choose OK.

The code generated for the TodoItems CRUD operations is in the MvcSpaApp1Controller.TodoItems.cs file.

 using System.Linq;
using System.Web.Http;
using System.Web.Http.Data.EntityFramework;

namespace MvcSpaApp1.Controllers
{
    public partial class MvcSpaApp1Controller : DbDataController
    {
        public IQueryable GetTodoItems() {
            return DbContext.TodoItems.OrderBy(t => t.TodoItemId);
        }

        public void InsertTodoItem(MvcSpaApp1.Models.TodoItem entity) {
            InsertEntity(entity);
        }

        public void UpdateTodoItem(MvcSpaApp1.Models.TodoItem entity) {
            UpdateEntity(entity);
        }

        public void DeleteTodoItem(MvcSpaApp1.Models.TodoItem entity) {
            DeleteEntity(entity);
        }
    }
}

Demo the application

Hit Ctrl+F5 to start the application. This brings up the Welcome to ASP.NET Single Page Application page browser.

Create Tasks

Navigate to the Tasks page by appending "Tasks" to the url of the welcome page. The follwing page should appear.

Use the Create TodoItem button to add items Todo. Note when you add more than 5 items, the paging option appears. This allows you to set the maximum number of items shown per page to some multiple of 5.

To edit an item to set its IsDone value to true, click on the item, check the IsDone box and click Save.

Review

This Walkthrough creates a simple Single Page Application that creates a list of tasks and tracks when they are done. It illustrates how to use the SPA template and how to add a Controller.

This article was originally created on November 14, 2012

Author Information