如何使用ASP.NET中的母版页在左侧创建contentplaceholder [英] How to create contentplaceholder on left hand side using master page in ASP.NET
问题描述
你好，
目前我正在使用Master Page.I想要显示3 ContentPlaceHolder，即1为HeaderContent，LeftContent和MainContent.Problem是当我要在LeftContentPlaceHolder中添加一些标签或内容时然后它的内容在子页面中不显示。我想在其所有子页面上修复Leftcontent PlaceHoder的内容。
请检查我的代码。
谢谢。
我的尝试：
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>
推荐答案
它的内容不显示？
内容占位符不应该在您的母版页上有内容。
你需要像你一样为你的占位符分配一个id然后使用在你的子页面中指定要替换的占位符
在MasterPage上你做对了，所以我怀疑这是你的详细信息页面，不包括在内，这是问题是
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>
基于评论的更新，因为你想要做的就是填充你的左手侧面菜单基于ajax，你真的没有任何你必须做的服务器端，至少在页面级别。因此，第一步是删除contentplaceholder，并决定不要将服务器端技术与客户端技术一起使用。
当DOM加载时，接下来在你的母版页底部的脚本标签中启动你的ajax调用你想象的api控制器（因为它将加载最后一个）
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）;
}
("#page-left").html(menuSource); }
（document）.ready（function（）{
//我假设你对ajax很好，因为你的问题与此无关，你知道从哪里获取数据所以这只是一个例子
var menupagecontext =<％：ProtectedStringWithWhatDefinesMenuViewToGet％>;
(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 %>";
这篇关于如何使用ASP.NET中的母版页在左侧创建contentplaceholder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
