Working with Client-Side Scripting Lesson 5

Objectives

Client-Side Scripting An alternative to postbacks is use client-side scripting which is having the browser process programs rather than the server. Client-side scripting allows the page to respond immediately to user activities rather than waiting on the server to build a new page and send it to the browser.   

JavaScript JavaScript is embedded into HTML for the browser to run when Java applets are downloaded along with HTML as separate files. These files are run on the locally installed Java Virtual Machine. JavaScript is text-based commands while a Java applet is compiled code generated from a complex high-level language that only a computer can read.

JavaScript: Making the Web Page Interactive

VBScript Although VBScript is an alternative to JavaScript for enhancing HTML, it is not used nearly as often. The most important reason for this lack of popularity is that it can only be run with Internet Explorer. VBScript is popular with network administrators because of its ability to create standalone applications. As in CSS and JavaScript, an external file can also be used to separate the VBScript code from the HTML page.

Understanding Client-Side Scripting and DOM All XML documents adhere to the XML Document Object Model (DOM) specification. When the XML structure holds HTML data, it becomes XHTML. The browser reads the XML document populated with XHTML data for the Web page to know what to display on the document and where to place it. This becomes the Document Object Model, or just DOM, that the client-side scripting code manipulates. The browser then changes the display to reflect the changes to this DOM without completely re-creating the page or having to contact the Web server unnecessarily.

Using IE8 to View Our Web Page from the DOM Point of View

The DOM for Our Simple Web Page as Seen by IE8

Ajax Ajax is a group of existing technologies used to speed up server requests including: Standards-based presentation using XHTML and CSS Dynamic display and interaction using the DOM Data interchange and manipulation using XML and XSLT Asynchronous data retrieval using XMLHttpRequest JavaScript binding everything together

Ajax can be used with the following technology: XML XHTML CSS XSLT DOM XML Http Request JavaScript

The ASP.NET implementation of Ajax includes several objects: Using ASP.NET AJAX The ASP.NET implementation of Ajax includes several objects: ScriptManager UpdatePanel XMLHttpRequest The all-caps version of Ajax (AJAX) refers to Microsoft’s implementation of Ajax. Thus, Ajax for ASP.NET is ASP.NET AJAX, not ASP.NET Ajax.

ScriptManager Control The ScriptManager control could be responsible for controlling the activities of AJAX on a form. Every ASP.NET AJAX page must have its own ScriptManager control unless the site is using a master page. In that case, all pages will use the ScriptManager of the master page.

ScriptManagerProxy Control If an individual page needs to do something different from what the ScriptManager on the master page defines, a ScriptManagerProxy control can be placed on that page to make the necessary changes unique to the page. In addition, because only a single ScriptManager or its proxy is allowed on a page, there is no reason to manually bind any of the AJAX controls that are placed onto the page.

Timer Control The Timer control is used to delay scripts. When the interval property is set in milliseconds and the Enabled property is set to true, the code in the timer’s event procedure will run repeatedly on every cycle set by the interval. For a single timing event, setting the interval property to false is usually the procedure’s first line of code. The most common use for AJAX applications is to do a postback on an UpdatePanel at a given interval. You can automate a clock to update itself by using a timer.

Timer Object The timer object is handy for displaying a real-time clock. However, it may not always work as expected. The timer automatically begins another count down after the event procedure code has finished processing. Because the code directs the page to perform a postback, the overall time between seconds is slightly longer that the 1000 milliseconds. This forces the display to periodically skip seconds.

Timer Object The postbacks will also create a blinking display, which can be distracting to the user. A quick test is to change the interval to 2000 milliseconds and watch the display slowly alternate the seconds from a series of even numbers to a series of odd numbers, depending on the processing and update speed.

UpdateProgress Control The UpdateProgress control can be used for user feedback with asynchronous postbacks whether it is for the entire page or for individual UpdatePanel controls. Before AJAX, Web pages were unresponsive during the postback process, making it impossible to inform the user of his or her progress.

ChrildenAsTriggers ChildrenAsTriggers is a Boolean property of the UpdatePanel that, when set to True, is updated automatically when any of its child, or nested, UpdatePanels are updated.

UpdateMode UpdateMode is a string property of the UpdatePanel that can be set either to Always or to Conditional. An Always setting will update the panel whenever any other panel on the form is updated. A Conditional setting will only cause the UpdatePanel to trigger when explicitly called.

Using Triggers The Triggers collection of the UpdatePanel control  allows an event to respond to the UpdatePanel control without actually placing it in the UpdatePanel control. This provides more flexibility to the designer by allowing external events to either use or not use UpdatePanel control postbacks as needed.  

Collections All the triggers in the collection of an UpdatePanel can trigger a postback. This allows the developer to physically place controls anywhere on the form. Otherwise, the controls would have to be placed in the proper UpdatePanels for controlling postbacks. The ScriptManager also has properties that are collections. These are the Scripts collection and the Services collection, which make it easy to include external scripts and services into the Web page.

ScriptManager The ScriptManager is more than a tool for partial-page postback. The ScriptManager is also used to manage scripts. One of the many responsibilities of the ScriptManager is to provide a reference to additional client-side JavaScript files and Web services. After a script or service is registered, the functions within these files can be called within your application.

ScriptManager Remember that some Web sites use a master page with a ScriptManager that manages the entire site. If a page needs ScriptManager settings different from the master, a ScriptManagerProxy control is placed on the page to make these alternative settings. Scripts from the ScriptManager and all ScriptManagerProxy controls are merged at runtime for the entire site to use. Services from the ScriptManager and all ScriptManagerProxy controls are also merged at runtime.

Extender Controls AJAX 3.5 has the capability of converting any control into an extender control. The new control can either be a standalone control, just like the other controls in the Toolbox, or a non-visible control that enhances existing controls. We can create our own extender controls or download them from many sites on the Internet.

Client-Side Libraries Client-side libraries hold client-side programming code, such as JavaScript, that is run in the browser. The files that make up the libraries must be downloaded and the code referenced from within the HTML page.

Summary Understanding client-side scripting. Writing JavaScript code. Writing VBScript code. Examining the Document Object Model (DOM). Understanding the history of Ajax. Understanding the technology and terminology of Ajax. Setting the EnablePartialRendering Property. Using the ScriptManager and ScriptManagerProxy Controls.

Summary Using the Timer and UpdateProgress Controls. Setting the ChildrenAsTriggers and UpdateMode Properties. Using Triggers for UpdatePanels. Understanding ScriptManager Scripts and Services. Using Extender Controls and Client-Side Libraries.