Client-Side Enhancements in ASP.NET 2.0By Scott Mitchell
ASP.NET's model of Web controls, server-side event handlers, and view state work in unison to help blur the lines between the client and the server. In short, a developer designing an ASP.NET web page can think in terms of higher-level abstrations - TextBoxes, Buttons,
Oftentimes, the overall user experience can be enhanced by intelligently adding client-side script. By associating script with client-side user actions, it is possible to provide a snappier user interface or to enhance the overall experience. For example, when clicking a Delete button on a web form, rather than blindly deleting the record or posting back to a confirmation page, client-side script can be used to display a confirm messagebox, asking the user if they're certain they want to proceed with the delete. Clicking OK would proceed with the postback, while clicking Cancel would short circuit it.
Adding such client-side functionality in ASP.NET version 1.x almost always involved writing code. And for more advanced scenarios, the amount of code - both server-side and client-side - could easily explode. ASP.NET 2.0 has added a number of enhancements that make performing common client-side tasks as easy as setting a property. In this article we will look at how to programmatically set focus to a Web control, how to add client-side script when a Button is clicked, and how to maintain scroll position on postbacks. Read on to learn more!
Setting Focus to a Web Control
focus()method. For example, if the web page contains a textbox with a client-side
the page. With ASP.NET 2.0, all Web controls have a
method that can be invoked on the server-side. Doing so
SearchQuery, we could use the following
Page_Load event handler to set focus
to this control on page load:
Focus() method automatically injects the following script include into the rendered page:
client. (See Accessing Embedded Resources through a URL using
for more information on how
WebResource.axd is used to serve content.)
WebForm_AutoFocus(control), which has the following
In addition to adding the above script reference, calling the
Focus() method also adds the following call
WebForm_AutoFocus(control) right before the closing
In short, calling the
Focus() method on the server-side automatically injects the appropriate script functions
and a call to the
WebForm_AutoFocus(control) function, meaning that we do not need to bother with crafting
along with the other techniques examined in this article.
Performing a Client-Side Action When a Button, LinkButton, or ImageButton is Clicked
When a Button, LinkButton, or ImageButton Web control is clicked, a postback ensues. Sometimes, though, rather than immediately performing a postback we'd first like to perform some client-side task. A common example is in displaying a confirm dialog box that prompts the end user whether they want to perform the action associated with the button being clicked. Regardless of what script you want executed when the button is clicked, you can specify it through the Button, LinkButton, or ImageButton's
confirm(msg) displays a modal dialog box with an OK and Cancel button, displaying the
text msg within the messagebox. If the end user clicks OK,
if Cancel is clicked, it returns
false. When submitting a form, if one of the client-side event handlers returns
false, the browser stops the form submission. Therefore, an end user can click the Cancel button to stop the postback
and thereby prevent the server-side action from occurring.
To add a confirmation dialog box to a Button Web control, simply set its
OnClientClick property to
return confirm('msg');, like so:
Since the msg value passed into the
confirm(msg) function is delimited by apostrophes, if you
have any apostrophes in msg they must be escaped using
\', like in "You\'re" in the above example.
Adding a value for the
OnClientClick property results in rendered HTML that includes an
onclick attribute, like:
Adding such confirmation dialog boxes is quite possible in ASP.NET version 1.x, but requires writing code. See Adding Client-Side Message Boxes in Your ASP.NET Web Pages for more information on achieving this functionality with ASP.NET 1.x.
Maintaining Scroll Position on Postback
When working with large web pages where users typically have to scroll down, one annoyance that can occur when a Button, LinkButton, or ImageButton far down on the page is clicked is that, on postback, the browser returns to the top of the page. That is, if a user has to scroll down to click a button that causes a postback, on postback the browser will reload the document and be at the top of the page, meaning that the user has to scroll back down to where the button was clicked from if they want to see or work with the page at that point. This is a common pain when working with an editable GridView that may span many pages - when scrolling down and clicking the Edit button for some row that's not visible from the very top of the page, on postback the user has to scroll back down to the row being edited.
ASP.NET 2.0 makes remembering scroll position on postback even easier, as the ASP.NET 2.0 engine will kindly inject the
ASP.NET 2.0, simply set the
directive to True, either on the page-level or in
Web.config if you want it to apply to all pages in the
website. To apply it for a single page, just update the
<% @Page %gt; directive so that it looks lkike:
To apply this setting to all pages in the website, add the following markup to the
Web.config file (within the
Turning on the
MaintainScrollPositionOnPostback feature adds two hidden form fields to the rendered markup to track the
X and Y scroll positions across postbacks:
Also, script is injected to associate the web form's client-side
onsubmit event handler with the
WebForm_SaveScrollPositionOnSubmit() function, which saves the current scroll positions in the hidden form fields
shown above. On postback, the window's client-side
onload event handler is configured to call the
WebForm_RestoreScrollPosition() function, which restores the scroll position prior to the postback.
WebResource.axd?d=KJ8KmyYEIkBWV17-XIEtOQ2, which defines these functions as such:
In many scenarios, adding client-side functionality can greatly improve the overall user experience of your web application. Such possibilities were available in ASP.NET 1.x, but ASP.NET 2.0 has added a variety of properties and methods to make it easier to perform a plethora of common client-side tasks. In this article we examined how to set the focus of a Web control, how to associate some client-side action when a Button, LinkButton, or ImageButton was clicked, and how to maintain scroll position across postbacks. Live demos of all of these techniques are provided in the download at the end of this article.
For Equivalent Functionality in ASP.NET 1.x See: