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.
