How to create contentplaceholder on left hand side using master page in ASP.NET

Question

0.00/5 (No votes)

See more:

Hello,
Currently I am working with Master Page.I want display 3 ContentPlaceHolder i.e 1 for HeaderContent,LeftContent and MainContent.Problem is that when i am going to add some label or content in LeftContentPlaceHolder then its Content does not dispaly in child pages.I want fixed content of Leftcontent PlaceHoder on all its child page.

Please check my code.
Thanks.

What I have tried:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PayrollContributionDemo.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
 <asp:ContentPlaceHolder ID="HeadContent" runat="server">
   
    </asp:ContentPlaceHolder>
      <style type="text/css">
        div.page
        {
            float: left;
            width: 100%;
            background:#ffc;
            margin-left:30PX;
        }
        div#main
        {
            float: left;
          
            width:  100%;
            position: relative;
            margin-left:30PX;
            text-align:center;
            height:150PX;
        }
        div#page-left
        {
            float: left;
            width: 30%;
             margin-left:30PX;
             position:;
            
        }
        div#page-right
        {
            float: left;
            width: 0PX;
           
        }
        div#page-middle
        {
            float: left;
            margin: 0 auto;
            width: 60%;
            
        }
          #form1
          {
              width: 1018px;
          }
    </style>
</head>
<Body>
 <div class="page">
            <div id="main">
            <div style="border-style: Solid; border-color: inherit; border-width: 1PX; width:80%; float:left;height:146px; margin-right: 0px;">
           
                <h1>
                    J.Kumar InfraProjects Ltd.
                </h1>
                </div>
               
               <div style="border-style: Solid; border-color: inherit; border-width: 1PX;padding-top:100PX;width:15%; float:left;height:48px;">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
                </div>
         
           </div>
          
        </div>
                <form id="form1" runat="server">
                <div id="page-left">
                   <asp:ContentPlaceHolder ID="leftContent" runat="server">
                       
                       This is My Left Page
                       </asp:ContentPlaceHolder>
                </div>
                <div id="page-middle">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server">Body</asp:ContentPlaceHolder>
                </div>

  </form>
       </body>
</html>

Posted 21-Aug-17 21:05pm

SujataJK

Updated 21-Aug-17 21:24pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Nielsen - getCore · Answer 1 · 2017-08-21T21:24:00

It's content does not display?
The content placeholder should not have content on your masterpage.

You need to assign an id to your placeholders like you did and then use that in your child pages to designate what placeholder to replace

on MasterPage you got it right, so i suspect it's your details page which are not included, which is where the problem is

<div id="page-left">
   <asp:ContentPlaceHolder ID="leftContent" runat="server">
       
       This text will be replaced
   </asp:ContentPlaceHolder>
</div>

And then on your details pages, designate what placeholder to address

<asp:Content runat="server" ContentPlaceHolderID="leftContent">
   <p>I'm showing in the left placeholder!</p>
</asp:Content>

An update based on comments, since what you're wanting to do is populate your lefthand side menu based on ajax, you really don't have anything you have to do server side, at least on a page level. So step one is to remove the contentplaceholder and decide not to want to use a server side technology with a clientside one that way.

Next up when the DOM has loaded, startup your ajax call to your presumably api controller in a scripts tag in your masterpage bottom (as that will load the last)

function TheResultReadyFunction(data){
    var menuSource = 'No really here you construct the menu based on menu data';
    //Construct your menu based on data returned and assign it to menuSource
    $("#page-left").html(menuSource);
}

$(document).ready(function(){
//I Presume you're good with ajax as your question is not about that and you know where to get your data so this is just an example
var menupagecontext = "<%: ProtectedStringWithWhatDefinesMenuViewToGet %>";
     $.getJSON("API/GetAMenu/?request=" + menupagecontext)
               .done(TheResultReadyFunction);

Remember Ajax is a clientside technology for issueing http get's and posts outside your page lifecycle. Asp.Net master/ detail technology is a server side abstraction allowing you to reuse code across (details) pages.

You can injext menu to a details page's masterpage controls too, but then you won't need ajax and it will not be dynamic inherently without combining technologies which for various reasons is not recommended imo.