Section 3.4. Client-Side Processing
Server-side processing is at the heart of ASP.NET. However, this approach does have some shortcomings. The main problem is that a postback to the server is required before any processing can occur. Even for intranet applications connected to the server with a high-speed local network connection, this introduces a noticeable delay often unacceptable to the user experience. For Internet applications, even those connected via high-speed broadband, the delays can seem interminable.
Client-side processing can greatly enhance the user experience, providing nearly instantaneous response to user actions. This is accomplished using scripting languages such as JavaScript or VBScript.
Some ASP.NET server controls use client-side scripting to provide responses to user actions without posting back to the server. For example, validation controls typically download script to the browser so invalid data are caught and flagged to the user without requiring a round trip to the server. However, in these cases, this client-side script is provided by ASP.NET and you, the developer, do not have to write or manage that script.
As you will see, calling client-side code from any ASP.NET server control is possible. In addition, the ASP.NET Button server control has a property, OnClientClick , that lets you specify client-side script to execute when the button is clicked.
Conventional and server HTML controls expose a number of events that can execute script when they are raised. This script can be contained in a script block in the content file or contained in-line with the attributes in the control declaration. Previously, you saw the onclick and onserverclick attributes for the HTML Button control for handling click events. Table 3-6 lists a few of the commonly used events available to HTML controls.
Table 3-6. Commonly used HTML events
| Event | Description |
|---|---|
| onblur | Fires when the control loses input focus |
| onfocus | Fires when the control receives focus |
| onclick | Fires when the control is clicked |
| onchange | Fires when the value of the control changes |
| onkeydown | Fires when the user presses a key |
| onkeypress | Fires when the user presses an alphanumeric key |
| onkeyup | Fires when the user releases a key |
| onmouseover | Fires when the mouse pointer is moved over the control |
| onserverclick | Raises the ServerClick event when the control is clicked |
To see client-side script in action, create a new web site called ClientSideProcessing . In the Source view of the content file, add the following script block between the closing </head> tag and the opening <body> tag:
<script language=javascript> function ButtonTest( ) { alert("Button clicked - client side processing"); } function DoChange( ) { document.getElementById("btnSave").disabled=false; } </script> The language is specified with the language attribute in the opening <script> tag, in this case JavaScript. In this example, two different functions are implemented. ButtonTest uses the alert method to pop up a dialog box. DoChange enables a Save button. This addresses the scenario where you want a Save button to be disabled until the user makes a change to some data, at which point the Save button should become enabled.
|
Add the following controls to the form: an HTML button, two ASP.NET buttons , an HTML input text box, and an ASP.NET TextBox. You can drag the controls onto the form, rename the button controls, and add the attributes shown in Example 3-5. The two HTML controls have ID and runat attributes, making them server controls. btnServer has the OnClientClick property set, and that btnSave has its Enabled property set to false .
Example 3-5. Controls in Default.aspx for ClientSideProcessing
<h1>Client-Side Processing</h1> <input id="btnHTML" runat=server type="button" value="HTML Button" onclick="javascript:ButtonTest( );" onserverclick="btnHTML_ServerClick"/> <asp:Button ID="btnServer" runat="server" Text="ASP.NET Button" OnClientClick="javascript:ButtonTest( );" /> <br /> <input id="txtHTML" type="text" runat="server" onchange="javascript:DoChange( );" /><br /> <br /> <asp:TextBox ID="TextBox1" runat="server" onchange="javascript:DoChange( );"></asp:TextBox> <br /> <asp:Button ID="btnSave" runat="server" Text="Save" Enabled=false />
Double-click btnHTML in Design view to create an event handler in the code-behind file. Add the following highlighted line of code:
protected void btnHTML_ServerClick(object sender, EventArgs e) { txtHTML.Value = "An HTML server control"; } Double-click btnServer in Design view to create an event handler for that button and add the following highlighted line of code in the code-behind file:
protected void btnServer_Click(object sender, EventArgs e) { txtHTML.Value = "An ASP.NET server control"; } Now run the page. Initially, the Save button will be disabled (grayed out). Clicking the HTML button will cause the JavaScript function ButtonTest to execute, popping up a dialog box with the message "Button clicked - client side processing." Once that dialog is cleared, then the server-side code will run, populating the HTML input box with the string "An HTML server control." Similarly, clicking on the ASP.NET Server button will pop up the same dialog box, then populate the HTML input box with the string "An ASP.NET server control." Changing the contents of either text box and tabbing out of the text box will enable the Save button.
The ability to call client-side script from an ASP.NET server control, other than using the Button.OnClientClick property, is essentially an undocumented feature. It works by taking advantage of the fact that any attributes declared with the control, that are unrecognized by ASP.NET are passed unchanged to the browser.
You can see this by viewing the source for the page in the browser. The ASP.NET TextBox from the code snippet above is rendered to the browser this way:
<input name="TextBox1" type="text" id="TextBox1" onchange="javascript:DoChange( );" />
Since onchange is a valid event for an HTML input control, it correctly processes the JavaScript function.
EAN: 2147483647
Pages: 173