New Project Template

The ASP.NET MVC 4 beta adds a new project template in Visual Studio 2010 called “The “Single Page Application" (SPA). When creating a new project and starting it up, you’ll get some guidance about completing a first demo application for adding ToDoItems using a new TasksController. I will not do this but instead I will follow the same sequence as Steve did in his presentation and create a new SPA application called “DeliveryTracker”

Server side Domain Model

Since this demo application is a tool to track deliveries we will be using the following datamodel. The Customer class shows how to define a one-to-many relationship.

Web API Data Service

The data for the application is loaded from a DbDataController which was introduced with the new Web API feature. In the solution explorer, right-click the controller folder and add a new controller called “DataServiceController” based on the “Empty Controller” template. The purpose here is to show what is happening behind the scenes and not rely on scaffolding too much. Replace the parent Controller class by DbDataController using the AppDbContext as generic parameter.

The GetDeliveriesForToday will be used by the page to load the data. The IQueryable type allows sorting, paging, filtering and passing in custom parameters. The other methods are necessary for inserting, updating and deleting entities. If you build and run now, you could run OData queries against the service on http://localhost/api/DataService/GetDeliveriesForToday

Client Side ViewModel - upshot.js & knockout.js

In order to use this data, the page will use the upshot.js javascript library that knows how to talk to a DbDataController. It will want to map your server side C# model in to a client-side javascript model. Steven has hidden this step behind his mysterious and undocumented Html.UpshotContext class.

Add a new “App” subfolder inside the “Scripts” folder and create a new script there called “DeliveryViewModel.js”. In the constructor of the DeliveriesViewModel, we are using upshot to make a connection to the GetDeliveriesForToday method in the DbDataController class. The results from the query are stored in the self.deliveries property.

Notice that the properties of the Customer and Delivery classes are knockout observables. Knockout keeps the data on your views and viewmodel synchronized. Upshot synchronizes with the data service. The bufferChanges option is set to false, meaning that any data that is changed on the web page will also be submitted to the server and saved directly in the database.

Index View

In order to trigger the upshot call to the service when the index.cshtml page is loaded, add this code below the title section. All the rest of the code is not needed and can be removed. The Html.MetaData function provides the structure of the types to upshot. Knockout applies the bindings to the DeliveriesViewModel

Routing

If you run this code, you will noticed that loading data from the database and displaying it on page works fine but submitting changes to the services fails. Investigating with Fiddler shows that the service responds to the submit request with the error “The service does not support the POST verb”

What Steven Sanderson also failed to mention is that you need to correct the 'MapHttpRoute' route in the routing table in global.asax.cs like this:

So with the code above you can list the deliveries in the database and update the "IsDelivered" properties in real-time from a single page. All communication consists of AJAX calls handled by the upshot framework.

19 comments:

Anonymous
said...

Started working following steve presentation but Html.Upshot was missing. Following your great post it's all working now without a problem. One little question.I can't seem to show data if i'm passing ViewModel from dataservice not my full entity. Can you help?

I'm afraid you'll need to elaborate on that questions because I'm not sure I understand what you mean. To what class do your refer when you mention 'ViewModel'? The only ViewModel here is the client-side DeliveriesViewModel which cannot be passed from the server-side DataService.

What I can tell is that the purpose of DbDataController is to expose full entities the way they are defined in the Entity Framework model. If you want to expose different objects, you might want to take a look at one of its parent classes like DataController or ApiController. But I can't tell yet if this would still work with upshot or if you'd be better off looking at the native WebAPI samples.

I was interested to expose different objects (DTO-s) not full entities and use upshot, but as you say we'll wait until proper documentation is out for upshot. Thanks for suggestion i'll look into DataController & ApiController. As for WebApi i have already used it with no problem to expose my DTO-s, it's really nice how it all works together. And WebApiTestClient is much better to use than fiddler.

This was done automatically for me when creating a new project from the "Single Page Application" template in ASP.NET MVC4 beta. You can download my working VS2010 project so compare and see if you are missing something.

Hi,I tried for a few hours today to figure where the Html.Upshot was coming from and I couldn't... Great article.

What I'd like to know is, do I need to duplicate my model to the client in order to use Upshot, the way you did in the article?If so, it doesn't seem reasonable. I have a model that contains around 30 objects with all their connections. That's a lot to duplicate.

I also discovered that there is a new release of Upshot - version 1.0.0.2 and when I installed it through NuGet (Install-Package SinglePageApplication.CSharp), it adds a reference to System.Web.Http.Data.Helpers2 and than UpshotContext is avaliable.

That would definitely make your site vulnerable to SQL Injection attacks.

A quick web search gave me this interesting article that shows how you can solve your problem by using the Web API to expose your data according to the ODATA conventions to manipulate and filter your data.

By coincidence I've received a new laptop and was re-installing it with Visual Studio 2010 SP1, the MVC 4.0 RC and the latest SQL Server 2012. So I tried to get DeliveryTracker.4.0 working in this fresh environment.

I chose the ASP.NET Development Server to host the project. I noticed that the name of my connectionstring in the web.config was incorrect. After renaming it from "DefaultConnection" into "AppDbContext" and pointing it to my new SQL 2012 instance, the application worked again.

If it's a different issue, please let me know. I'll update the DeliveryTracker.4.0 package on my SkyDrive as soon as I'm back on my regular DEV station