Techdays 2012 the Netherlands

Building Single Page Apps for desktop, mobile and tablet with ASP.NET MVC 4

Download this episode

Download Video


So you want to build a highly-responsive, native-like application that runs in a regular browser, and a mobile touch device browser, and in some cases can even be packaged and sold on a mobile app store? And you want to do it using only familiar web development technologies, including ASP.NET MVC 4 and JavaScript? In this session, Steve will demonstrate how modern Single Page Application (SPA) architecture combines the best bits of web-like and desktop-like user experience, applying libraries such as Knockout.js and Upshot.js to streamline the development process.
For more information, check out these courses on Microsoft Virtual Academy:











Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • erik_

      Great session!

      Would love to see the sample code, because it looks like upshot.js is kinda undocumented at the moment.

      Where do we find the html helper for mvc?

    • ronaldh

      For me this was the best session at techdays.

      I'd like to be able to download the sample code as well (couldn't find it at Steven's blog)

    • williamve

      Great session, this is a must-see. 

      I found some example code on:

    • Flynn0r

      Very awesome presentation.

    • Steve Sanderson

      Downloadable code coming soon!

      Please bear with us for a few days as we're working furiously to get an Upshot/SPA update out via NuGet. As soon as that is done, I'll be able to post a link to the DeliveryTracker sample and it will work on your machines too :)

      We're also setting up an Upshot/SPA website where we'll put more docs and samples.

      Thanks for the positive comments BTW :)

    • Brianweet

      Thanks Steve, awesome presentation at techdays!

      Waiting for the code sample Smiley

    • Johan Dorssers

      From the first till the last word I was focussed. No minute spoiled.
      Thank you very much Steve it was realy helpfull.
      Can't decide which presentation was better tho...this one or 'C#5, ASP.NET MVC 4, and asynchronous Web applications' :)
      BTW, when does this vid come up on channel 9 Steve...
      Looking forward for the code sample

    • JanAB

      Awesome presentation material :-D
      Btw, what's the name of the source control system Steve is using?

    • Knut Marius

      Awesome presentation!

      JanAB, He was using Mercurial:

    • Eugene

      Indeed an awesome presentation! I was wondering, what tool or feature did you use to copy your code snippets during your presentation?

    • Tugberk


      You and Scott Hanselman are two of the best speakers I have ever listened. Very nice session and every second of it was worth watching. Thanks!

    • BertVan​Kammen

      This was a great session.

      Flawless presentation and good speed discussing topics. Got me on the edge of my seat.


    • Eugene

      I just found out that you can drag code in the toolbar... :)

    • Egbert Nierop

      If you run Install-Package Upshot
      it delivers you knockout.js etc. but the sample that Steve runs, e.g. returns XML as a format, instead of Json. So, it looks like something seriously has changed in the current MVC runtime.

    • WdK

      Nice presentation! 

      When switching to Mobile, Steve hits a button in his browser that switches to iPhone. Is that a plugin in or something? 

      I also have to say, that although I really like the speed and simplicity of building a mobile App this way I'm a little bit of afraid of testing such an app when it gets bigger. There is almost no server code so things like Unit Testing will be hard. Can we use some javascript unit testing framework for this? 


    • Stuart

      This presentation has me excited about web dev again, this is some top notch tooling to get us writing some really cool stuff. All presenters for MS should be British from now on, except ScottGu and Hanselman ;-)

    • BrianJimdar

      Oh man Steve! This is so beautiful. 

      Silverlight was great, but is probably over for must of *my* future projects. Html/Javascript seemed like such a mess. I feel like you just showed us the way forward. At one point in the presentation I discovered. I was weeping for joy. Windows web programming is back on the map.

      @WdK: No problem, start here: 

    • Vin


      An incredible presentation, covering a variety of important topics, clear instructions, smooth flow and a great looking demo app at the end. After knockout, now I am digging upshot.js.

      Thanks a ton!
      Waiting for the sample code,
      Vin @vinayakkamat

    • benjoyce

      Does anyone know how Steve seeded his data in the demo?  It was hidden from view (at position 18m15s).

    • Irfan Shaikh

      Lots of Data access features shown are already in the Silverlight Rich Internet application (RIA), which I felt is very easier than SPA. If Microsoft put some efforts on releasing Silverlight plug-in for Android and iOS and some new Mobile Industry features like app store, local storage. Actually make development very easy.

      But I must say awesome presentation by Steve.


    • Deactivated User

      Comment removed at user's request.

    • Arthur

      Could anybody help me find which extension is for Chrome is used in this presentation to emulate other browsers at 47:57?
      This looks like a very useful feature.

      Thank you

    • mjepson

      When / where will the sample code used in this presentation be released?

    • ozhug

      thanks steve great presentation

    • mjepson

      After I add the TasksController, I get problems involving my connection to my SQL server. We have a development SQL server here, and I have updated the connectionstring in the web.config.

      Now how do I get it to create my database? In the demo it seems the database is magically created somehow, but when I run my solution and navigate to /tasks, I get an exception:

      A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 26 - Error Locating Server/Instance Specified)

      In my code I also get a debugger breaking on the javascript line:


      Any help is much appreciated!

    • delaci

      This is one of the best sessions I've watched. Was impressed by the other presentation of Steve's regarding knockout.js. Got excited when I saw ScottGu's presentation on Mvc 4. This is the icing on the cake. Very powerful stuff and very well presented.

    • box101

      @Steve: Any update about the used source code in the TechDays presentation?
      It was an awesome presentation with a nice demo app indeed and I just want to go through it again.

    • Jaikishan Jalan

      Super cool video. Feels like lot to learn with so many new libraries.

    • stevepresley

      @Arthur: I'm pretty sure it is "User-Agent Switcher for Chrome", it looks very similar to the one he demoed this week at the MVP Summit.

    • Steve Sanderson

      The source code for the DeliveryTracker app is now available - for details, see

    • Sagy

      @mjepson:If you haven't resolved it yet...

      It seems EF + CF are ignoring te connections string inside web.config and are using SQL Express by default, unless specified otherwise, so... specify otherwise:

      Inside the context class (where you would normally have all the DbSet<EntityName>) add a constructor with a line similar to this:

      this.Database.Connection.ConnectionString = "Data Source=localhost;Initial Catalog=name-of-your-db;Integrated Security=true";

      Hope it helps - it took me a couple of hours to solve it.


    • johnstaveley

      superb and inspirational! Well done, this is where I'd like to take my development in the next few years!

    • Dilish Velayudhan

      Awesome Steve..! Became a fan after reading your books, you showed how validation needs to be implemented by creating a validation framework (MVC 1.0) and got adapted by later MVC frameworks, then Knock out, now SPA
      Really feel proud to be a Microsoft Web Developer..

    • StefH

      Hi Steve,

      It seems that the DbDataController only supports EntityFrameWork entities, this means that my model entities should be real Entities.

      It's not possible to use ViewModels anymore. So my question is : what's the design concerning ViewModels when using this new Upshot.js to access the DbDataController ?

      I've also posted a question on StackOverflow, maybe you can take a look and shed some light on this issue.

      Thanks !



    • Adam Downs

      Hello Steve,

      Is there a release date planned for the offline data stores?

      Also is there any documentation available for Upshot?

    • Qorbani

      AWESOME! Thanks Steve for this great session. 

    • Patrick MA

      I've been waiting for something like this , absolutely awesome. Steve Sanderson is a legend! :)

    • Carlos

      AMAZING session, best one I've seen in years. Incredibly accurate, well prepared and explained. I had to replay your "generic touching device" joke a few times. ;)

      Besides, the technology presented is brilliant too!

    • mrrdr

      Great Video. Super fast explanation of so many different items in such a short time, seems like the video is only 5 minutes long. I take it as a reference now for every project I start using the same set of techniques. Definitely a reference for client side apps even if the back end is not Microsoft based. Steve, we all Microsoft developers have to appreciate your geniality.

    • Stephen

      Thanks for making the source code available.

    • Stephen

      Thanks for this. It works great. Unfortunately, the first modification I made was to add a date field to the model. This causes the entire project to come to a crashing halt because of what appears to be a conflict between the and upshot.js libraries. Any idea on when this will be fixed or when a workaround will be available? Thanks.

    • John Billingsly

      Hi Stephen,, how are Single Page Apps and WCF RIA Services and the support it is creating for non-Silverlight client with RIA/JS related?


    • John Billinglsly

      Sorry, meant Steve above...

    • Pitts

      excellent presentation.... 


    • Paulo Ortins

      Awesome Steve, i will start a project now !

    • HockeyJ

      Brilliant technology, excellently presented. Nice work.

    • Aleksandar

      Please if anyone know which Google chrome extension is use for mobile phone emulating in this awesome video.

    • Tahr

      Good to see Microsoft working in this direction.

    • DL123

      Can someone clarify Steve mentions that you can install SPA using phonegap to a mobile phone. However, I see that SPA can be built with either static html pages or views or both. It is true that we can only install the static html pages and not the views? will phonegap acceot views? Thanks

    • dl123

      Can someone clarify Steve mentions that you can install SPA using phonegap to a mobile phone. However, I see that SPA can be built with either static html pages or views or both. It is true that we can only install the static html pages and not the views? will phonegap acceot views? Thanks

    • mj0624

      I do not see why anyone thinks this is great. It is a return to notepad development! I would never want a piece of java script acting as a view model, there was not a single bit of intellisense confirming that the object model is correctly bound, and the UI is directly bound to the implementation of the database. This isn't a return to "great web development" but a return to the horrid web development prior to WCF, XAML, and true MVVM implementations with C# classes behind the UI.

    • Hakan

      Awesome presentation, one of the best I've ever seen.
      Where do we set WebApi url in upshot. We set datasource here:
      @(Html.UpshotContext(bufferChanges: true).DataSource<DataServiceController>(x => x.GetDeliveriesForToday()))

      But, no idea how to set source url for different environment?

    • AlexSkachkov


      PhoneGap use WebView/UIWebView of Android/iOS for render page. WebView in PhoneGap can work only with html pages which are packed to the app. 

    • statichtmla​ndstoredpro​cs

      I've been using static HTML with JQuery and stored procs for years. All you need to do is pass XML through a .ashx file to a database, get back a Dataset as a JSON object. It only takes about 100 lines of C# code, the rest is Javascript on the front and SQL on the back. You don't need EF, ORM, LINQ, or anything else in the middle if you know how to pass XML/JSON, and put business rules in stored procs...SQL developers love it, those with little or no SQL skills hate it and prefer to put all of their code in big middle tiers that won't work on mobile devices like PhoneGap. You don't need MVC once you know Javascript UI development, which you have to know in order to develop for mobile devices anyway. C#/Java/PHP UI code will soon be a thing of the past, I predict.

    • DangerMoose

      Warning: This video will get you very excited, you may think yes this is how will write my next online/offline mobile app.

      If you do then prepare to cry, as you will then boot up VS2012 and find that the SPA project template has been removed. Oh Microsoft you do like to torture us poor devs.

      Can anyone give me some pointers to another tutorial which shows a way to achive the same results without using the SPA template?


    • Belkin

      @DangerMoose: well SPA its not some thing what you can not use without template. 

      Go ahead install upshot.js from NUget, install knockout and start with your application.

      Also if you watch presentation he mentions that its SPA is part of MVC 4 did you installed it?

    • DangerMoose

      Thanks @Belkin, I will start learning upshot & knockout and hope the SPA template returns soon.

      Yes I have MVC 4 as that came with VS2012

    • Oran

      Hi Steve,

      Thanks for the presentation. Really exciting stuff

      I'm currently designing a new application using EF but I have an extra abstraction layer above the EF code (to cater for more complex database scenarios other than simple CRUD) which means that the layer exposed to my web api isn't a DataController but just a normal class library.

      Is there any way to get upshot work in this case or do I have to get rid of this extra layer of abstraction?


    • Preilly

      Hi would love to build this app but do not have sql express, will it work with sql server 2008??
      Thanks for help!!

    • JulioNobre

      Hi Steve!

      Just to let you know that I think this indeed a dense and, most of all, awesome presentation.

      You really did a great job. Well done. Smiley




    • Ravindar Reddy

      awesome presentation.

    • Srini

      In VS 2012 SPA is under Visual F# | ASPNET with the name "F# and C# Web Application (ASP.NET MVC 4)". Or click online tab and search for SPA/Single page.

    • val

      Great presentation! It was clear and to the point. However, I've had no success (after over a week of failed attempts) with getting this up and running. The VS2010/Nugget setup is BUGGY AS HELL! There is no greater let down than getting amazed by sweet ASP.NET/MVC4/HTML5/Offline goodness only to realize later on that IT'S NOT READY YET!

    • Gaja Kannan

      Such a shame!!!  Channel9 videos don't run on Windows RT/Surface RT.  I am getting an message that it requires Silverlight installed because browser doesn't support h264 mp4 html5 natively.  Come on guys really!!!

    • gduncan411

      @Gaja Kannan:Check your Format, you might be forcing Silverlight (aka smooth andor progressive), click on the "Format" button under the video to see.

      Set it to auto or HTML5 and try again. The videos work fine in Surface RT (and IE on Xbox, etc)

    • Tarabass

      @SteveThank you for pointing me this way. Love the approach to create webapplications this way. I'm always looking forward to see your sessions!


      You are my hero too! Creating the constructor with the connection string solved my problems!

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.