Introduction: In this article I am going to share the trick to set focus in specific textbox on page load and set specific button as default button when pressing enter key.
Description: When there are multiple input controls (textbox) and multiple buttons and we want to set focus in specific textbox. For example we have a search option in web page having a textbox as shown in above image and we want to trigger search button on enter key press then we can achieve this using any of the following three ways:
- By setting DefaultFocus and DefaultButton property in form tag.
- By setting DefaultFocus and DefaultButton property through code in code file.
- By placing all the controls in Panel control and set its DefaultButton property
Implementation: Let’s create an example page to see the all the three tricks in action one by one
HTML Source Code:
Design the page as shown in image by copying the following HTML Source
Setting DefaultFocus and DefaultButton property in form tag:
Check below HTML Source codehighlighted in yellow color.
Check below HTML Source codehighlighted in yellow color.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" DefaultFocus="txtSearch" DefaultButton="btnSearch">
<div>
<fieldsetstyle="width:230px;">
<legend>
Set Default Focus and Default Button</legend>
<table>
<tr><td><asp:TextBoxID="txtSearch" runat="server" ></asp:TextBox></td>
<td><asp:ButtonID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /></td>
<td><asp:ButtonID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /></td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
- In the code file write as:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void btnSearch_Click(objectsender, EventArgs e)
protected void btnSearch_Click(objectsender, EventArgs e)
{
//your search code here
}
protected void btnCancel_Click(objectsender, EventArgs e)
{
//your cancel code here
}
}
Setting DefaultFocus and DefaultButton property through code in code file as:
protected void Page_Load(object sender, EventArgs e)
{
this.form1.DefaultFocus = txtSearch.ClientID;
this.Form.DefaultButton = btnSearch.UniqueID;
}
Placing all the controls in Panel control and setting its DefaultButton property:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:PanelID="Panel1" runat="server" DefaultButton="btnSearch">
<fieldsetstyle="width:230px;">
<legend>
Set Default Focus and Default Button
</legend>
<table>
<tr><td><asp:TextBoxID="txtSearch" runat="server" ></asp:TextBox></td>
<td><asp:ButtonID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /></td>
<td><asp:ButtonID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /></td>
</tr>
</table>
</fieldset>
</asp:Panel>
</div>
</form>
</body>
</html>
Note: we can just set DefaultButton property in panel and because there is no DefaultFocus property. One point to note is that DefaultButton will only work if the focus is in input control i.e. Textbox. So we need to set focus in textbox also to make default button work as:
- In page load event of code file write as:
protected void Page_Load(object sender, EventArgs e)
{
//Set default focus in Search textbox
this.Form.DefaultFocus = txtSearch.ClientID;
//or you can also set focus in search textbox as:
//txtSearch.Focus();
}This is all about setting DefaultButton for enter key press and DefaultFocus in textbox on page load in asp.net
No comments:
Post a Comment