教你轻松构建asp.net网站框架
一般的网站框架与下面的页面大致相同,分为4部分:如下图所标识的,1、2、4部分基本保持不变,主要变的只有第三部分,通过点击2部分的菜单,来使相应的页面显示在第3部分,而且2部分和3部分的内容都是灵活可配的。这样的一个框架相信大家都耳熟能详了,那么如何做出来呢?当然有很多种方法,比如用Iframe、frameset等来拼接页面,不过框架的内容以及部署都需要手工完成,工作量很大。这里教你如何用10分钟完成这个任务。请看下文
十分钟完成这样一个灵活可配的框架,明眼人一想就知道要用别人封装好的东西啦。没错,就用.Net2.0提供的模板页+站点地图+TreeView控件即可。步骤如下:
(1)模板页设计
用VS新建一个Web站点(命名为TestWebSiteFramework),添加一个模板页(命名为MotherPage)。
模板页上只有一个ContentPlaceHolder服务器控件,这是允许改变的内容,其它固定部分在这个控件以外的地方添加。在此文件中添加一个table,设置3行2列,并将ContentPlaceHolder控件放到第2行第2列中。在第一行中输入框架的标头,第三行输入框架的页尾。例下图:
(2)站点地图设计
对刚才的的站点右击-添加-新建项,添加一个“站点地图”,如下图:
打开站点地图可以发现它是一个非常标准的XML文件。每个站点包含3个属性:url、title、description,一看便知它就是我们的框架右侧的菜单部分(即第2模块)。title即为菜单名称,url对应的页面文件即为框架的第3模块。例如:
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="First.aspx" title="会员卡积分系统" description=""> <siteMapNode url="" title="会员资料管理" description="记载会员的详细资料"> <siteMapNode url="Second.aspx" title="添加会员资料" description="" /> <siteMapNode url="Third.aspx" title="查询会员资料" description="" /> <siteMapNode url="Fourth.aspx" title="修改会员资料" description="" /> </siteMapNode> <siteMapNode url="" title="会员卡类型" description="实现会员卡的相关操作"> <siteMapNode url="" title="添加类型" description="" /> <siteMapNode url="" title="修改积分规则" description="" /> </siteMapNode> <siteMapNode url="" title="商品操作" description="实现商品的相关操作"> <siteMapNode url="" title="销售" description="" /> <siteMapNode url="" title="退货" description="" /> <siteMapNode url="" title="反馈" description="" /> </siteMapNode> </siteMapNode> </siteMap>
(3)组装站点地图与模板页-TreeView控件
2部分主体都设计完成,下面只需将地图文件添加到模板页即可。
将TreeView控件添加到母模板页的table中的第二行第一列。然后在TreeView控件右上角的任务列表中选择“新建数据源”:
选择站点地图,确定即可:
到此,配置已完成,如下图为配置好的模板页的视图与源码:
源码:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MotherPage.master.cs" Inherits="TestWebSiteFramework.MotherPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Kobe</title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <table style="width:100%;height:100%"> <tr style="background-color:green"> <td colspan="2" align="center">北京市连锁超市资源分销系统</td> </tr> <tr style="height:485px"> <td style="background-color:dimgrey;width:100px"> <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"></asp:TreeView> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> </td> <td style="background-color:yellowgreen"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> <tr style="background-color:green"> <td colspan="2" align="center">Addr:廊坊市 爱民西道100号; Tel:110; Email:[email protected]</td> </tr> </table> </div> </form> </body> </html>
(4)添加子页面
模板页已配置完成,这样就可以添加新页面了,当然添加的时候要使用模板页,如下图:右击站点-添加-新建项
选择刚配置好的母板文件:
然后就可以在站点地图(XML)文件中为子页面添加菜单名称与链接了,到此框架制作完成。
(5)总结
其实就是用母版页来使网站所有页面的页眉页脚格式统一;用站点地图来配置菜单;用TreeView控件作为容器来将菜单显示出来。怎么样,简单吧?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。