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!

posted by John with 46 comments

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

46 comments Hide comments

Ed on said:

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?

Al on said:

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 on said:

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 on said:

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 on said:

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 on said:

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 on said:

Anand,

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

John on said:

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.

letalumil on said:

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 on said:

    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 on said:

      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 on said:

        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.

        John on said:

        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.

Galen on said:

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

Calvin Craig on said:

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 on said:

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 on said:

    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 on said:

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 on said:

    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 on said:

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 on said:

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 on said:

    Mr Papa have you time to a little answer?

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

      John on said:

      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 on said:

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 on said:

    Adam,

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

Alexandr on said:

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

Chris on said:

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 on said:

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 on said:

    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 on said:

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 on said:

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 on said:

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 on said:

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

Thanks
Oran

Oran on said:

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 on said:

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

Leave a Reply


(required)


(required)



*