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.
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.
|
<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.
|
