CODEWITHSUNDEEP
c#asp.net
Shakti
Shakti

Reputation: 271

Implement two forms in an ASP.net page with one master page, or display the same form at two places

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?

Upvotes: 0

Views: 4919

Answers (1)

Jaqen H'ghar
Jaqen H'ghar

Reputation: 16804

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>

Upvotes: 1

Related Questions