10-4 Episode 8: Pure Client-Side Development with ASP.NET AJAX 4.0

Posted By: Jonathan Carter | Feb 11th @ 12:40 PM | 64,394 Views | 16 Comments

In this episode of 10-4, we introduce some of the new features and functionality of ASP.NET AJAX 4.0. We’ll see how ASP.NET AJAX can be leveraged in a complete client-side environment, making it easier to develop rich web applications. This episode demonstrates the new client templates, data binding and command bubbling behavior that makes creating data-centric applications using JavaScript simpler. We’ll also see the new ADO.NET Data Services integration which makes performing CRUD operations, complete with change-tracking, very trivial.

For more 10-4 episodes, be sure to visit:
http://channel9.msdn.com/shows/10-4

Visual Studio Topic Area on Channel 9:
http://channel9.msdn.com/VisualStudio

Visual Studio 2010 CTP VPC:
http://tinyurl.com/GetCTP

ASP.NET AJAX 4.0:
http://www.codeplex.com/aspnet/Wiki/View.aspx?title=AJAX&referringTitle=Home

10-4! Over and out!
Rating:
3
0
#Feb 11th @ 1:59 PM
LostInTangent
LostInTangent
To clarify one thing about the demo I showed off in the video...the DataView control, bindings, command bubbling, and ADO.NET Data Services integration are currently available on Codeplex, but the change tracking functionality and the ability to save changes back to the service aren't. That behavior will be included in the next Codeplex preview, along with much more.
#Feb 11th @ 2:19 PM
buckley9
buckley9
I realy enjoyed this video. Thanks for teaching us this stuff Jonathan.

The new stuff that's comming looks great (2 way data binding and unit of work!) and was presented very well. The form of the presentation was also good so nothing but kudos Smiley

#Feb 11th @ 6:01 PM
joechung
joechung
My biggest problem with ASP.NET Ajax client templates:  it fails to render anything when script is disabled.  I don't expect the templating to work at all when that happens, obviously, but it should have an acceptable fallback strategy, and it doesn't.  Google "unobtrusive JavaScript."  Hint: use NOSCRIPT to render the data.
#Feb 11th @ 7:50 PM
ChrisStepaniuk
ChrisStepaniuk

Awesome technology, quite different to what were normally seeing with Server Controls and having ASP.NET generate the correct runtime scripts to wireup the controls for us.  As an honest comment, it seems the more fluid site like Facebook get, the more ASP.NET AJAX is trying to catch up so developers choose that technology.  It's a good thing.  I can remember a time when ASP.NET was considered what you used to build business apps, but if you wanted to build "fun" sites, you would create that in PHP because it was percieved as "less-heavy".

Also, it seems that there is plenty of "magic" going on too, if someone wanted to override a part of the pipeline, say if they use controls from vendors like Telerik?

#Feb 12th @ 8:28 AM
stevo_
stevo_
Human after all

Whilst interesting I'm not sure who this is targeting.. is this for purists who want control over html? because they won't use this due to how obtrusive it is.. I think this targets the webforms developers, those that don't really care about whats under the hood, or even how the web works as such, only that they can create an app online.. but then I'm wondering if this is better to them than webforms?

#Feb 12th @ 3:34 PM
LostInTangent
LostInTangent

That's a good question. Firstly, it's important to point out that almost that entire demo could have been done imperatively, without adding anything to the HTML unneccesarily. The declarative command bubbling (sys:command) is a feature I can choose to use, but I can achieve the exact same thing strictly in JavaScript. The same goes for the conditional attributes I used (class:odd).

While ASP.NET AJAX provides a lot of functionality in terms of working with it declaratively (as some folks like), it was developed with the mindset of using it completely unobtrusively. That said, the data templates are somewhat of a gray area. Defining the template is arguably much easier (for some) to do in HTML as opposed to within JavaScript (as other libraries do). That said, it does impose a foreign component to the HTML that isn't actually valid content (i.e. the binding expressions).

If you don't like the approach of defining your templates and bindings within the markup, you can still do that in JavaScript as well. The creation of the DataView class simply requires an element that it can bind to and repeat, so there is no reason why that element couldn't be constructed using DOM methods imperatively, as opposed to retreiving it from the actual DOM as I did in the demo.

I'll put together a demo that does this and post it later.

#Feb 12th @ 5:25 PM
aL_
aL_
Rx ftw
thats pretty cool Smiley
i especially like the binding syntax Smiley
#Feb 15th @ 9:12 AM
Reader Man1
Reader Man1
Reader Man
We are very interested in seeing an episode about having the VS IDE made from WPF.
so please can we know when u are thinking to make one.
#Feb 25th @ 7:49 AM
Felixters
Felixters
Another great video.  However, I'm a skeptic with this video.  If I understand it right, the data is being rendered through javascript after the page loads using a web service.  I'm not sure I see the advantage of using this approach as opposed to a server side approach considering that google won't be able to index any data that is retrieved using the client side method.  Am I missing something?

Also, the example shown in the video is one where the presentation layer and the data layer are tighly coupled.  I'm not very familiar with the EF or web services, but is it possible to have the interface bind to a custom business layer instead of the data layer?

Keep up the great work with the videos.
Microsoft Communities