4. JavaScript Essentials
Ways to embed JavaScript code in a web page:
1. Directly in an event attribute for an HTML element.
2. Add a <script> tag that contains the JavaScript code.
1. The code an be run automatically when the page loads
2. Inserted in a JavaScript function that will be called in response
to a client-side event.
External Javascript file (.js) can be linked to a
webpage using <script> tag with src attribute taking
the js file url
HTML Document Object Model (DOM)
Client Side Events
5. OnClientClick Property
Button, ImageButton , LinkButton
To add client-side code to the button click
If the JS code returns true postback is called
Else postback is canceled
7. Rendering Script Blocks
Page.ClientScript Methods
RegisterClientScriptInclude(): This method adds a
script tag that references an external js file at the top of
the rendered page.
RegisterClientScriptBlock(): Writes a script block at
the beginning of the web form, right after the <form
runat="server"> tag
RegisterStartupScript(): Writes a script block at the end
of the web form, right before the closing </form> tag
10. AJAX
Asynchronous Javascript And Xml
Does things behind the scenes
Looks a lot more like desktop application then web
applications
No need to refresh the whole page at each interaction
with the server
Modifies page on the fly
JavaScript binds everything together
14. Steps to do a simple ajax request to get data
1. Create XMLHttpRequest Object
2. Open the request, set the HTTP method and URL
3. Set callback for onreadychange
4. Send asynchronous request
5. Create an event to call the previous steps
All this is JAVASCRIPT Code
22. Custom HTTP handler .ashx
A light-weight option as it doesn’t use the full-page
model.
A class that implements IHttpHandler
void ProcessRequest(HttpContext context)
bool IsReusable
29. Ajax and Client Callbacks
1. A JavaScript event fires, triggering the server
callback.
2. The normal page life cycle occurs.
3. ASP.NET executes the server-side callback method.
It accepts a single string parameter and returns a
single string.
4. The page receives the response from the server-side
method, it uses JavaScript code to modify the web
page accordingly.
30. Ajax and Client Callbacks
The Page must implement ICallbackEventHandler
Must Implement
public void RaiseCallbackEvent(string eventArgument)
public string GetCallbackResult()
34. ASP.NET AJAX
Successor of Atlas
Was first a separate component in ASP.NET 2.0 then
become completely integrated.
ASP.NET AJAX is made up of:
ASP.NET AJAX on the Client
ASP.NET AJAX on the Server
35. ASP.NET AJAX on the Client
JavaScript files, in System.Web.Extensions.dll
MicrosoftAjax.js, MicrosoftAjaxWebForms.js, and
MicrosoftAjaxTimer.js.)
36. ASP.NET AJAX on the Server
ScriptManager,
is the brains of the server-side ASP.NET AJAX model.
No visual appearance on the page.
renders the links to the ASP.NET AJAX JavaScript libraries.
Each page that uses ASP.NET AJAX requires an
instance of the ScriptManager.
A page can has one and only one ScriptManager.
38. The ASP.NET AJAX Server Controls
Manages script libraries and script
ScriptManager files, partial-page rendering, and other
functions.
Enables sections of a page to be
UpdatePanel partially rendered without a page
postback.
Provides visual feedback on the
UpdateProgress browser when the contents on
UpdatePanel controls refresh.
Performs partial-page updates at
Timer
defined intervals.
39. ASP.NET AJAX Server Control
Create partial-page update
Emit the ASP.NET AJAX script needed
Disadvantage
Reduced flexibility
41. ASP.NET AJAX Server Control
ScriptManager
Must be added before any other AJAX control.
Control manages the client-side scripts that enable
asynchronous Ajax functionality.
Only ONE ScriptManager per page.
42. ASP.NET AJAX Server Control
UpdatePanel
Isolating a section of a page for a partial-page update.
Intercept any submit event on it and call asynchronous
callback to refresh it content.
Any content that’s outside the panel and changed is ignored.
UpdateMode Property is Always or Conditional
Always updates with any partial update
Conditional updated independently
43. ASP.NET AJAX Server Control
UpdatePanel Triggers
Triggers to render UpdatePanel on event occurrence .
Triggers link controls outside the panel
To specify when an UpdatePanel should update, you need to
define an UpdatePanel trigger.
AsyncPostBackTrigger
updates only UpdatePanels with
UpdateMode Always and Conditional with the trigger
PostBackTrigger
44. ASP.NET AJAX Server Control
Timer Control
Interval Property to set maximum number of milliseconds
before next update.
If on an UpdatePanel triggers asynchronous postback
If not on one, nor linked in a trigger causes full page
postback
45. ASP.NET AJAX Server Control
UpdateProgress Control
Specify some content that will appear as soon as an
asynchronous request is started and disappear as soon as the
request is finished.
Can include a fixed message or image.
46.
47. Note
When the callback is performed, the target page
actually starts executing a trimmed-down life cycle.
Control events won’t execute, but the Page.Load and Page.Init
event
Page.IsPostBack = true,
Page.IsCallback =true
No page rendering.
View state information is retrieved
Any changes made are not sent back to the page.
Only strings can be sent and received.
48.
49. Ajax Control Toolkit
http://www.asp.net/ajaxlibrary/act.ashx
Open Source toolkit for AJAX controls and extenders.
http://stephenwalther.com/blog/archive/2011/11/16
/ajax-control-toolkit-november-2011-release.aspx
Read about changes to 2011 release
50.
51. Lab #1
Try the lecture examples again.
Use javascript to read xml and txt files
Download Ajax control toolkit
Try lecture Examples
52. References
[1] Pro ASP.NET In C# 2010, Fourth
Edition,matthew Macdonald, Adam Freeman, And
Mario Szpuszta, Apress
[2]Profesional ASP.NET 4 in C# and VB.NET, Bill
Evjen, Scott Hanselman and Devin Rader, Wiley
[3] http://www.adaptivepath.com/ideas/ajax-new-
approach-web-applications
Notes de l'éditeur
The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself. By calling the element by its proper DOM name, we can influence it.
AddJSCode page
Synchronous request
Must be executed before any further interaction with the XMLHttpRequest Object
thisControl that handles the client callback, implementing ICallbackEventHandler“…….” argument passed from client script to the server RaseCallbackEvent“…..”clientcallback, name of client event handler that receives result from server“……”context, client script that is evaluated on client prior to initiating the callback.BoolAsync
Putting more than one instance of the ScriptManager control on a Web Form causes the application to throw an InvalidOperationException when the page is initialized.
