找回密码
 会员注册
查看: 147|回复: 0

ASP.NET母版页

[复制链接]

250

主题

1

回帖

819

积分

管理员

积分
819
发表于 2024-2-29 08:52:00 | 显示全部楼层 |阅读模式

4.2母版页
4.2.1 母版页概述
用户在设计网站时经常会遇到多个网页部分内容相同的情况,例如:具有网关和内容都相同的标题栏、页脚栏、导航栏等,如果每个网页都设计一次,不仅重复劳动而且非常繁琐,此时,使用母版页可以很好地解决这个问题。
母版页是指可以在同一站点的多个页面间共享使用的特殊网页。用户可以使用母版页建立一个通用布局,或者使用母版页,在多个页面中,显示公共的内容。
母版页的使用与普通的aspx页面类似,可以在其中放置任何HTML控件、Web服务器控件或图形等,不同之处如下:
(1) 母版页将普通页面的@Page指令,替换成了@Master指令。
(2) 母版页的扩展名为.master,因此,不能被浏览器直接查看。
(3) 母版页中包含若干个ContentPlaceHolder控件,是预留出来的显示内容页面的区域。
(4) 母版页必须在被内容页引用之后才能进行显示。
(5) 母版页仅仅是一个页面模板,不能直接运行。
引用母版页的Web窗体被称为内容页。
在内容页中,母版页中的ContentPlaceHolder控件预留的可编辑区,会自动替换为Content控件,在Content控件中,开发人员可以自由设计,而在母版页中定义的公共内容将自动显示在内容页,不可以被修改。
当用户运行一个引用母版页的内容页时,服务器按照如下步骤将页面发送给用户:
(1) 用户通过输入内容页的URL来请求某页面。
(2) 服务器读取该页面中的@Page指令,如果该指令引用了一个母版页,则读取该母版页。如果是第一次请求这两个页,则两个页都要进行编译。
(3) 服务器将各Content控件的内容合并到母版页相应的ContentPlaceHolder控件中。
(4) 在浏览器中呈现合并后的完整页面。
4.2.2 创建母版页
(1)右击网站名称-添加-添加新项-搜索“母版页”-输入名称-添加

在这里插入图片描述

(2)添加完成之后,系统自动切换到母版页的源视图

在这里插入图片描述

(3) 从上图可知,母版页创建成功之后,系统在新建的母版页里,自动创建了两个ContentPlaceHolder控件,ID分别是head和ContentPlaceHolder1
(4) 开发人员可以在源视图或者设计视图中添加母版页的内容,但是,添加的内容不能出现在ContentPlaceHolder控件中,因为该区域是为内容页预留的区域。
4.2.3 创建内容页
1、创建内容页的方法
母版页不能单独在浏览器中预览显示效果,必须通过引用了该母版页的内容页进行查看。
在内容页中,母版页中的ContentPlaceHolder控件预留的可编辑区,会自动替换为Content控件,内容页的所有内容必须包含在Content控件内,创建内容页就是在母版页的可编辑区中填充内容。
创建内容页的方法有两种:
(1) 方法一
右击网站名称-添加-添加新项-选择 Web窗体 并选中右下角的“选择母版页”复选框(但是我们正在使用的VS版本没有这个复选框)

在这里插入图片描述

(2) 方法二
在VS的解决方案资源管理器中,右击要引用的母版页的名称,在弹出的快捷菜单中选择“添加内容页”命令,就可以在网站中添加一个引用该母版页的空白内容页。

在这里插入图片描述
在这里插入图片描述

2、内容页与普通Web窗体页的区别
在内容页创建好之后,系统会自动切换到内容页的源视图。
内容页与普通Web窗体页有所不同,主要体现在一下几个方面:
(1) 在@Page指令中,增加了Title=””和MasterPageFile="~/Site1.Master"两个指令。

在这里插入图片描述

(2) 在内容页中,不包括、、、<body>、<form>等Web元素,这些元素被放置在母版页中。<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/617c3821fa8e48e38be060e4f6b38702.png" alt="在这里插入图片描述" /></div><div align="center"><img src="https://img-blog.csdnimg.cn/2ee28c38148f41c5afa8ef39cf9046a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAOUppdUppdQ==,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述" /></div></p> <p>(3) 在内容页中包含若干个asp:Content…和</asp:Content>标记,内容页的所有元素都包含在Content控件中。<br /> 3、应用举例<br /> 案例:母版页的应用<br /> 设计一个母版页,然后基于这个母版页创建一个内容页。<br /> (1) 创建一个空网站。在站点根目录下创建一个名为images的文件夹,把准备好的背景图片(.jpg)放入其中。<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/60cc9ed5cbab4aa5976b6531ccf306a7.png" alt="在这里插入图片描述" /></div></p> <p>(2) 右击网站名称-添加-添加新项-母版页-改名(MasterPage.master)<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/ca31e255cd104a569629b5eb04290fe9.png" alt="在这里插入图片描述" /></div></p> <p>(3) 切换到MasterPage.master的设计视图,在页面中应用一个2X2的表格布局<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/4b99ee6fc9a94a48a1135a91a612fb3f.png" alt="在这里插入图片描述" /></div></p> <p>(4) 把第一行合并,设置其背景图片为.jpg;在第一行放入一个Label控件,设置其Text属性为“母版页的使用”;在第二行的左边放入一个Calender控件,选择一种自动套用格式;把系统自动创建的ID为ContentPlaceHolder1的占位符移到第二行的右边。(我不会设置背景图)<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/a90e477fea41467da2eb3433dbe3189a.png" alt="在这里插入图片描述" /></div></p> <p>(5) 在解决方案资源管理器中,右击母版页MasterPage.master,在弹出的快捷菜单中选择“添加内容页”命令,添加一个名为Default.aspx的内容页。<br /> (6) 切换到内容页Default.aspx的设计视图,在ContentPlaceHolder控件中,输入一些文字,运行效果图如下所示:<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/0bd667cebf3b4204b88560a80fd0fca8.png" alt="在这里插入图片描述" /></div></p> <p>4.2.4 从内容页访问母版页的控件<br /> 1、从内容页中访问母版页控件的语法格式<br /> 在实际应用中,经常要通过后台代码从内容页中访问母版页的控件,这种访问一般使用FindControl()方法,其语法格式如下:<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/d48bfc67b031414ab13d708f6ee71abf.png" alt="在这里插入图片描述" /></div></p> <p>2、应用举例<br /> 案例:使用FindControl()方法访问母版页<br /> 在母版页中包含一个Label控件,在页面加载时显示“欢迎您!”。在内容页中包含两个文本框和一个“登陆”按钮,文本框用来接收用户登录时输入的用户名和密码。用户在内容页登陆成功后,母版页中的Label控件的内容增加用户在登录时输入的用户名。<br /> (1) 创建空网站<br /> (2) 添加母版页(MasterPage.master)<br /> (3) 切换到母版页进行页面设计,添加一个Label控件,ID采用默认名“Label1”(PS:好像还要加上一个ContentPlaceHolder控件,书上没给,但是不加的话没法进行第(6)步)<br /> (4) 切换到母版页的后台代码页面,编辑Page_Load事件<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/e035bb33286e4f76b23ec1c8618c7d55.png" alt="在这里插入图片描述" /></div></p> <p>(5) 添加内容页(Default.aspx)<br /> (6) 切换到内容页的设计视图,在其ContentPlaceHolder控件区域放置一个4x2的表格用于页面布局。在表格中添加两个文本框控件;再添加一个Button控件,其Text属性修改为登陆<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/a401773b484c4fac8340eaff780ff25b.png" alt="在这里插入图片描述" /></div></p> <p>(7) 切换到内容页的后台代码,编写Button1_Click事件<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/8baedd7f98db45139b1353e9396757fc.png" alt="在这里插入图片描述" /></div></p> <p>(8) 运行内容页<br /> <div align="center"><img src="https://img-blog.csdnimg.cn/ef26360e6c894e1594893d3415d520eb.png" alt="在这里插入图片描述" /></div><div align="center"><img src="https://img-blog.csdnimg.cn/bba41b5fd46d466392496c612d9f1ba3.png" alt="在这里插入图片描述" /></div></p> <p><div align="center"><img src="https://img-blog.csdnimg.cn/66a44b16bfab47f7a4554bd2c180024c.png" alt="在这里插入图片描述" /></div></p> <p>母版页和内容页:<br /> 内容页(扩展名是.aspx),母版页的扩展名为.master<br /> 母版页其页面指令以@Master来标识;内容页其页面指令以@Page来标识</p><br>来源:<a href="https://blog.csdn.net/weixin_46067990/article/details/124058346" target="_blank">https://blog.csdn.net/weixin_46067990/article/details/124058346</a><br>免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!</td></tr></table> <div class="attach_nopermission attach_tips"> <div> <h3><strong>本帖子中包含更多资源</strong></h3> <p>您需要 <a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href);return false;">登录</a> 才可以下载或查看,没有账号?<a href="member.php?mod=registercorfly" title="注册账号">会员注册</a> </p> </div> <span class="atips_close" onclick="this.parentNode.style.display='none'">×</span> </div> </div> <div id="comment_3661" class="cm"> </div> <div id="post_rate_div_3661"></div> </div> </div> </td></tr> <tr><td class="plc plm"> </td> </tr> <tr id="_postposition3661"></tr> <tr> <td class="pls"></td> <td class="plc" style="overflow:visible;"> <div class="po hin"> <div class="pob cl"> <em> <a class="fastre" href="forum.php?mod=post&action=reply&fid=60&tid=2502&reppost=3661&extra=&page=1" onclick="showWindow('reply', this.href)">回复</a> </em> <p> <a href="javascript:;" id="mgc_post_3661" onmouseover="showMenu(this.id)" class="showmenu">使用道具</a> <a href="javascript:;" onclick="showWindow('miscreport3661', 'misc.php?mod=report&rtype=post&rid=3661&tid=2502&fid=60', 'get', -1);return false;">举报</a> </p> <ul id="mgc_post_3661_menu" class="p_pop mgcmn" style="display: none;"> </ul> <script type="text/javascript" reload="1">checkmgcmn('post_3661')</script> </div> </div> </td> </tr> <tr class="ad"> <td class="pls"> </td> <td class="plc"> </td> </tr> </table> </div><div id="postlistreply" class="pl"><div id="post_new" class="viewthread_table" style="display: none"></div></div> </div> <form method="post" autocomplete="off" name="modactions" id="modactions"> <input type="hidden" name="formhash" value="33857167" /> <input type="hidden" name="optgroup" /> <input type="hidden" name="operation" /> <input type="hidden" name="listextra" value="" /> <input type="hidden" name="page" value="1" /> </form> <div class="pgs mtm mbm cl"> <span class="pgb y"><a href="forum-60-1.html">返回列表</a></span> <a id="newspecialtmp" onmouseover="$('newspecial').id = 'newspecialtmp';this.id = 'newspecial';showMenu({'ctrlid':this.id})" onclick="showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=60')" href="javascript:;" title="发新帖" class="pgsbtn showmenu">发新帖</a> </div> <!--[diy=diyfastposttop]--><div id="diyfastposttop" class="area"></div><!--[/diy]--> <script type="text/javascript"> var postminchars = parseInt('30'); var postmaxchars = parseInt('10000'); var postminsubjectchars = parseInt('1'); var postmaxsubjectchars = parseInt('80'); var disablepostctrl = parseInt('0'); </script> <div id="f_pst" class="pl bm bmw"> <form method="post" autocomplete="off" id="fastpostform" action="forum.php?mod=post&action=reply&fid=60&tid=2502&extra=&replysubmit=yes&infloat=yes&handlekey=fastpost" onSubmit="return fastpostvalidate(this)"> <table cellspacing="0" cellpadding="0"> <tr> <td class="pls"> </td> <td class="plc"> <span id="fastpostreturn"></span> <div class="cl"> <div id="fastsmiliesdiv" class="y"><div id="fastsmiliesdiv_data"><div id="fastsmilies"></div></div></div><div class="hasfsl" id="fastposteditor"> <div class="tedt mtn"> <div class="bar"> <span class="y"> <a href="forum.php?mod=post&action=reply&fid=60&tid=2502" onclick="return switchAdvanceMode(this.href)">高级模式</a> </span><script src="static/js/seditor.js?I08" type="text/javascript"></script> <div class="fpd"> <a href="javascript:;" title="文字加粗" class="fbld">B</a> <a href="javascript:;" title="设置文字颜色" class="fclr" id="fastpostforecolor">Color</a> <a id="fastpostimg" href="javascript:;" title="图片" class="fmg">Image</a> <a id="fastposturl" href="javascript:;" title="添加链接" class="flnk">Link</a> <a id="fastpostquote" href="javascript:;" title="引用" class="fqt">Quote</a> <a id="fastpostcode" href="javascript:;" title="代码" class="fcd">Code</a> <a href="javascript:;" class="fsml" id="fastpostsml">Smilies</a> </div></div> <div class="area"> <div class="pt hm"> 您需要登录后才可以回帖 <a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href)" class="xi2">登录</a> | <a href="member.php?mod=registercorfly" class="xi2">会员注册</a> </div> </div> </div> </div> </div> <div id="seccheck_fastpost"> </div> <input type="hidden" name="formhash" value="33857167" /> <input type="hidden" name="usesig" value="" /> <input type="hidden" name="subject" value=" " /> <p class="ptm pnpost"> <a href="home.php?mod=spacecp&ac=credit&op=rule&fid=60" class="y" target="_blank">本版积分规则</a> <button type="button" onclick="showWindow('login', 'member.php?mod=logging&action=login&guestmessage=yes')" onmouseover="checkpostrule('seccheck_fastpost', 'ac=reply');this.onmouseover=null" name="replysubmit" id="fastpostsubmit" class="pn pnc vm" value="replysubmit"><strong>发表回复</strong></button> <label class="lb"><input type="checkbox" name="adddynamic" class="pc" value="1" />回帖并转播</label> <label for="fastpostrefresh"><input id="fastpostrefresh" type="checkbox" class="pc" />回帖后跳转到最后一页</label> <script type="text/javascript">if(getcookie('fastpostrefresh') == 1) {$('fastpostrefresh').checked=true;}</script> </p> </td> </tr> </table> </form> </div> </div> <div class="wp mtn"> <!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]--> </div> <script type="text/javascript"> function succeedhandle_followmod(url, msg, values) { var fObj = $('followmod_'+values['fuid']); if(values['type'] == 'add') { fObj.innerHTML = '不收听'; fObj.href = 'home.php?mod=spacecp&ac=follow&op=del&fuid='+values['fuid']; } else if(values['type'] == 'del') { fObj.innerHTML = '收听TA'; fObj.href = 'home.php?mod=spacecp&ac=follow&op=add&hash=33857167&fuid='+values['fuid']; } } fixed_avatar([3661], 1); </script> </div> <div id="ft" class="wp cl"> <div id="flk" class="y"> <p> <a href="//wpa.qq.com/msgrd?v=3&uin=516734115&site=心飞设计-网站,自媒体设计软件技术分享。新手站长乐园&menu=yes&from=discuz" target="_blank" title="QQ"><img src="static/image/common/site_qq.jpg" alt="QQ" /></a><span class="pipe">|</span><a href="forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><strong><a href="http://www.corfly.com" target="_blank">心飞设计-版权所有:微度网络信息技术服务中心</a></strong> ( <a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备17032091号-12</a> )<span class="pipe">|</span><a href="data/sitemap.xml" target="_blank" title="网站地图">网站地图</a><script type="text/javascript" src="//api.tongjiniao.com/c?_=631452074556137472" async></script></p> <p class="xs0"> GMT+8, 2024-12-26 12:38<span id="debuginfo"> , Processed in 0.909898 second(s), 27 queries . </span> </p> </div> <div id="frt"> <p>Powered by <strong><a href="https://www.discuz.vip/" target="_blank">Discuz!</a></strong> <em>X3.5</em></p> <p class="xs0">© 2001-2024 <a href="https://code.dismall.com/" target="_blank">Discuz! Team</a>.</p> </div></div> <script src="home.php?mod=misc&ac=sendmail&rand=1735187938" type="text/javascript"></script> <div id="scrolltop"> <span><a href="forum.php?mod=post&action=reply&fid=60&tid=2502&extra=&page=1" onclick="showWindow('reply', this.href)" class="replyfast" title="快速回复"><b>快速回复</b></a></span> <span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span> <span> <a href="forum-60-1.html" hidefocus="true" class="returnlist" title="返回列表"><b>返回列表</b></a> </span> </div> <script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script> </body> </html>