asp.net 网站显示母版页内容无效
asp.net website display masterpage content not woring
我正在尝试创建一个 asp.net 网站,并且我正在使用记事本++,所以没有自动设置选项,例如来自 visual studio.
我正在使用母版页,我想在整个站点中使用它。
我遇到了很多问题,但终于得到了一个没有错误的页面,但它现在不显示母版页中的任何内容。
我包含了所有代码,希望有人能向我解释为什么我的母版页内容没有显示。我觉得我很接近,但还没有找到一个像样的教程来告诉我我需要做什么。
主页:
<asp:ContentPlaceHolder ID="CPH1" runat="server">
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style/main_Style.css">
<link rel="stylesheet" type="text/css" href="Style/Responsive-Style.css">
<link rel="stylesheet" href="Style/style.css">
<link rel="stylesheet" href="Style/slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="Style/flexslider.css" type="text/css" media="screen" />
<script src="Javascript/modernizr.js"></script>
</head>
<body>
<div class="headerOutline">
<div class="logo">
<img class="omTechLogo" src="images/mainLogo.png"></img>
</div>
<div class="headerMenu">
<ul id="menu">
<li class="headerMenuItem"><a class="menuText" href="Home.HTML">Home</a></li>
<li class="headerMenuItem"><a class="menuText" href="About.HTML">About</a></li>
<li class="headerMenuItem"><a class="menuText" href="Services.HTML">Services</a></li>
<li class="headerMenuItem"><a class="menuText" href="Portfolio.HTML">Portfolio</a></li>
<li class="headerMenuItem" id="headerMenuItem_last"><a class="menuText" href="Contact.HTML">Contact</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="JQuery/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
</div>
</div>
<div class="bodyOutline">
<div class="flexslider" style="height:auto; min-height:150px;">
<ul class="slides">
<li>
<img src="images/SliderImage1.jpg" />
</li>
<li>
<img src="images/SliderImage2.png" />
</li>
<li>
<img src="images/SliderImage3.jpg" />
</li>
<li>
<img src="images/SliderImage4.jpg" />
</li>
</ul>
</div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<script defer src="JQuery/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<div class="homepageBody">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH2" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
和主页:
<%@ Page Language="C#" MasterPageFile="~/MasterPage/MasterPage.master" Title="Content Page"%>
<asp:Content ContentPlaceHolderId="CPH1" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH2" runat="server">
TExt teX teXt
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH3" runat="server">
</asp:Content>
我希望 CPH1 和 CPH3 的内容显示在所有页面上,并且 CPH2 的内容随页面变化
您的内容占位符 ID=CPH3 中有 html 个标记。当您的页面膨胀时,它将在该组件内呈现它的内容,以替换已经存在的内容。在您的情况下,它将使用 contentplaceholderid=CPH3.
呈现页面的空内容
这是你的问题:
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
你基本上是在杀死结束正文和 html 标签以及你的页脚。也许您正在尝试这样做:?
<div>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>
我正在尝试创建一个 asp.net 网站,并且我正在使用记事本++,所以没有自动设置选项,例如来自 visual studio.
我正在使用母版页,我想在整个站点中使用它。
我遇到了很多问题,但终于得到了一个没有错误的页面,但它现在不显示母版页中的任何内容。
我包含了所有代码,希望有人能向我解释为什么我的母版页内容没有显示。我觉得我很接近,但还没有找到一个像样的教程来告诉我我需要做什么。
主页:
<asp:ContentPlaceHolder ID="CPH1" runat="server">
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style/main_Style.css">
<link rel="stylesheet" type="text/css" href="Style/Responsive-Style.css">
<link rel="stylesheet" href="Style/style.css">
<link rel="stylesheet" href="Style/slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="Style/flexslider.css" type="text/css" media="screen" />
<script src="Javascript/modernizr.js"></script>
</head>
<body>
<div class="headerOutline">
<div class="logo">
<img class="omTechLogo" src="images/mainLogo.png"></img>
</div>
<div class="headerMenu">
<ul id="menu">
<li class="headerMenuItem"><a class="menuText" href="Home.HTML">Home</a></li>
<li class="headerMenuItem"><a class="menuText" href="About.HTML">About</a></li>
<li class="headerMenuItem"><a class="menuText" href="Services.HTML">Services</a></li>
<li class="headerMenuItem"><a class="menuText" href="Portfolio.HTML">Portfolio</a></li>
<li class="headerMenuItem" id="headerMenuItem_last"><a class="menuText" href="Contact.HTML">Contact</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="JQuery/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
</div>
</div>
<div class="bodyOutline">
<div class="flexslider" style="height:auto; min-height:150px;">
<ul class="slides">
<li>
<img src="images/SliderImage1.jpg" />
</li>
<li>
<img src="images/SliderImage2.png" />
</li>
<li>
<img src="images/SliderImage3.jpg" />
</li>
<li>
<img src="images/SliderImage4.jpg" />
</li>
</ul>
</div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<script defer src="JQuery/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<div class="homepageBody">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH2" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
和主页:
<%@ Page Language="C#" MasterPageFile="~/MasterPage/MasterPage.master" Title="Content Page"%>
<asp:Content ContentPlaceHolderId="CPH1" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH2" runat="server">
TExt teX teXt
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH3" runat="server">
</asp:Content>
我希望 CPH1 和 CPH3 的内容显示在所有页面上,并且 CPH2 的内容随页面变化
您的内容占位符 ID=CPH3 中有 html 个标记。当您的页面膨胀时,它将在该组件内呈现它的内容,以替换已经存在的内容。在您的情况下,它将使用 contentplaceholderid=CPH3.
呈现页面的空内容这是你的问题:
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
你基本上是在杀死结束正文和 html 标签以及你的页脚。也许您正在尝试这样做:?
<div>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>