RSS feed
TwitterUsing multiple forms on an ASP.NET web forms page
I came across this simple technique while watching Building great standards based websites for the big wide world with ASP.NET 4.0.
The cool thing about being able to have multiple forms on the same page is that you don’t have to use JavaScript to fix the default button problem, or use unnecessary ASP.NET web controls or logic on the server (like the Response.Redirect method). The drawback, for some, is that you cannot have the forms inside the form (web form) with the runat=”server” attribute, which means that you cannot use all of the ASP.NET web controls.
Example
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <fieldset> <legend>ASP.NET web form (POST)</legend> <asp:Label runat="server" AssociatedControlID="txtSearch">Name: </asp:Label><asp:TextBox runat="server" ID="txtSearch" /><asp:Button runat="server" ID="btnSend" Text="Search" OnClick="btnSend_Click" /> </fieldset> </form> <form method="get" action="Search.aspx"> <fieldset> <legend>Regular HTML form using GET</legend> <label for="name-text">Name: </label><input type="text" id="name-text" name="q" /><input type="submit" value="Search" /> </fieldset> </form> <form method="post" action="Search.aspx"> <fieldset> <legend>Regular HTML form using POST</legend> <label for="name-text2">Name: </label><input type="text" id="name-text2" name="q" /><input type="submit" value="Search" /> </fieldset> </form> </body> </html>
using System; public partial class _Default : System.Web.UI.Page { protected void btnSend_Click(object sender, EventArgs e) { Response.Redirect(string.Format("Search.aspx?q={0}", txtSearch.Text)); } }
Search.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label runat="server" ID="lblResult" /> </div> </form> </body> </html>
using System; using System.Web; public partial class Search : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request.QueryString["q"])) { lblResult.Text = HttpUtility.HtmlEncode(Request.QueryString["q"]); return; } // For the regular html form POST method lblResult.Text = HttpUtility.HtmlEncode(Request.Form["q"]); } }
Related Posts:
- ASP.NET Validation and jQuery
- Part 5: Creating the search page – Create an EPiServer site from scratch
- Extending search field with suggestion box
- Detecting Ajax requests on the server
- ASP.NET web forms and jQuery Thickbox plugin
Hi Frederik,
Thanks for watching the video!
You note that not being able to use some server controls is a drawback. Many of them do actually work outside of your server form, with a simple tweak.
A good example is the DropDownList control. It’s a very useful control, even in client forms, because you can data bind the items collection and the selected value easily.
To allow it to render, you need to add a simple override in your page:
protected override VerifyRenderingInSearchForm(Control control)
{
return true;
}
This will then allow you to place those controls anywhere in your markup.
Hope that helps,
Tatham Oddie
http://tath.am
Thanks for sharing Tatham!
Frederik
Oops – I just got an email from a reader who found a few mistakes in my comment. The method is called VerifyRenderingInServerForm, not VerifyRenderingInSearchForm as I mistyped.
The method is on the page.
http://msdn.microsoft.com/en-au/system.web.ui.page.verifyrenderinginserverform.aspx
Just override it with an empty method body, for example:
public override void VerifyRenderingInServerForm(Control control) { }
The default base implementation throws an exception if the control is not within the server form. This override prevents that behaviour.
Tatham Oddie
http://tath.am