Calling Client Script Events in ASP.NET Server Controls
Posted by triaslama on April 25, 2008
ASP.NET has its own controls (WebControls or HtmlControls) that rendered as elements in a page. ASP.NET server controls declared with ‘asp’ tag (<asp:[control_type] />) and contains runat=”server” attribute. ASP.NET server controls has its own attribute related to a specific control (such as onclick and text for click event and button text respectively).
For example: if we want a click event associated with a button of ASP.NET server control we use this script in our ASP.NET page:
<asp:Button id="btn" onclick="btn_Click" text="Test" runat="server" />
The click event received in onclick attribute and will be handled by btn_Click method. btn_Click is a method that will be called everytime a click occurs in this button control. We can write btn_Click method with any languages that supported by .NET framework.
But how if we want to call client script within ASP.NET server controls? Fortunately it can be accomplished to. Suppose that I have a button of ASP.NET server control but I want a click event of this button handled by Javascript function (in client side) rather than any of .NET languages (in server side).
In this example I use two buttons of ASP.NET server controls. The first button will have click event handled using server script and click event of second button handled via client script. I embed the javascript code inline inside the page, but we can pull it out and place it in separate *.js file then this file is referenced inside our ASP.NET page (expage.aspx):
- <%@ Page Language=”C#” %>
<html>
<head>
<title>Calling Client Script Events in ASP.NET Server Controls</title>
<script language=”C#” runat=”server”>
void Page_Load()
{
this.btn2.Attributes.Add(“onclick”,”showAlertMessage()”);
}
void btn1_Click(object sender, EventArgs e)
{
this.lblShow.Text = “<b>Server script executed!</b>”;
}
</script>
<script lang=”javascript” type=”text/javascript”>
function showAlertMessage()
{
window.alert(“Client script executed!”);
}
</script>
</head>
<body>
<form runat=”server”>
<asp:Button id=”btn1″ text=”Calling server script” onclick=”btn1_Click” runat=”server” />
<asp:Button id=”btn2″ text=”Calling client script” runat=”server” />
<p />
<asp:Label id=”lblShow” runat=”server” />
</form>
</body>
</html>
The important portion of source code that make calling client script events possible is the following lines of code:
void Page_Load()
{
this.btn2.Attributes.Add("onclick","showAlertMessage()");
}
Page_Load called when a page loads. Inside Page_Load method we add an attribute to btn2 control (btn2.Attributes.Add([param1],[param2])). First parameter of Add method specify what event will be handled (onclick for click event, onkeydown for keydown event, onmouseover for mouseover event, etc.). Second parameter of Add method specifies function associated with specified event. With this we can put any of Javascript events in ASP.NET server controls. I hope I can more realize how interesting it could be! Here screenshots of expage.aspx:
Click event of ASP.NET server controls handled using server script and client script.
As an additon maybe we need this: If we include an attribute that does not map to a property of ASP.NET controls, the attribute will be ignored in server side processing and will be passed as an attribute of HTML control (rendered in client side).
Look at the following example (expage2.aspx):
- <%@ Page Language=”C#” %>
<html>
<head>
<title>Client Script in ASP.NET</title>
<script language=”C#” runat=”server”>
</script>
<script lang=”javascript”>
function showText(elm)
{
var displayDiv = document.getElementById(“displayDiv”);
displayDiv.innerHTML = elm.value;
}
</script>
</head>
<body>
<form runat=”server”>
<asp:TextBox id=”txtSample” onkeydown=”showText(this)” runat=”server” />
<p />
<div id=”displayDiv”>
</div>
</form>
</body>
</html>
Inside expage2.aspx, I put onkeydown as an attribute of ASP.NET TextBox server control. But because keydown not exists as TextBox event (please refers to .NET documentation for complete members of TextBox server control) so onkeydown just passed as a HTML control attribute.
This is result of expage2.aspx:
keydown is not a TextBox event, so onkeydown just passed and rendered as HTML control attribute.
Ameer said
Good.. In Asp.net we use the responds.Attributes in the application load event.. if it is possible??? reply me..
Sascha said
Hi there,
how about client side access to server controls that do not map 1:1 to an ordinary HTML as shown in your example using the button? I’e got controls like the Calendar or the TreeView in mind.
Is there a client side “object model” available for the more advanced ASP.NET sercer controls?
Thanks
triaslama said
I am sorry for the delay of my reply. I can’t say for sure to server controls that do not map 1:1 to corresponding HTML control, but what I mean in this post is I want to utilize client side events from ASP.NET controls.
So in this case we will always map ASP.NET control to HTML control and get the possible events of that HTML control.
Rahul said
Hi,
For executing clientside script from server side .Net supports
some other methods like RegisterStartupScript. If you simply need to execute client side script you can use onclientclick()..
Then why this?
Rahul.
My site. said
Look at this….
Sweet site dude, check out mine when you get a min……