Learn about Knockout, HTML5, SPA and ASP.NET Web API for Free! | John Papa

John Papa

Evangelist on the loose

Learn about Knockout, HTML5, SPA and ASP.NET Web API for Free!

...

Special thanks to both Scott Guthrie and Pluralsight for pulling together a special promotion that allows you to get a free 1-month subscription to watch both my Knockout / MVVM course and my Single Page Apps with HTML5, ASP.NET Web API, Knockout, and jQuery at no cost!  That’s over 10 hours of material for free!

For full details please see Scott Guthrie’s post about the promotion for details about how to sign up and get access to the course. Here is a quick quote I grabbed from Scott’s post:

To get access to the course you simply follow @pluralsight and @john_papa on Twitter and then visit this page and enter your Twitter name using the form on it.  Pluralsight will then send you a private twitter message containing the access code that you can use to subscribe to the courses (and download the course exercise files).  Once you are subscribed to the course you have one month to watch the course (and you can watch it as many times as you want during the month). Pluralsight is running the promotion through Sept 18th – so sign-up now to get access. 

If you are new to Knockout, then I recommend watching my Knockout course first, then watching my SPA course, as it builds on that Knockout knowledge.

Here is a link to my Knockout course:

image

Here is a link to my Single Page Apps course:

tags: html5 jquery knockout pluralsight SPA web api
  • Ed

    John,
    I am getting weird info out of my tryout of replicating CodeCamper. When I run Fiddler, my results do not show data, but more a format:
    JSON
    $id=1
    {}
    $id=2
    Any idea what I foolishly overlooked to cause this or would you prefer I send you my code?

  • Pingback: Free Offer: Learn about Knockout, HTML5, SPA and ASP.NET Web API | the pluralsight blog

  • Pingback: Great Free Pluralsight courses on Building HTML5 apps with KnockoutJS, jQuery and AsP.NET Web API | Roller Codester

  • subu

    Where can i get the list of javascript files needed for this app?

  • John

    Subu,

    The course has all the JavaScript files. But if you want a quick list, check this post out: http://johnpapa.net/spapost2

  • Al

    John,

    I just finished my first pass through your course and it was excellent. Thanks again for all of the work. Just curious, what do you think is the best way to handle infrequently used pages (like application setup and definition) when constructing a SPA? Would you make them part of the SPA and then just download them when needed? Do they even belong in the SPA?

    Thanks,

    Al

  • DC

    ooh.. I missed this offer! Is there any way I can get in now? Thanks in advance!

    Kudos on the great work you are doing!

  • mikekidder

    John, I followed your site for some years back in the early Silverlight days. I have to say that this SPA series is absolutely top notch. Without a doubt, a ton of work went into this application planning. Microsoft would do itself a huge service to payout Pluralsight to run it right off the ASP.Net website. Many thanks for putting all this together.

  • Anand Patel

    Hi John, Really one more great blog on Knockout with SPA. Can we have its source code link for reference purpose. We are using AngularJS inplace of KnockoutJS and we really like the way you have make this SPA. So please share the link of this SPA Site source code for my reference if possible.

  • Jose Luis

    Hello john i have read and test your course, and i was surpprise because the Add, Update, delete of a person for example is not on the code.
    I saw this screens in the course but later the CRUD is not in the downloadable code, why?

    I think have the sample of a CRUD operation of a Person which includes also a Picture Should be a must in a course of this kind.

    Thanks

  • John

    Anand,

    Thanks for the feedback. Your project sounds interesting. The source code is available with a subscription to Pluralsight, from their site.

  • John

    Jose,

    The update for a person exists in the speakers view and speakers viewmodel code. They call through the datacontext which hits the Web API to make the Update.

    Thanks for the feedback on the photo. Maybe I’ll do a blog post or a course update on that.

  • http://letalumil.ru letalumil

    John, thanks for your SPA tutorial! But I want to draw your attention that last version of Sammy.js (0.7.1) that avalible on website is not working with your code.

    In the last version “sammy.getLocation()” returns “/” if you are on the root of website, but version that you have used (0.6.3) returns empty string.

    So, this code: ‘startupUrl = sammy.getLocation() || url || defaultRoute;’ in router.js on 102 line will return “/” if your are on the root.

    And as result this construction will crash application:
    this.get(”, function () {
    this.app.runRoute(‘get’, startupUrl);
    });

    Because startupUrl == ‘\’. Infinite loop :)

    P.S. Sorry for my bad English. I’m just Russian student :)

    • John

      letalumil,

      Thanks for the feedback. i will test the latest version of Sammy and see what I can do. I am working hard on a Windows 8 course now, but I’ll get to this soon.

      • Jose Luis

        Noooo please, don’t give up with windows 8 please complete this with simplemenbership, Claims, signalR, etc there is a long way here….

        Thanks

        • Ben Ellis

          I ran across a similar infinite loop issue with the latest version of Sammy. I reverted back to the version you use in your example, and it worked.

      • Krister

        Tried the same as well, got an infite loop using lates version of sammy. (Sammy-0.7.1).

        • John

          I have converted the CodeCamper app to work with Sammy 0.7.1 and provided it to the Pluralsight team. You can now download the update from their web site with a Pluralsight Plus subscription.

          • http://www.martinlaritz.com Martin

            What’s the fix to stop the infinite loop? I am running into this like everyone else.

          • John

            Martin – The latest Code Camper SPA code up on Pluralsight’s site has an updated router.js that works with Sammy 0.7.1.

  • http://galen.net.au Galen

    Hi John,

    When you have regular link on a view that might go to an external download say a PDF. Once the user clicks on this the app no routes correctly.

    The address bar still changes but the route isn’t processed.

    The only external links in your Code Camper app actually navigate out of code camper so you don’t experience this problem.

    If you add target = _blank on the link things work but I was hoping a better option exists.

    Galen

  • http://www.conmet.com Calvin Craig

    I downloaded the exercise files for this course. But initially I couldn’t get them to compile and run…probably because of a nuget bug. When I unzipped to

    C:\VS\!C-o-m-m-u-n-i-t-y\JohnPapa—SinglePageApp\

    …there were multiple errors.

    But after moving the project up to C:\VS\ the errors went away.

    fyi…

    Great course! thanks

  • Andy Espinosa

    Hey John,

    As a plus member of Pluralsight I was delighted to view your SPA session. I highly recommend Pluralsight. Awesome!

    Anyway I do have an important question:

    I’m using your SPA design to develop a product for market. Bottom line is that I’ll have to authenticate a user using Forms Authentication however I can’t seem to find a way of using SPA and WebApi to authenticate and create a cookie to hold the token. Any suggestions?

    Thanks,
    Andy

    • Brooks

      Have you had any luck figuring out how to make this SPA, forms authentication, and cookies/tokens work? I’ve been struggling with the same thing for days now (without any progress). More specifically, I have a SPA (based on the SPA in Mr. Papa’s Pluralsight course) that is using ASP.NET MVC 4, but needs forms authentication with the authentication cookie/token saved locally so that the next time the SPA is access, the user doesn’t have to login again. Even more specifically, this needs to work on mobile devices (iPads, iPhones, and Android devices). I can’t seem to get it all working together.

      Maybe Mr. Papa can help???

  • Jose Luis

    Hello

    When you change the text inside a form the cancel and save button are not available until you change to other field or click away. This is due to knockout model view advised of a change. Is there anyway to be aware of this kind of changes without to “perform to operations”

    A Url explaining how to, it’s enough.

    Tx

    • John

      Jose,

      If you want the bindings to apply right as you type, you can use the valueUpdate option like this:

      <input data-bind="value: someValue, valueUpdate: 'afterkeydown' " />
  • Jose Luis

    Hi John in the course clip: “Creating Convention Based Controllers” when you are explaining the ApiControllerBased and IoC you miss to talk 20 ” about the default Controller constructor.
    Yours code run because you already have Ninject but to follow explanation it’s necessary to create a SpeakersController() that calls the parameter constructor or have Ninject running of course

    Why Ninject and not Microsoft.Unity? problems with WebApi IoC?

    Tx to create a “complete” course for beginners.

    • Jose Luis

      Upps explainned next clip.

      Sorry Spanish and passion goes first

      • John

        No problem, glad you found what you needed :)

  • Jose Luis

    Hi

    3 questions:

    a) how i can move my claims Identity 4.5 authenticated user to yoour .js currentUserId var in config.js? I’mean every time the user clicks on a web page the round to server takes the cookie and checks the auth of the user, but here once is loaded.. how can be validated to not be modified? cookie generated by .net, can not be read by js?

    b) I´m using mvc 4 to hold as a view your index.cshtml, so i can construct a bigger web application with some Spas views. an URL for this architecture, already someone did?

    c) uphot.js died? your context class is king?

    Tx

    • Jose Luis

      Mr Papa have you time to a little answer?

      for the last question (is not the important one ;-) perhaps breeze.js?

      • John

        Hi Jose,

        1) You could use ASP.NET Auth or any similar technique, as long as you make the first load of the page itself handle auth. Grabbing the user in JS is really up to how you want to handle it.

        2) There are some MVC SPA apps out there, including the common MVC ToDo apps.

        3) Nothing has changed from the course on this. You can write your own data context, use a library like breezejs, or do a scaled down version of a data context without as much caching and object mgt. Upshot is no longer in active development, according to the ASP.NET team’s post that came out last week.

  • adam berendt

    John I messaged you earlier about having the application lock up when the code camper sample application loaded. I ended up deleting the package file from data and web projects and then I reloaded everything from nuget that you had listed in your readme file and it all works now. Might help someone else in the future! I like the new look of the site! Also hate I missed the pluralsight offer. I just paid the fifty bucks to join but it was worth it.

    • John

      Adam,

      Thanks. Sounds like the NuGet packages or NuGet itself were causing the problems for you. Glad it worked out.

  • Alexandr

    Hey, what authentication method is best for SPA Web Api app? Basic HTTP authentication, jsonlogin page? Tell us if you’re not hard.

  • http://angus65.com Chris

    Hey John, Thanks for the great video. I’m looking to create my first MVC / SPA app. Any chance of an update showing how someone would swap out Twitter bootstrap?

  • Pat

    Hi Mr. Papa. Thank you for the SPA course. It’s very good and has helped me develop my own SPA.

    However, like many others (I’ve seen a number of posts on johnpapa.net), I need help with adding authentication to a SPA like Code Camper. You mentioned to Jose on October 11th: “1) You could use ASP.NET Auth or any similar technique, as long as you make the first load of the page itself handle auth. Grabbing the user in JS is really up to how you want to handle it.” Could you expound on that info?

    For my scenario, the SPA won’t be on the Internet (so no OpenID or oAuth); it’ll be an intranet-type of application. Although, it’ll be used primarily from mobile devices (iPads and iPhones) so I’ll still need some sort of user name/password mechanism (no Windows Authentication).

    * Would you add another view (first in the list) to index.cshtml?

    @RenderPage(“Views/login.cshtml”)
    @RenderPage(“Views/favorites.cshtml”)

    * Would you change bootstrapper.js to first authenticate the user (somehow???) before calling dataprimer.fetch?
    * Would you need to pass the authenticated user’s credentials with every request to the Web API (maybe in the header?)?
    * How would you save an authenticated user’s credentials so that the next time they open the app they don’t have to login again? Local storage?
    * Would you need to add a custom authentication filter on the Web API action methods?

    Sorry for all the questions, but this stuff is pretty complex – and not easy to implement into a SPA like Code Camper – at least for a rookie like me :-).

    Thanks!

    • John

      Hi Pat,

      I wouldnt use client script to authenticate, instead I would use forms auth via asp.net auth on the server. Ideally each cshtml page would check and make sure, using asp.net auth, that the user is known (authenticated) and authorized. This is the standard asp.net auth that you can research.

      I would not store any credentials locally. If they come back into the app, I would force the auth back to the server once again. So try not to thin kof it as a JS app but asp.net handlign that for you.

  • Jay

    Hi John. I saw this promo too late. Is there any way for to get the source code for me to try it out?

  • DEBAL

    Hi
    John, thanks for sharing SPA course. John I was a very active follower to your silverlight TV . But now a days I feel very poor because of no new videos are updating on Silverlight in this site . Currently , we are thinking to develop one online site with 3D designing . We need to build this site for long lasting . We are very interested in Silverlight 5. Now we became very worry that Microsoft stop to support Silverlight more . And there is some blogs also mentioned that there will be no Silverlight 6 official release from Microsoft. This put us in a great depression …..

    After all why Microsoft doing such type of behave with their followers,customers….I don’t know . In previous they also introduce VB.Net and now they kill vb.net …ok, I can say vb.net application can converted in C# easily . But Can we convert Silverlight application in other technology if Microsoft stop supporting or continue updating their technology . And if they don’t do then why Silverlight Introduced by Microsoft????Companies are invested lots of money in Silverlight….

  • Oran

    Hi John,

    I’m a paying Pluralsight customer and love your SPA course.

    I’m in the process of developing my first SPA and ran into a slight problem

    When I try to run the application in a browser (http://localhost:1234) I get HTTP Error 403.14 – Forbidden (because directory browsing is disabled – which is correct). I tried, unsuccessfully, to find what makes code camper load index.cshtml as the default page in IIS express (which will then load main.js -> bootstrapper.js etc) but couldn’t find it

    Your help would be much appreciated

    Thanks
    Oran

  • Oran

    I found the solution to the problem I posted before. It was because the below was set to false

    Thanks
    Oran

  • Oran

    For some reason my previous reply didn’t get fully posted. The answer is that the setting webpages:Enabled in web.config was set to false.

    Setting it to true resolved the issue

  • Brick

    I am trying to use Unity in my WebAPI and getting following error “Controller does not have a default constructor”.
    Here is my code in Bootstrapper.
    public static class Bootstrapper
    {
    public static void Initialise()
    {
    var container = BuildUnityContainer();

    GlobalConfiguration.Configuration.DependencyResolver = new Unity.WebApi.UnityDependencyResolver(container);
    }

    private static IUnityContainer BuildUnityContainer()
    {
    var container = new UnityContainer();

    container.RegisterType();
    return container;
    }
    }

    I initially had insalled Unity.MVC3 and now I installed Unity.WebAPI.
    Please help.

    Thanks
    Brick

%d bloggers like this: