Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

Calling JavaScript from an ASP.NET 2.0 Button Click event and Using Accelerator Keys and setting focus to a Textbox web control

Author: Aadil

This simple article will show you some of the new features present for the most commonly used web controls in ASP.NET

In this text I will show you how to use some of the addition features for the most commonly used web controls in ASP.NET, the Label, Button and Textbox web controls. Let’s start with the Textbox control. How many times you needed to set the focus to a Textbox control when the web page loads. Most commonly when creating a login screen you often needed to set the focus on the user id field so the user can instantaneously start typing his/her id. You may of have used JavaScript but that can become cumbersome very quickly. In ASP.NET 2.0 one of the Textbox web control’s enhancements is the method called Focus(), when called in the Page load event set the focus to the specified Textbox.




Another new feature in the most web controls is the addition of the AccessKey property. If you have worked with windows forms applications you may of have remembered that you can assign short keys for commonly used commands such as pressing a combination of keys like (Alt + H) for a button on a windows form with Text “&Help” can make call the button’s event handler to execute. A similar feature is now enabled by using this AccessKey property. You can set this property of a Label web control and then set the AssociatedControlID to another web control, in this case if I’ve set this to the ID of a Textbox control then when the page loads this will set the focus to this control. If the AccessKey of a Button web control is set to a value then the client side function for the click event will be called.


Another new enhancement is in the Button web control. In the previous version of ASP.NET 1.x, a lot of times I needed to execute some JavaScript code when a Button web control was pressed. As there was only one event defined called OnClick, that caused the page to post back I didn’t get a chance to call some client side code. To do so I usually have two choices. Either I’ve used the html version of the Button control (HtmlButton) or in the page load event I’ve added some JavaScript using Page.RegisterClientScriptBlock(). But this was quite messy too for adding some simple JavaScript statements.


In this new version of ASP.NET 2.0 Microsoft have made another property called OnClientClick, that when assigned a string value of a JavaScript code, will hook the code on client side. Also just after the client side code is executed the post back occurs and if you’ve defined any server side event handler then that will be executed also.


I’ve made a simple ASP.NET page with inline server code model and tried to demonstrate these new tweaks. Try this code on you machine and check the new features of these commonly used controls.

<%@ Page Language="VB" %>


DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">


<script runat="server">

  Protected Sub cmdOne_Click(ByVal sender As Object, ByVal e As EventArgs)

    Me.lblResult.Text = "Server Side Button Click Event Handler Called"

  End Sub


  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)


  End Sub




<html xmlns="" >

<head runat="server">

  <title>Untitled Pagetitle>



    <form id="form1" runat="server">

      <asp:Button AccessKey="s" ID="cmdOne" Text="ASP.NET 2.0 Button" runat="server" OnClick="cmdOne_Click" OnClientClick="alert('Client side javaScript alert() function called')" /><br />

      <hr />

      <asp:Label ID="lblUserName" runat="Server" Text="UserName" AccessKey="u" AssociatedControlID="txtUserName">asp:Label> <asp:TextBox ID="txtUserName" runat="server">asp:TextBox><br />

      <asp:Label ID="lblPassword" runat="Server" Text="Password" AccessKey="p" AssociatedControlID="txtPassword">asp:Label>  <asp:TextBox ID="txtPassword" runat="server" TextMode="Password">asp:TextBox><br />

      <br />

      <asp:Label ID="lblResult" runat="server" ForeColor="Red">asp:Label>



Article Comments
sir/mam, please send me javascript code for date(dropdownlist), 2.0 server side controls which work onclick button.....

Posted on 1/22/2008 4:47:34 AM by Dinesh

please send me that how to call javascript file in control

Posted on 12/12/2009 4:26:32 AM by kailash urmliya

how to use enter key in text box control

Posted on 12/12/2009 4:28:07 AM by kailash urmliya

Hi kailash urmliya,

Please see this example

function valSubmit() {
var doc = document.forms[0];
var msg = "";
if (doc.firstName.value == "") {
msg += "- Please enter a first name.n";
if (doc.lastName.value == "") {
msg += "- Please enter a last name.n";
if (msg == "") {
return true;
} else {
alert("The following errors were encountered.nn" + msg);
return false;
} }

This is the key line in the code:

btnSubmit.Attributes.Add("onClick", "return valSubmit();");

The elements are placed on the HTML form using CSS via their style attribute. The form ties the JavaScript function to the ASP.NET Button (btnSubmit) and to its HTML onClick event. The OnClick attribute of the ASP.NET Button tells the system what function is called when the form is submitted to the server.

If you're a VB.NET developer, the only change to the previous code is the C# block of code. The VB.NET version follows:

Private btnSearch_Click (sender As Object, e As System.EventArgs)
End Sub
Private Page_Load(sender As Object, e As System.EventArgs)
btnSubmit.Attributes.Add("onClick", "return valSubmit();")
End Sub

Posted on 12/14/2009 4:42:00 AM by zunnair

The best way to call a javascript function from button click is :


Add this in the Form_Load()

Posted on 1/30/2010 3:40:40 AM by Suneet Pant

i am working in and i faced one problem for socket connection 1- how to referesh web page page by recieved string from socket
2- when i create server socket in page load then i faced problem when page referesh in listen socket.
please give me a solution ASAP

Posted on 5/3/2010 6:20:15 AM by Sambhav

I want the same code for c#, can you help me?

Posted on 8/4/2010 1:31:33 PM by Pinkle

Add Article Comment:
Name :
Email Address :
Comments :
<< Using Master Pages in ASP.NET 2.0, A Premier

Disclaimer - Privacy
© 2002-2017