ASP Hosting sale!
1,000MB space, 40GB transfer, 1 SQL Server 2000 db! - $9.95 per month*!
Limited Time Offer!

aspdev | articles | tutorials | forums

ASPdev -> All Articles -> Adding JavaScript to ASP.NET Web Server Controls and to HTML Server Controls

Adding JavaScript to ASP.NET Web Server Controls and to HTML Server Controls

Most web applications require both server-side and clients-side coding. ASP.NET applications are no exception. It is very easy to add programmatically JavaScript to ASP.NET Web Server Controls and/or to HTML Server Controls, which reside on an ASP.NET page.

First lets define what is the difference between ASP.NET Web Server Controls and HTML Server Controls.

HTML Server Controls are normal HTML tags, which can be accessed programmatically from ASP.NET server-side code. The only difference between the standard HTML tags and HTML Server Controls is that the HTML Server Controls have additional attribute - runat="server", which makes them accessible from the server-side code.

An example of HTML Server Control:

<input type="button" value="HTML Server Control" runat="server" id="HTML_Server_Control">

ASP.NET Web Server Controls also require a runat="server" attribute in order to be recognized and accessible from the server-side code, but they do not always map to existing standard HTML elements. ASP.NET Web Server Controls can be much more complex and can represent an entity composed of several elements.

This article will show you how to add JavaScript to ASP.NET Web Server Control, but the same technique is used with the HTML Server Controls too.

Consider the following APS.NET code defining ASP.NET Web Server Control.

<asp:Button id="ASPNET_Server_Control" runat="server" Text="ASP.NET Server Control!"></asp:Button>

So how do you add a JavaScript function to this ASP.NET Server Control, which will popup a simple alert message when the button it’s clicked?

The ASP.NET framework allows adding attributes to any ASP.NET Web Server Control from the server-side code. Every ASP.NET Server Control has a collection called Attributes, which allows us to access all control’s attributes and add/delete/update them.

For the purpose of this article we are interested in the Attributes.Add method, which we are going to use to add JavaScript to our ASP.NET Server Control button.

Consider the following ASP.NET serve-side code:

ASPNET_Server_Control.Attributes.Add("onclick", "alert(‘This JS function was added on the fly!’);")

The line above will instruct the .NET CLR (Common Language Runtime) to render the ASP.NET Web Server Control as the following HTML:

<input type="submit" name="ASPNET_Server_Control" value="ASP.NET Server Control!" id="ASPNET_Server_Control" onclick="alert('This JS function was added on the fly!');" />

As you can see this is the standard HTML form element <input> with a couple of attributes defined and one of them – the onclick was added dynamically in the Page_Load subroutine.

In our example we added JavaScript event handler for the onclick client-side event, but we can add any attribute/attribute value pair, using Attributes.Add method.

The example below sets the style of our ASP.NET Web Server Control:

ASPNET_Server_Control.Attributes.Add("style", "background-color:yellow")

Here is a fully functional ASP.NET example, which adds JavaScript to both ASP.NET Server Control and HTML Server Control on the fly and which updates the ASP.NET Server Control style:

<%@ Page Language="VB" %>
<script runat="server">

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
ASPNET_Server_Control.Attributes.Add("onClick", "alert('This JS function was added on the fly to this ASP.NET Web Server Control!');")
ASPNET_Server_Control.Attributes.Add("style", "background-color:yellow")
HTML_Server_Control.Attributes.Add("onClick", "alert('This JS function was added on the fly to this HTML Server Control!');")
End Sub

</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:Button id="ASPNET_Server_Control" runat="server" Text="ASP.NET Server Control!"></asp:Button><br/>
<input type="button" value="HTML Server Control" runat="server" id="HTML_Server_Control">
</form>
</body>
</html>




Contact Us