Using the DefaultButton Property of a Panel in ASP.NET

In this tutorial, we will cover how to use the DefaultButton attribute on the Panel control. This attribute allows the user to press enter on a page with multiple forms. This attribute can be extremely useful for frequent or easily confused visitors.

It isn't uncommon for a webpage to have multiple forms. Your front page may have a voting form and email newsletter signup form. Without separating each form with the Panel control, the application will choose the first button to submit when the user hits the enter key. This could accidently confuse visitors by submitting the wrong form or entering in the wrong information. The defaultButton attribute is an important setting to define.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

First you can start a new Web Application in Visual Studio 2008. We are going to create a form. This form is going to contain a header, TextBox, and DropDownList control. The TextBox will be used to collect the user's name and the DropDownList will allow the user to select which state they live in. This form will be placed inside of its own Panel control. The defaultButton attribute needs to be set to the submit Button's ID value. This will force the application to use that submit button if the user chooses to press enter instead of clicking the actual button.

<asp:Literal ID="litStatus" runat="server"></asp:Literal> <asp:Panel ID="profilePnl" runat="server" DefaultButton="btnSubmit">      <h2>Edit Profile Information</h2>      Name: <asp:TextBox ID="txtName2" runat="server" /><br />      State: <asp:DropDownList ID="ddState2" runat="server">           <asp:ListItem Text="Choose a state" Value="0" Selected="True" />           <asp:ListItem Text="Florida" Value="1" />           <asp:ListItem Text="California" Value="2" />           <asp:ListItem Text="Texas" Value="3" />           <asp:ListItem Text="New York" Value="4" />      </asp:DropDownList><br />      <asp:Button UseSubmitBehavior="true" ID="btnSubmit" Text="Submit" runat="server" onclick="btnSubmit_Click" /> </asp:Panel>

Notice the Literal control we placed before the Panel control. We will make use of this control later in the tutorial.

For tutorial purposes, we will place another form on the same page. This form will contain 2 TextBox controls. One TextBox control will be used for an email address. The second TextBox control will be used to contain the message to be emailed to the email address provided. The Height and Columns attributes are defined to make the TextBox large enough for the user to enter in multiple lines of text. Remember to set the DefaultButton attribute for this Panel control to the correct Button control.

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

<asp:Panel ID="emailPnl" runat="server" DefaultButton="btnSubmit2">      <h2>Send an Email</h2>      Email: <asp:TextBox ID="txtEmail" runat="server" /><br />      Message: <asp:TextBox Height="60" Columns="40" ID="txtMsg" runat="server" /><br />      <asp:Button UseSubmitBehavior="true" ID="btnSubmit2" Text="Submit" runat="server" onclick="btnSubmit2_Click" /> </asp:Panel>

Now to verify that the defaultButton attribute works as specified, we will need to program each button accordingly. Go to the design view and double click the button for the first form. Now you should have a new sub in the class behind your aspx file. In this sub we are going to use the Literal control placed at the top of the aspx page earlier in the tutorial. Set the control text to notify the user that the profile form was submitted. In this tutorial, we are concentrating on the defaultButton attribute, so we won't program anything else for the button to do at this time.

//C# protected void btnSubmit_Click(object sender, EventArgs e) {      litStatus.Text = "You submitted the profile form."; } protected void btnSubmit2_Click(object sender, EventArgs e) {      litStatus.Text = "You submitted the email form."; }

//VB.NET Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)      litStatus.Text = "You submitted the profile form." End Sub Protected Sub btnSubmit2_Click(ByVal sender As Object, ByVal e As EventArgs)      litStatus.Text = "You submitted the email form." End Sub

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

Notice that we copied the same steps as the previous button for the email submit button. The only item that needs to be changed is specifying which form was submitted. Now you can test the script by typing in your name and selecting your state then pressing the enter key. The Literal control should tell you that you've submitted the profile form.

Looking for more ASP.NET Database Tutorials? Click Here!