Date post: | 10-May-2015 |
Category: |
Documents |
Upload: | kulveersingh |
View: | 2,487 times |
Download: | 5 times |
Visual Studio 2010and
.NET Framework 4
Training Workshop
Visual Studio 2010and
.NET Framework 4
Training Workshop
What’s New InASP.NET AJAX 4What’s New InASP.NET AJAX 4
NameTitleOrganizationEmail
AgendaAgenda
• Client-Side Templates• Client Controls• Declarative Instantiation• Command Bubbling• Live Bindings
“ASP.NET AJAX is alright, but it is way too server-centric for serious client-side development…”
- Uninformed Guy
Common MythsCommon Myths
ASP.NET AJAX is tied to ASP.NET, namely WebForms…
You must use a ScriptManager and UpdatePanels to get anything done…
It requires Visual Studio to work…
RequirementsRequirements
In order to seriously use ASP.NET AJAX, some need…
1.Client-side controls2.Data binding3.UI templating4.Easy service communication5.Modular functionality
Why do some find JavaScript painful?Why do some find JavaScript painful?
Who in their right mind wants to do manual XMLHttpRequest work, HTML generation, or data wireup?
Server vs. Client AJAXServer vs. Client AJAX
Initial request: HTML
Initial request: HTML
HTMLHTMLForm POSTForm POST
HTML + JSONHTML + JSON
JSONJSONJSONJSON
Renderin
g
Renderin
g
Server AJAX
Client AJAX
The server should only be concerned with data, not presentation
Client TemplatesClient Templates
Server-Side (WebForms):
<ItemTemplate> <li><%# Eval("Name") %></li>
</ItemTemplate>
Client-Side:
<ul class="sys-template"> <li>{{ Name }}</li>
</ul>
Client ControlsClient Controls
DataView DataContext
• Dynamic UI• Master/Detail• DataContext
integration• Select command
bubbling• Etc.
• Server communication• WCF• ASMX
• ADO.NET Data Services• Etc.
• Change tracking• Etc.
DataContextDataContext
ASMX
WCF
ADO.NETData Services
ASP.NET MVCJsonResult
Etc.
1. Request
2. JSON DataData
Context
3. Modify Data 4. Save Data
* DataContext includes change tracking automatically
Client TemplatesDataViewDataContext
Client TemplatesDataViewDataContext
Maybe you’d prefer to write as little JavaScript as possible…
Declarative InstantiationDeclarative Instantiation
1. Map:
xmlns:dataview="javascript:Sys.UI.DataView“
2. Attach:
<div sys:attach="dataview"></div>
3. Use:
<div … dataview:serviceuri="myService.svc"…>
Did I mention that it is XHTML compliant?
Declarative InstantiationDeclarative Instantiation
Command BubblingCommand Bubbling
Server-Side (WebForms):
<asp:Button runat=“server” CommandName=“Select" … />
Client-Side:
<button sys:command="select" … />
Live BindingsLive Bindings
Object #1
Property #1Property #2Property #3
Object #2
Property #1Property #2Property #3
Source Target
• One-Time• One-Way• Two-Way
Command BubblingLive BindingsChange Tracking
Command BubblingLive BindingsChange Tracking
SummarySummary
• Client-Side Templates• Client Controls• Declarative Instantiation• Command Bubbling• Live Bindings