0

How to implement two forms one in header and other in body of an ASP.net page with one master page, or how can I display the same form at both the places with only one form?

John
  • 4,658
  • 2
  • 14
  • 23
Shakti
  • 261
  • 1
  • 4
  • 8
  • What exactly are you trying to do? It might help if you add some code. You can have multiple buttons within an asp.net webform, each of which targets a different on click event in the codebehind, which can effectively be the same as having multiple forms. Alternatively you can always just use ordinary html forms which don't have the `runat="server"` attribute. You can still retrieve values using `Request.Form` in the codebehind of the target page – John May 15 '16 at 15:03

1 Answers1

1

As to your question:

How to implement two forms one in header and other in body of an ASP.net page with one master page, or how can I display the same form at both the places with only one form?

If you need to choose: Concentrate on the second part.

The general method in Web Forms is to have only one <form> in your page, which is .NET's default <form> that surrounds all the content of your .aspx/.master page.

As the rules of HTML state: You cannot have two nested forms in an HTML page.

It means that if you want to have multiple <form> tags in your page, you will have to use it outside of .NET's default <form>.

Basically it means that all of the forms outside of .NET's one will not be part of the View State and you will not be able to use ASP.NET web controls.

However, if you are still considering the first method, you can read some more about it here:

Can we use multiple forms in a web page?

And you can see a really good example implementing it here:

Using multiple forms on an ASP.NET web forms page

Display the same form at two places

Basically, it is an essential part of Web Forms and is used many times.

You can create as many forms as you like by associating as many <asp:Button> elements as you like to different Click events.

To make two forms in the master, one in the header and one in the body:

  1. Put the form contents in the two sections and use two different submit button handlers in the code behind (See example below)

  2. Put in your MasterPage multiple ContentPlaceHolder elements. Use one for each place you would like to load content from your .aspx file.

  3. In your .aspx refer to the ContentPlaceHolder elements with the corresponding ContentPlaceHolderIDs

In this example you can see one form in the Header section and another in the Body section like you wanted:

MasterPageTwoSections.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPageTwoSections.master.cs" Inherits="MasterPageTwoSections" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style>
    header {
    background-color:red;
    }
    .body {
    background-color:green;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
    <header>
        <asp:ContentPlaceHolder id="HeaderPlaceHolder" runat="server">
            <%--Placeholder for the pages--%>
        </asp:ContentPlaceHolder>
        <h5>
            This is form #1 from the master
        </h5>
        <asp:TextBox runat="server" ID="txtFirstForm"></asp:TextBox>
        <asp:Button runat="server" ID="btnFirstFormSubmit" OnClick="btnFirstFormSubmit_Click" 
            Text="Submit first form" />
    </header>
    <section class="body">
        <asp:ContentPlaceHolder id="BodyPlaceHolderBeforeForm" runat="server">
            <%--Placeholder for the pages--%>
        </asp:ContentPlaceHolder>
        <h5>
            This is form #2 from the master
        </h5>
        <asp:TextBox runat="server" ID="txtSecondForm"></asp:TextBox>
        <asp:Button runat="server" ID="btnSecondFormSubmit" OnClick="btnSecondFormSubmit_Click" 
            Text="Submit first form" />
        <asp:ContentPlaceHolder id="BodyPlaceHolderAfterForm" runat="server">
            <%--Placeholder for the pages--%>
        </asp:ContentPlaceHolder>
    </section>
</div>
</form>
</body>
</html>

MaterPageTwoSections.master.cs

Notice the two submit handlers:

using System;

public partial class MasterPageTwoSections : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnFirstFormSubmit_Click(object sender, EventArgs e)
    {

    }

    protected void btnSecondFormSubmit_Click(object sender, EventArgs e)
    {

    }

}

FirstPage.aspx

Notice Content2 refers to HeaderPlaceHolder in the MasterPage.Content3 and Content4 refer to BodyPlaceHolderBeforeForm and BodyPlaceHolderAfterForm

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPageTwoSections.master" 
    AutoEventWireup="true" CodeFile="FirstPage.aspx.cs" Inherits="FirstPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderPlaceHolder" Runat="Server">
    <p>
        This header content is from the FirstPage.aspx
    </p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="BodyPlaceHolderBeforeForm" Runat="Server">
    <p>
        This body content is from the FirstPage.aspx
    </p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="BodyPlaceHolderAfterForm" Runat="Server">
    <p>
        This body content is from the FirstPage.aspx
    </p>
</asp:Content>
Community
  • 1
  • 1
Jaqen H'ghar
  • 16,186
  • 8
  • 49
  • 52
  • I want to have two
    tag, one in header and other in the main body. When I implemented that it was throwing an error that "An asp.net page can have only one form with runat='server' ".
    – Shakti May 14 '16 at 11:38
  • @shakti This is because in Web Forms you cannot use the `
    ` tag at all. An aspx and/or master pages contain `
    ` tag already that surrounds all the content. When you put `
    ` tag inside them it causes a nested `
    ` situation which is forbidden in html. I will edit my answer and put this too
    – Jaqen H'ghar May 14 '16 at 11:42
  • @Idanb This isn't quite true. What is true is that you can only have one form with server side controls, and it's common practice to have it enclosing everything inside the body section of the aspx page. If you want however you can have multiple forms as long as only one of them has the `runat="server"` attribute, and obviously you can only use client side html elements inside the other forms – John May 15 '16 at 14:49
  • @John as I understood the question, it wasn't the issue here. My answer referred to the normal Web Forms situation where you want to put everything inside the good ol form, and enjoy the framework's features. However, you are right. There is a bypath. I edited my answer to make it more clear and give it its honor. Thank you for the note – Jaqen H'ghar May 15 '16 at 17:12
  • @Idanb The original question is a bit ambiguous, as are a lot on this site. You deserve an upvote for the effort you've put into the answer – John May 15 '16 at 18:40