ASP.NET 4 and AJAX
-
Upload
kulveersingh -
Category
Documents
-
view
2.490 -
download
5
Transcript of ASP.NET 4 and AJAX
![Page 1: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/1.jpg)
Visual Studio 2010and
.NET Framework 4
Training Workshop
Visual Studio 2010and
.NET Framework 4
Training Workshop
![Page 2: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/2.jpg)
What’s New InASP.NET AJAX 4What’s New InASP.NET AJAX 4
NameTitleOrganizationEmail
![Page 3: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/3.jpg)
AgendaAgenda
• Client-Side Templates• Client Controls• Declarative Instantiation• Command Bubbling• Live Bindings
![Page 4: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/4.jpg)
“ASP.NET AJAX is alright, but it is way too server-centric for serious client-side development…”
- Uninformed Guy
![Page 5: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/5.jpg)
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…
![Page 6: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/6.jpg)
RequirementsRequirements
In order to seriously use ASP.NET AJAX, some need…
1.Client-side controls2.Data binding3.UI templating4.Easy service communication5.Modular functionality
![Page 7: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/7.jpg)
Why do some find JavaScript painful?Why do some find JavaScript painful?
![Page 8: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/8.jpg)
Who in their right mind wants to do manual XMLHttpRequest work, HTML generation, or data wireup?
![Page 9: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/9.jpg)
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
![Page 10: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/10.jpg)
The server should only be concerned with data, not presentation
![Page 11: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/11.jpg)
Client TemplatesClient Templates
Server-Side (WebForms):
<ItemTemplate> <li><%# Eval("Name") %></li>
</ItemTemplate>
Client-Side:
<ul class="sys-template"> <li>{{ Name }}</li>
</ul>
![Page 12: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/12.jpg)
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.
![Page 13: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/13.jpg)
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
![Page 14: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/14.jpg)
Client TemplatesDataViewDataContext
Client TemplatesDataViewDataContext
![Page 15: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/15.jpg)
Maybe you’d prefer to write as little JavaScript as possible…
![Page 16: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/16.jpg)
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"…>
![Page 17: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/17.jpg)
Did I mention that it is XHTML compliant?
![Page 18: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/18.jpg)
Declarative InstantiationDeclarative Instantiation
![Page 19: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/19.jpg)
Command BubblingCommand Bubbling
Server-Side (WebForms):
<asp:Button runat=“server” CommandName=“Select" … />
Client-Side:
<button sys:command="select" … />
![Page 20: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/20.jpg)
Live BindingsLive Bindings
Object #1
Property #1Property #2Property #3
Object #2
Property #1Property #2Property #3
Source Target
• One-Time• One-Way• Two-Way
![Page 21: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/21.jpg)
Command BubblingLive BindingsChange Tracking
Command BubblingLive BindingsChange Tracking
![Page 22: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/22.jpg)
SummarySummary
• Client-Side Templates• Client Controls• Declarative Instantiation• Command Bubbling• Live Bindings
![Page 23: ASP.NET 4 and AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/554ebc62b4c9053c4b8b46c1/html5/thumbnails/23.jpg)