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
asudhaaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

kswathiCommented:
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
0
BardobraveCommented:
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" />
0
Robert SchuttSoftware EngineerCommented:
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 
0
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

gery128Commented:
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

0
asudhaaAuthor Commented:
Thanks for the reply.
I tried to follow link and created a master page
http://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.
0
Robert SchuttSoftware EngineerCommented:
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.
0
gery128Commented:
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.

 
0
asudhaaAuthor Commented:
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

0
Robert SchuttSoftware EngineerCommented:
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:
 form element text with debug info
0
gery128Commented:
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
0
asudhaaAuthor Commented:
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?





0
gery128Commented:
instead of using:
form2.Controls.Add(tb);

you can use directly:  
Controls.Add(tb);

Remember MasterPage.FindControl is for getting controls of MasterPage. While form is not a control, you can directly add controls to content page by Controls.Add()
No need of any code in master page for adding controls to content page.
hope it helps,
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
asudhaaAuthor Commented:
Thanks lot I got the content page with the Master page finally..
0
gery128Commented:
You are welcome :)
0
asudhaaAuthor Commented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.