CODEWITHSUNDEEP
asp.netmaster-pages
Ben Clarke
Ben Clarke

Reputation: 256

Using MasterPages in ASP.NET

I have a few pages on my application now and I am going to start using a master page to low the amount of code in my HTML. So I created a 'Web form using master page' and at the moment I have a menu bar I have created in there:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="PersonnelMasterPage.master.cs" Inherits="bSimplex.Personnel.PersonnelMasterPage" %>


    <asp:ContentPlaceHolder ID="cnt_MenuBar" runat="server">
            <div class="bsimplex header-bar left">
        <div class="header-context clearfix header-label">
            <asp:Image ID="bsimplexPTLogo" runat="server" CssClass="small-logo" ImageUrl="~/Images/tracker logoOnly.png" />
            <label class="configurationlbl">Personnel Tracker</label>
        </div>
        <div class="menubarbest">
            <ul id="nav">
                <li  class="current"><a href="bPersonnelTrackerDashboard.aspx" >Home</a></li>
                <li><a href="#">Manager</a>
                    <ul>
                        <li><a href="#">Rota</a></li>
                        <li><a href="#">Holiday Requests</a></li>
                    </ul>
                </li>
                <li><a href="#">Absences</a>
                    <ul>
                        <li><a href="bSicknessForm.aspx">Sickness</a></li>
                        <li><a href="bLatenessForm.aspx">Lateness</a></li>
                        <li><a href="bMedicalLeaveForm.aspx">Medical Appointment</a></li>
                        <li><a href="OtherMedical.aspx">Other</a></li>
                    </ul>
                </li>
                <li><a href="#">Reports</a>
                    <ul>
                        <li><a href="#">Attendance Record</a></li>
                        <li><a href="#">Rota</a></li>
                    </ul>
                </li>
                <li><a href="Admin/Administration.aspx">Admin</a></li>
        </div>
    </div>
    </asp:ContentPlaceHolder>

Then on the Web Form i just created i have added this Content Holder:

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

Firstly, nothing is showing on my page and I am wondering have I done something wrong?

Secondly, I have CSS styles for this menu bar will these stay the same or because I have moved into Master page will they need to be changed?

Upvotes: 2

Views: 1893

Answers (3)

Ben Harrison
Ben Harrison

Reputation: 2219

It appears you want to share the menu across multiple pages, so I would try this:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="bsimplex header-bar left">
        <div class="header-context clearfix header-label">
            <asp:Image ID="bsimplexPTLogo" runat="server" CssClass="small-logo" ImageUrl="~/Images/tracker logoOnly.png" />
            <label class="configurationlbl">Personnel Tracker</label>
        </div>
        <div class="menubarbest">
            <ul id="nav">
                <li  class="current"><a href="bPersonnelTrackerDashboard.aspx" >Home</a></li>
                <li><a href="#">Manager</a>
                    <ul>
                        <li><a href="#">Rota</a></li>
                        <li><a href="#">Holiday Requests</a></li>
                    </ul>
                </li>
                <li><a href="#">Absences</a>
                    <ul>
                        <li><a href="bSicknessForm.aspx">Sickness</a></li>
                        <li><a href="bLatenessForm.aspx">Lateness</a></li>
                        <li><a href="bMedicalLeaveForm.aspx">Medical Appointment</a></li>
                        <li><a href="OtherMedical.aspx">Other</a></li>
                    </ul>
                </li>
                <li><a href="#">Reports</a>
                    <ul>
                        <li><a href="#">Attendance Record</a></li>
                        <li><a href="#">Rota</a></li>
                    </ul>
                </li>
                <li><a href="Admin/Administration.aspx">Admin</a></li>
        </div>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="cnt_Body" runat="server"></asp:ContentPlaceHolder>
    </div>
</body>

Then on the WebForms page, do something like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/Personnel/PersonnelMasterPage.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="bSimplex.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cnt_Body" runat="server">
    <h1>Sickness Form</h1>
    <p>Please fill out the following sickness form...</p>
</asp:Content>

Upvotes: 2

mason
mason

Reputation: 32694

On your master page, don't put content inside the ContentPlaceHolder. The CPH is an area where you want to put child page content (using the Content control).

On your master page, if you put content inside a ContentPlaceHolder, it will be overridden if you add a corresponding Content control on the child page. So most of the time you don't put anything inside the CPH on the master page. The exception is if you want some "default" content that you might override on certain child pages.

By the way, your top level master page should contain the basic layout of your site, and all the required tags (ex: <html><head><title><body> etc). Then, you put those ContentPlaceHolders in places where you want the child page to add its content.

Your CSS should be fine without changes, although you'll want to link to it from the master page instead of the child pages.

Upvotes: 3

grimmus
grimmus

Reputation: 513

The placeholder element is an area that will vary from page to page. I don't think you'd want the menu bar to vary. So, place the menu bar code before the placeholder in the masterpage or better yet inside a user control

Upvotes: 1

Related Questions