How to associate client-side events with server-side controls in ASP.NET by using Visual C# .NET (318100)

SUMMARY

This step-by-step article demonstrates how to programmatically associate client-side events with server-side Web Forms controls in ASP.NET.

back to the top

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:

• Microsoft Windows XP Professional, Microsoft Windows 2000 Professional, Windows 2000 Server, or Windows 2000 Advanced Server
• Microsoft Visual Studio .NET
• Microsoft .NET Framework
• Microsoft Internet Information Services (IIS)

back to the top

Create an ASP.NET Web application by using Visual C# .NET

These steps demonstrate how to create a new ASP.NET Web application that is named ClientEventDemo:

1. Start Microsoft Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual C# Projects under Project Types, and then click ASP.NET Web Application under Templates.
4. In the Location box, type ClientEventDemo to replace the default WebApplication# name in the URL path. If you are using the local server, you can leave the server name as "http://localhost." This results in an "http://localhost/ClientEventDemo" entry in the Location box.

back to the top

Description of the WebControl.Attributes property

The WebControl.Attributes property is implemented as a System.Web.UI.AttributeCollection class of name and value pairs. The Attributes collection contains a collection of all of the attributes that are declared in the opening tag of a Web server control. You can use this to programmatically control the attributes that are associated with a Web server control. You can add attributes to the collection or remove attributes from the collection. In the example that is described in this article, you add an attribute that is to be associated with a Web Forms TextBox control. Specifically, the name and value pair is for an entry named "onblur." The JavaScript "alert" code serves as the value.

Attributes that are stored in this collection for a Web server control do not correspond to the strongly-typed properties that are located on the specified Web server control. To better demonstrate this concept, another attribute is added for the Web Forms TextBox control in the sample code to set the background color. Notice that the sample code does not use the BackColor property of the Web Forms TextBox control. Instead, the sample code uses the HTML style attribute to set the background color. The Attributes property is rendered with all of the attributes in the collection in the opening tag for the control, no matter what the browser settings are. Not all browsers support every attribute that is rendered.

back to the top

Example that uses the Attributes property

This example demonstrates how to use the Attributes property to specify a client-side event for a Web Forms TextBox control:

1. Follow these steps to add a new Web Form to the project named ClientEventSample.aspx:
   1. In Solution Explorer, right-click the project node, point to Add, and then click Add Web Form.
   2. Type ClientEventSample.aspx in the Name box, and then click Open.
2. On the Design tab, drag a Web Forms TextBox control to the page, and then change the value of the ID property to MyTextBox in the Properties window.
3. Right-click the page, and then click View Code to open the code-behind class file in the editor.
4. Add the following code to the Page_Load event in the code-behind class file:

   private void Page_Load(object sender, System.EventArgs e)
   {
   	MyTextBox.Attributes["onblur"]="javascript:alert('Focus lost from Web Forms MyTextBox control!!');";
   	MyTextBox.Attributes["style"]="BACKGROUND-COLOR: #ccffff;";
   }
   					

5. On the File menu, click Save All to save the Web Form and other associated project files.
6. On the Build menu in the Visual Studio .NET integrated development environment (IDE), click Build Solution.

back to the top

Verify that it works

1. In Solution Explorer, right-click ClientEventSample.aspx, and then click View in Browser.
2. With the page open in the browser, click the MyTextBox control to make it active, and then press the TAB key. You see a JavaScript message box that displays a confirmation that the onblur event has been triggered because the Web Forms control lost focus. Also, notice that the background color for the MyTextBox control is set to blue.

back to the top

Troubleshooting

The Attributes property is rendered with all of the attributes in the collection in the opening tag for the control, no matter what the browser settings are. Not all browsers support every attribute that is rendered.

back to the top