Creating default Submit button in ASP.Net 2.0

By:

Harish Ranga, Microsoft MVP

One

of the most annoying things in developing web pages is handling the "Enter

key" for form submission. Enter key has been the favourite way users like

to submit forms. Though we provide Buttons to click on, the easiest and

intuitive way is that, I can enter some text, make some changes and then hit

"Enter" to accomplish my submission.






"Enter" Key is handled in a little tricky way by uplevel browsers like
Internet Explorer, when it comes to ASP.NET.

• 
  
  
  
  If there is a single Textbox and single button, then it becomes straight
  
  forward, the button is submitted. However, the event code doesnt get
  
  executed, though the page postsback.

• If
  
  there are two or more, buttons, then it takes up the first button as the
  
  default button. However, it still doesnt execute the event handler but just
  
  refreshes the page.

You

can supress the Enter key event using Javascript. But this would result in other

undesirable effects like, any Enter key in the form i.e. within Text Area or

basically where large text is entered, would be disabled.

The

earlier work around was to associate a javascript function to each Button to

verify the that the relevant button is submitted upon Enter key.

ASP.NET

2.0 introduces a wonderful work around for this. By simply specifying the "defaultbutton"

property to the ID of the , whose event you want to fire, your

job is done.

The

defaultbutton property can be specified at the Form level in

the form tag as well as at panel level in the definition tag.

The form level setting is overridden when specified at the panel level, for

those controls that are inside the panel.

Also,

the Event Handler for the specified button, fires thereby simulating a true

submit button functionality.

The

following sample code contains a form and 4 panels with each of them containing

different buttons. It can be noticed that for each panel, there is a default

button specified which would trigger the corresponding button's event handler

when "Enter" Key is pressed upon a text changed event.

id="form1" runat="server" defaultbutton="btn1">

ID="txt" runat="server">

ID="Button5" runat="server" Text="Cancel" OnClick="Button5_Click"

/>

ID="btn1" runat="server" Text="Submit" OnClick="btn1_Click"

/>

ID="pnl1" runat="server" defaultbutton="Button1">

ID="TextBox1" runat="server">

ID="TextBox2" runat="server">

ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click"

/>

ID="Panel1" runat="server" defaultbutton="Button2">

ID="TextBox3" runat="server">

ID="TextBox4" runat="server">

ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click"

/>

defaultbutton="Button3">

ID="TextBox5" runat="server">

ID="TextBox6" runat="server">

ID="Button3" runat="server" Text="Button3" OnClick="Button3_Click"

/>

ID="Panel3" runat="server" defaultbutton="Button4">

ID="TextBox7" runat="server">

ID="TextBox8" runat="server">

ID="Button4" runat="server" Text="Button4" OnClick="Button4_Click"

/>

The

corresponding, sample events for the button clicks are

protected

void Button1_Click(object sender, EventArgs e)



{


Response.Write(Button1.Text);


}

protected

void Button2_Click(object sender, EventArgs e)



{


Response.Write(Button2.Text);


}

protected

void Button3_Click(object sender, EventArgs e)



{


Response.Write(Button3.Text);


}

protected

void Button4_Click(object sender, EventArgs e)



{


Response.Write(Button4.Text);


}

protected

void btn1_Click(object sender, EventArgs e)



{


Response.Write(btn1.Text);


}

protected

void Button5_Click(object sender, EventArgs e)



{


Response.Write(Button5.Text);


}

Once

we execute the above functionality, we can notice, the corresponding Buttons'

text are displayed when the Enter key is pressed from within a panel and at the

form level, it fires the btn1

Button's

event.

This

would be a very useful feature in scenarios where we have different sections of

the page and would like to have Enter key fire corresponding submit button

events.