Create Two Forms on an ASP.NET Page

The other day I was visiting www.cars.com doing some UI research. Since I have built a couple of sites with the same functionality as this site, I want to see if there is anything cool they have done. The one thing I took away from my visit was the use of two distinct forms to perform targeted searches on New and Used cars. From a fundamental HTML point of view, this is pretty basic stuff, but in ASP.NET this can be a bit tricky.

What makes if even more interesting from an ASP.NET perspective is each form could easily implement the default button to allow the user to hit their ENTER key and be directed to the correct search results. So I spent a few seconds deciding how I could accomplish this same feat in ASP.NET.

The Panel control and Cross-Page Postback helps us tackle this requirement. To create this demonstration you will need to create three pages, one with the two forms and a page to receive each search.

Setting Up Two Forms on an ASP.NET page.On the first page place two Panel controls and add a simple layout that includes a TextBox and a Button control. Set the each Panel's DefaultButton property to the Id of the Button control contained in the Panel. For example the first Panel should be set to "Button1" and the second Panel to "Button2". This will cause the DefaultButton to be pointed to the specific button on the Panel's layout when focus is set to anything inside the Panel.

Now we will leverage the ASP.NET 2.0 feature of Cross-Page Postbacks to cause each button to post to the appropriate result page. In my demo's case just a simple page that sets a Label's text value with the contents of the TextBox control on the corresponding Panel. For example if you enter a value in the second's Panel's Textbox and hit ENTER you will be taken to that results page. The value you entered in the TextBox on the previous page will be echoed through the Label. You will also see some text I put on each page to visual indicate which page we found our way to.

The only real downside to this is you can not use this to post to a third party site, but generally this will not be a problem.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel