IntroductionIn 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. ImplementationsWay 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> 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, Way 2:Use the panel and defaultButtonIn 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, 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 Way 3: Using client script to perform enter key eventIn 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. Once press enter key with focus textbox, the output will be following, ConclusionThe 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 SourceDownload source files -1 kb |