Enter key event in asp.net

No.of Views3647
Bookmarked0 times
Downloads 
Votes0
By  RRaveen   On  02 Jun 2010 21:06:00
Tag : ASP.NET , Miscellaneous
In this article, i will explain about Enter key event in asp.net.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

In most of the web application, the enter key is mostly used by user to invoke click event of the buttons. But when we are going to work with real world application there are few no of ways to achieve this in asp.net.bellow I’m going to give the 3 different ways of implementations.

Implementations

Way 1: Using defaultButton in form

        In the asp.net 2.0 and later version, there is features call defaultButton in the form attribute. If we are set the defaultbutton property using a button within this page, when we are press enter key , the default button click event will  raise.

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Enter key event in asp.net</title></head><body><form id="form1" runat="server" defaultbutton="btnSave"><div><asp:TextBox ID="txtCurrencey" runat="server"></asp:TextBox><asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /></div></form></body></html>

 

Image Loading

In code behind, I have composed simple under the button click event.

Default.aspx.cs

 

using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){}protected void btnSave_Click(object sender, EventArgs e){Response.Write("Button save click is raised");}}

Once press enter key, the output will be like following,

 

Image Loading

Way 2:Use the panel and defaultButton

In the asp.net there is another nice way to handle enter key event to the particular section. To this we have use to the panel control in page and then add the child controls within the panel like following.

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Enter key in asp.net</title></head><body><form id="form1" runat="server" ><div><asp:TextBox ID="txtCurrencey" runat="server"></asp:TextBox><asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /></div><dir><asp:Panel ID="pnlDetails" GroupingText="Panel Section" runat="server" DefaultButton="btnUpdate"><asp:TextBox ID="txtName" runat="server"></asp:TextBox><asp:Button ID="btnUpdate" runat="server" Text="pdate" OnClick="btnUpdate_Click" /></asp:Panel></dir></form></body></html>

Screen will be followings,

 

Image Loading

In codebehind, I have composed code like following,

Default.aspx.cs

 

using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){}protected void btnSave_Click(object sender, EventArgs e){Response.Write("Button save click is raised");}protected void btnUpdate_Click(object sender, EventArgs e){Response.Write("Update Button click event is raised");}}

Once I focus the textbox inside the panel and press enter key ,result will be following 

Image Loading

Way 3: Using client script to perform enter key event

In this way is new and easy way to do the post back using button when we are focus a textbox and press enter key once we are enter value in textbox. To this we have to register client side event for text box within code behind file like following.

 

using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){txtCurrencey.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + btnSave.UniqueID + "').click();return false;}} else {return true}; ");}}protected void btnSave_Click(object sender, EventArgs e){Response.Write("Button save click is raised by the text focus enter key event");}protected void btnUpdate_Click(object sender, EventArgs e){Response.Write("Update Button click event is raised");}}

In above code, I have registered client side event to text box within page load when page load first time. Because event must be register once times to controls. to the currency textbox , I have added an attribute to onkeydown event.

 

Image Loading

Once press enter key with focus textbox, the output will be following,

 

Image Loading

Conclusion

The enter key is most important in web application to raise the event than directly click in buttons. Because user always ignore to so many click in web applications, hope this article give to the way idea and save the time approach with enter key event.

Sample Project Source

Download source files -1 kb

 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top