asked on

How to Create a web page with a Common background

hi ,
I am new in creating Web Page.I have created 4 Web Pages which has dynamically created tecxboxes with row names and column names.
As all these four pages have some common features like Login,SignOut,Print,Next Page ,Name etc
I would like to have a common background page for all these four pages.
Somehow similar to this experts exchange page (like this black background ,my account,logout,contact us etc)
I tried with Master page and content page.Is my approach correct?But still my application does not work correctly.I am not getting the content inside the content page.I am making mistake some where.
Can anyone help me with some examples so that I can continue in the right path.

Thanks in advance

kswathi

Write the Class for the body tag with the background. for your master page and for the content write another class the check

.body
{
background-color:#000000;
color:#FFFFFF;
}

.content
{
background-color:#FFFFFF;
color:#000000;
}
Apply the classes to the body and the content class to the child page. and check
hope it helps

Bardobrave

And better yet, if you include those code into a .css file that you attach to your master and content pages through:

<link rel="stylesheet" type="text/css" href="pathToYourFile/yourCssFileName.css" />

Robert Schutt

More in general, if you don't see the content at all, you may need to check your ContentPlaceHolder tags, see for example http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

gery128

Master Page approach is quite correct. You can specify specific error/problem you are getting. So it will help all understand the problem very well.

For now, you can refer this basic hands-on master page article for you to start with:
http://odetocode.com/articles/419.aspx

asudhaa

ASKER

Thanks for the reply.
I tried to follow link and created a master pagehttp://odetocode.com/articles/419.aspx

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FirstPage.master.cs" Inherits="HRdbwebapp.FirstPage" %>

<!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 id="Head1" runat="server">

  <title>Untitled Page</title>

  <link href="~/StyleSheet.css" rel="Stylesheet" type="text/css" />

</head>
<body>
  <form id="form1" runat="server">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
      <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"/>
        <asp:MenuItem NavigateUrl="~/WebForm1.aspx" 
              Text="  Report1  " Value="Report1"/>
        <asp:MenuItem NavigateUrl="~/report2.aspx" 
              Text="  Report2  " Value="Report2"/>
        <asp:MenuItem NavigateUrl="~/report3.aspx" 
              Text="  Report3  " Value="Report3"/>
      </Items>      
    </asp:Menu>
    <div>
      <div id="main">
        <asp:ContentPlaceHolder ID="mainContent" runat="server" />
      </div>
      <div id="right">
      <asp:ContentPlaceHolder ID="sideContent" runat="server" />
      </div>
      <div id="footer">
        <asp:Literal ID="Footer" runat="server" Text="Footer text" />
      </div>
    </div>
  </form>
</body>
</html>

Open in new window

and in my comtent page I have the following code

<%@ Page Title="" Language="C#" MasterPageFile="~/FirstPage.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HRdbwebapp.WebForm1" %>     
<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" runat="server">
    <script type="text/javascript">
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
             {
                alert("Please enter a Numeric value");
                return false;
            }
             return true;
        }
   </script>  
    <style type="text/css">
        .style8
        {
            font-family: "Times New Roman", Times, serif;
        }
        .style23
        {
            width: 118px;
            color: #000000;
            font-size: small;
        }
        .style32
        {
            height: 26px;
            color: #CC3300;
        }
        .style33
        {
            height: 51px;
        }
        .style34
        {
            width: 174px;
            height: 51px;
        }
        .style35
        {
            width: 118px;
            height: 51px;
        }
        .style36
        {
            width: 84px;
            height: 51px;
        }
        </style>
</head>  
<body >
    <form id="form2" runat="server" style="background-color: #CCCCCC">
       <asp:Label ID="Label3" runat="server" 
            style="color: #990000" Text="Label"></asp:Label>
        <asp:Label ID="Label1" runat="server" Enabled="False" EnableViewState="False" 
            Text="Label" Visible="False"></asp:Label>
        <asp:Label ID="Label2" runat="server" Text="Label" Visible="False"></asp:Label>    
        <table style="width:100%; margin-bottom: 0px;">
           <tr><td class="style32" colspan="9" style="text-decoration: blink">
               &nbsp;</td>
</tr>
<tr>
<td><asp:RadioButton ID="Enter" runat="server" AutoPostBack="True" Font-Bold="True" 
                        Font-Italic="True" ForeColor="Black" oncheckedchanged="Enter_CheckedChanged" 
                        Text="Enter" /></td>
<td> <asp:TextBox ID="TextBoxDate" runat="server" Height="22px" Width="121px" 
                        ForeColor="#996600"></asp:TextBox> </td>  
<td class="style23" >
                    Enter the data from</td> 
<td><asp:TextBox ID="TextBoxStart" runat="server" Width="95px" ForeColor="#996600"></asp:TextBox>
                    </td>
<td>to</td> 
<td><asp:TextBox ID="TextBoxEnd" runat="server" Width="95px" ForeColor="#996600"></asp:TextBox>
                </td>
<td> <asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit" 
            Width="70px" BackColor="#00CCFF" Font-Bold="True" Font-Italic="True" />    </td>                        
</tr>
<tr><td class="style32" colspan="9" style="text-decoration: blink">
                    &nbsp;</td>
 </tr>´
       <tr>
                <td class="style33">
     
                    <asp:RadioButton ID="Search" runat="server" 
                        Font-Bold="True" Font-Italic="True" ForeColor="Black" 
                        oncheckedchanged="Search_CheckedChanged" Text="Search" />    
                </td>
                <td class="style34">
                    <asp:DropDownList ID="DropDownList1" runat="server" 
                        DataSourceID="SqlDataSource1" DataTextField="To_Date" 
                        DataValueField="Period_ID" Height="25px" style="margin-left: 0px" 
                        Width="140px">
                    </asp:DropDownList>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                        ConnectionString="<%$XXX %>" 
         SelectCommand="SELECT [Period_ID], [To_Date] FROM [Period] ORDER BY [Period_ID] DESC">
                    </asp:SqlDataSource>              
               </td>
                <td class="style35" >    
        <asp:Button ID="ReloadBtn" runat="server" onclick="ReloadBtn_Click" 
            Text="Reload" Width="70px" BackColor="#00CCFF" Font-Bold="True" Font-Italic="True" />   
                </td>
                <td class="style36">       
                    <asp:Button ID="ReSubmitBtn" runat="server" onclick="ReSubmitBtn_Click" 
            Text="ReSubmit" BackColor="#00CCFF" BorderColor="White" Font-Bold="True" 
                        Font-Italic="True" ForeColor="Black" Width="70px" />      
                </td>       
            </tr>
        </table>
       &nbsp;<asp:Panel ID="Panel1" runat="server" Height="1194px" Width="766px">
            <span class="style8"></span>&nbsp;<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>         
                   </asp:Panel>
    </form>   
</body>
</html>  
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="sideContent" runat="server">
</asp:Content>

Open in new window

I have a Masterpage with has three content pages(report1,report2,report3) and the contents of the three reports in the three content page.In the report page I have dynamically created textboxes .The values entered here I would like to write into the database.

I tried with the code below but I get the error "A page can have only one server-side Form tag"

As I am new to ASP.NET I not sure how to clear this error and get the content with the Master page background for all the reports.
But in the conten Page if i place Some text paragraph alone it is working.

Robert Schutt

You're doubling thing up now, the "sideContent" is in the master page but is repeated at the bottom of the "contentPage". I think the last one should be deleted. The tags html, head, body and form should only appear in your master page, only keep in the contentPage what needs to be at that point in the page (inside div 'main'), it's a piece of html, not a complete page.

gery128

Okay.

You need to remove following lines from WebForm1.aspx:
<body>
<form id="form2" runat="server" style="background-color: #CCCCCC">
</form>
</body>
</html>

The concept of master page is like, combining common interface/required functionalities and content pages to make web site's look standard. So Body, Form tags defined in Master Page is automatically combined to your webForm1.aspx when parsed through asp.net engine and presented at Browser.

asudhaa

ASKER

Thank you.As you said I have now only the html ,head body and form only in the master page and the content page has only thecontent needed.
But now in my content page (Report1.aspx) The corresponding Report1.aspx.cs I have the error the name form1 does not exist in the current context.
How can I call the form1 in the Master page into the Report1.aspx.cs ?or is there any other way to achieve this

Robert Schutt

In a function like SubmitBtn_Click you can use the form elements directly:

Me.TextBoxDate.Text

Open in new window

I'll include an image to show it works in the debugger:

gery128

From your comment, I understand that you want to access master page's control on content page.

for that you can either create prorperty of that control in master page or use MasterPage.FindControl("txtName") method on content page.

Both are explained in following link:
Access ASP.NET Master Page controls from Content Page

asudhaa

ASKER

Thanks a lot for the reply.I have started to understand the Master and content pages.But still I have some problems to get into the correct way.
Actually in the Master Page I have

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FirstPage.master.cs" Inherits="HRdbwebapp.FirstPage" %>

<!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 id="Head1" runat="server">

  <title>Untitled Page</title>

  <link href="~/StyleSheet.css" rel="Stylesheet" type="text/css" />

</head>
<body>
  <form id="form2" runat="server">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
      <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"/>
        <asp:MenuItem NavigateUrl="~/WebForm1.aspx" Text="  Report1  " Value="Report1"/>
        <asp:MenuItem NavigateUrl="~/report2.aspx" Text="  Report2  " Value="Report2"/>
        <asp:MenuItem NavigateUrl="~/report3.aspx"  Text="  Report3  " Value="Report3"/>
      </Items>      
    </asp:Menu>
    <div>
      <div id="main">
        <asp:ContentPlaceHolder ID="mainContent" runat="server" />
      </div>
      
    </div>
  </form>
</body>
</html>

Open in new window

and in the content page I have

<%@ Page Title="" Language="C#" MasterPageFile="~/FirstPage.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HRdbwebapp.WebForm1" %>
    
<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" runat="server">

         <asp:Label ID="Label3" runat="server" 
            style="color: #990000" Text="Label"></asp:Label>
        <asp:Label ID="Label1" runat="server" Enabled="False" EnableViewState="False" 
            Text="Label" Visible="False"></asp:Label>
        <asp:Label ID="Label2" runat="server" Text="Label" Visible="False"></asp:Label>
       
        <table style="width:100%; margin-bottom: 0px;">
     <tr>

<td><asp:RadioButton ID="Enter" runat="server" AutoPostBack="True" Font-Bold="True" 
                        Font-Italic="True" ForeColor="Black" oncheckedchanged="Enter_CheckedChanged" 
                        Text="Enter" /></td>
<td> <asp:TextBox ID="TextBoxDate" runat="server" Height="22px" Width="121px" 
                        ForeColor="#996600"></asp:TextBox> </td>  
<td  >
                    Enter the data from</td> 
<td><asp:TextBox ID="TextBoxStart" runat="server" Width="95px" ForeColor="#996600"></asp:TextBox>
                    </td>
<td>to</td> 
<td><asp:TextBox ID="TextBoxEnd" runat="server" Width="95px" ForeColor="#996600"></asp:TextBox>
                </td>
<td> <asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit" 
            Width="70px" BackColor="#00CCFF" Font-Bold="True" Font-Italic="True" />    </td>  
<td>  <asp:Button ID="ClearBtn" runat="server" onclick="ClearBtn_Click" 
                        Text="Clear" BackColor="#00CCFF" BorderColor="White" Font-Bold="True" 
                        Font-Italic="True" ForeColor="Black" Width="70px" /></td> 
                        
<td> <asp:Button ID="PrintBtn" runat="server" BackColor="#00CCFF" Font-Bold="True" 
                        Font-Italic="True" onclick="PrintBtn_Click1" Text="Print" Width="70px" />
                        </td>                      
<td><asp:Button ID="NxtPageBtn" runat="server" onclick="NxtPageBtn_Click" 
            Text="Next Page" Width="97px" BackColor="#00CCFF" Font-Bold="True" Font-Italic="True" 
                        style="margin-left: 19px" /></td>
<td> <asp:Button ID="SignOutBtn" runat="server" onclick="SignOutBtn_Click" 
            Text="Sign Out" Height="26px" style="margin-left: 0px" Width="70px" 
                        BackColor="#00CCFF" Font-Bold="True" Font-Italic="True" /></td>
                        
</tr>
         <tr>
                <td >
                        <asp:RadioButton ID="Search" runat="server" AutoPostBack="True" 
                        Font-Bold="True" Font-Italic="True" ForeColor="Black" 
                        oncheckedchanged="Search_CheckedChanged" Text="Search" />
                    
                </td>
                <td >
                    <asp:DropDownList ID="DropDownList1" runat="server" 
                        DataSourceID="SqlDataSource1" DataTextField="To_Date" 
                        DataValueField="Period_ID" Height="25px" style="margin-left: 0px" 
                        Width="140px">
                    </asp:DropDownList>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:XXX %>"      
                        
                        SelectCommand="SELECT [Period_ID], [To_Date] FROM [Period] ORDER BY [Period_ID] DESC">
                    </asp:SqlDataSource>
                    
                </td>
                <td  >
      
        <asp:Button ID="ReloadBtn" runat="server" onclick="ReloadBtn_Click" 
            Text="Reload" Width="70px" BackColor="#00CCFF" Font-Bold="True" Font-Italic="True" />
      
                </td>
                <td >
       
                    <asp:Button ID="ReSubmitBtn" runat="server" onclick="ReSubmitBtn_Click" 
            Text="ReSubmit" BackColor="#00CCFF" BorderColor="White" Font-Bold="True" 
                        Font-Italic="True" ForeColor="Black" Width="70px" />
       
                </td>
               
            </tr>
        </table>
 REPORT 1 
 <asp:Panel ID="Panel1" runat="server" Height="1194px" Width="766px">
                               <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 
        
            *Additional information needed due to german regulations
        </asp:Panel>

</asp:Content>

Open in new window

and in the Webform1.cs file

     public void CreateDynamicTable(int countlist, int countcollist)
        {
...
else if (i != 0)
                    {
                        TextBox tb = new TextBox();
                        tb.ID = "textbox" + textbox_counter.ToString();
                        tb.Attributes.Add("runat", "Server");
                        tb.Attributes.Add("onkeypress", "return isNumberKey(event);");
                        
                        tb.Height = 18;
                        tb.Width = 75;
                        string[] stringArray = (string[])MainCategorieList.ToArray(typeof(string));
                        int s = Array.IndexOf(stringArray, RowList[i].ToString());
                        //Response.Write("The values to be skipped are " + s);
                        if ((s != -1)|| (j == (tblCols-1)))
                        tb.ForeColor = System.Drawing.Color.Blue;
                     
                       form2.Controls.Add(tb);
                        // Add the control to the TableCell
                        tc.Controls.Add(tb);
                        // Add the TableCell to the TableRow
                        tr.Cells.Add(tc);
                        textbox_counter = textbox_counter + 1;
                        //Response.Write(tb.ID);
                        //tb.Attributes.Add("onclick", "UpdateTotal();");
                        int Period_Check = Convert.ToInt32(Label2.Text);
                                              
                    }

Open in new window

In the content Page I try to create dynamic textboxes .But now I have written the code for this only in the content page (WebForm1.aspx).Now as I said you early I would like to create the textboxes in the form2 which is in the MasterPage now.
form2.Controls.Add(tb); --here I get the error

The name form2 does not exist in the content

In the form2 I would like to add dynamic textboxes only in my content page.
Should I write any relevant code in the Master Page?
As you said
MasterPage.FindControl("txtName")
Here I tried to use
MasterPage.FindControl("form2")
Page.Master.FindControl("form2") etc but still it is not working.
Is there some code that i get the form2 into the content page(Webform1.aspx.cs) .
Or should I write all the relevant codes in the Master Page also?

ASKER CERTIFIED SOLUTION

gery128

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

asudhaa

ASKER

Thanks lot I got the content page with the Master page finally..

gery128

You are welcome :)

asudhaa

ASKER

But now when i click my button functions I get this error

Object reference not set to an instance of an object.

near the below code
controlid1 = "textbox" + counter1.ToString();
TextBox tb = FindControl(controlid1) as TextBox;
if (tb.Text == String.Empty)

is that due to the replacement of form2.FindControl(controlid1) as TextBox;
in to FindControl(controlid1) as TextBox;

Since this is relevant to this continution I am posting here .I wil also post this question in a new thread