Working with client-side script
Scott mitchell4guysfromrolla.com
August 2004
Summary:.. While ASP.NET performs most of its processing on the server, some actions are better served by client-side processing Scott Mitchell shows how your ASP.NET pages and controls can add client-side code (27 printed pages)
Download The Source Code for this article.
Contents
IntroductionCreating a Base Class as the Foundation for Adding Client-Side ScriptAdding Client-Side Script from the Code-Behind ClassExecuting Client-Side Code in Response to User ActionImplementing Common Client-Side FunctionalityConclusionRelated Books
Introduction
When working with dynamic Web-based scripting technologies, like classic ASP or PHP, developers must have a keen understanding of the logical, temporal, and physical separation between the client and the server. For a user's action to trigger the execution of server-side code, for example, a developer working with classic ASP must explicitly cause the user's browser to make a request back to the Web server. Creating such interactions can easily consume much development time and lead to unreadable code.
Microsoft ASP.NET helped ease the burden of tying user events to execution of specific server-side code through the use of Web Forms, which blur the lines between client and server. Using ASP.NET and a minimum of effort, a developer can quickly create a Web page that has a variety of interactive user interface elements-buttons, drop-down lists, and so on-which, based on the end user's actions, can cause selective server-side code to run. For example, with ASP. NET to add a drop-down list that performs some action whenever the selected drop-down list item is changed, all you need to do is add a DropDownList Web control, set its AutoPostBack property to True, and create a SelectedIndexChanged event handler for the . drop-down list Accomplishing this same functionality with classic ASP would require you to write oodles of intricate HTML, client-side JavaScript, and server-side script code; with ASP.NET, the necessary script code and server-side event model are Provided for you.
While Web Forms in ASP.NET greatly simplify running server-side script when client-side actions are performed, such power, if misused, can lead to unacceptable performance. While Web Forms hide the complexities involved, each time server-side code needs to be executed, the end user's browser must make a request back to the Web server by resubmitting the form. When submitting the form, all form fields-textboxes, drop-down lists, check boxes, and so on-must have their values sent back as well. Additionally, the page's view state is sent back to the Web server. In total, each time the Web page is posted back, potentially several kilobytes of data will need to be sent back to the Web server. Frequent postbacks, then, can quickly lead to an unusable Web application, especially for those users still stuck on dial-up. The need for frequent postbacks can be reduced by pushing functionality to the client.Note ASP.NET Web Forms emit a hidden form field titled
VIEWSTATE, which contains a base-64 encoded representation of the changed state of the Web controls in the Web Form. Depending on the Web controls present, the view state can range anywhere from a few dozen bytes, to tens of kilobytes. To learn more About View State Check Out My Article
Understanding asp.net view stat.
With classic ASP, adding data-driven, custom client-side script was simple, albeit not very readable. To display a popup window in classic ASP that loads a URL based on some ID field, for instance, you would type in the appropriate client -Side script, Using the <% = id%> Syntax to INSERT The Value of the ID Field. ASP.NET Allows You To create Such Data-Driven Client-Side Script with some assorted methods in the page class.
This article examines techniques for adding client-side script to your ASP.NET Web pages. Client-side script is, as its name implies, script code that runs in the visitor's browser. We'll see how to accomplish common client-side tasks , such as displaying alerts, confirm boxes, and popup windows. (One of the main uses of client-side script-form field validation-is a bit of a moot topic with ASP.NET, since the validator Web controls provide client-side form validation out of the box) The focus of this article will be on the server-side classes, methods, and techniques for injecting client-side script;. we will not be examining the actual client-side script in detail, as this information Is Covered in Numerous Other Articles and Sites Around the Web.creating a base class as the Foundation for Adding Client-Side Script
One of the major differences between classic ASP and ASP.NET is the programming model of each technology. ASP pages are atomic, procedural scripts interpreted on each page visit. ASP.NET, however, is a fully object-oriented programming technology. All ASP .NET Web pages are classes with properties, methods, and events All Web pages are derived, either directly or indirectly, from the Page class in the System.Web.UI namespace;. the Page class contains the base functionality of an ASP.NET Web Page.
. One of the concepts of object-oriented programming is that of inheritance Inheritance allows you to create a new class that extends the functionality of another class (If class B inherits class A, it is said to extend class A;. Class A is said To be the base class.) WHEN Using the code-behind model for Creating ASP.NET Web Pages, You Can Quite Clearly See That The code-behind class inherits the page class:
Public Class Webform1
Inherits System.Web.ui.page
...
END CLASS
By having your code-behind class inherit the Page class, it automatically receives the functionality inherent in the Page class, such as the Request, Response, Session, and ViewState objects, as well as common events, like Init, Load, Render, as so on. As we'll see in this article, if you have a need for some common functionality to be available for all ASP.NET Web pages, one approach is to create a class that derives from the Page class and has additional methods and properties to accomplish these desired enhancements. Then, to have an ASP.NET Web page utilize these enhancements, all we need to do is update the Inherits statement in the page's code-behind class to use the class that extends the Page class.
In this article we'll create a class, called ClientSidePage, that derives from the Page class and provides extra methods to help with performing common client-side tasks. By having a code-behind class inherit ClientSidePage, rather than Page, adding script code Will Be As Simple As Calling A Method and Passing In A Few Parameters. Specification, this Class Will ContainMETHODS for:
Displaying a modal, client-side dialog box. Setting the focus to a specific form field on page load. Using a modal confirm dialog box to determine if a user wants to postback the form or not. Displaying popup windows.
Before we delve into the ClientSidePage class, let's first examine the pertinent methods in the Page class for injecting client-side script into a Web page. Once we've covered these Page methods, we'll jump into extending their functionality with the ClientSidePage class , and see how to Tie Everything in an asp.net web page.adding client-side script from the code-behind class
All ASP.NET Web pages must be derived directly or indirectly from the Page class in the System.Web.UI namespace. The Page class contains the base set of methods, properties, and events required for a functioning Web page. Among the class's many methods are a few methods designed for injecting client-side script into the rendered HTML. These methods are called from the code-behind class and can therefore be used to emit data-driven client-side script. The pertinent Page class methods for emitting client -side script follow.
.......................
Note to Access The
Page Class's Methods, You Can Either Type In The Method Name Directly, or Utilize IntelliSense in Microsoft Visual Studio .net by Entering
"For Microsoft Visual Basic .NET,
This. (for c #), or
(For Either C # Or Visual Basic .NET). If you are useful Visual Basic .NET As Your Programming Language of Choice, Be Sure To Configure Visual Studio .NET TO
Not Hide Advanced Member, or You Won't See The Client-Side Script Methods (To Show Advanced Members, Go To
Tools | Options | Text Editor | Basic and Uncheck
Hide advanced members.)
RegisterClientScriptBlock (key, script) The RegisterClientScriptBlock method adds a block of client-side script after the Web Form's rendered
