ASP.NET-根据页面内容动态调用Master母板页样式

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

由于网页样式在DW 中设计完成后，在VS中一直是布局走形，便也不用去理会。但是结合页面内容，网页中的导航链接要随着页面改变相应的样式风格，于是就有了这篇文章。技术很简单，还算不上是主题，但是我确实走了弯路，写一下笔记。
原来的css定义

1/* 固定链接样式 */
2.defaultBody li.default,
3.companyBody li.company,
4.newsBody li.news,
5.modelBody li.model,
6.servicesBody li.services,
7.itemflowBody li.itemflow,
8.onlineBody li.online,
9.contactBody li.contact
10{ background:url(../images/head/alink.jpg) no-repeat left top; }
11.defaultBody ul.menu li.default a,
12.companyBody ul.menu li.company a,
13.newsBody ul.menu li.news a,
14.modelBody ul.menu li.model a,
15.servicesBody ul.menu li.services a,
16.itemflowBody ul.menu li.itemflow a,
17.onlineBody ul.menu li.online a,
18.contactBody ul.menu li.contact a
19{ color:#F00; }

这个样式表会让导航栏随着页面变换自动转换样式，只需要在body标签添加相对应的css class。
现在的问题是母板页面有导航栏，内容页如何动态的加载母板页的css文件。
办法一：
在内容页端调用

protected void Page_Load(object sender, EventArgs e)
}

是可以执行，但是每个页面都写很郁闷，这是死办法
那就活一点，将这个方法提取到Master页面，提升至公共方法，方便内容页调用
办法二：

public partial class MainPage : System.Web.UI.MasterPage

内容页调用

public partial class ContentList : System.Web.UI.Page
}

如果只是简单复制的话，还是不能成功，这个就是一开始时我的错误。
必须将Master 强类型化，在.aspx 页面头部加上

<%@ MasterType VirtualPath="~/Master.master" %>

这样强类型化之后，内容页才能调用母板页的方法。
当然咯，还有一个面向对象的方法，自定义一个母板页基类，让它实现动态加载css 文件，基本上只有考虑到大型应用的时候，就得采用自定义Master基类的办法，让所有的母板页动态加载css 样式表，可能有的人会说ASP.NET 里面不是有Themes 主题吗，是啊我已经在页面顶部说了，我的页面现在没有用主题，只是少部分用了相应的样式，而且还不是控件。

现在母板页就会随着内容页面变化而动态的加载css 样式文件，但是还有一个问题，首页的链接样式会在该页上表现为高亮 HighLight，怎么办呢，css 原来的定义为根据body 的id 不同从而显示高亮，现在怎么办？
因为Master 想要获取相应的服务器控件，那就只有将 body 加上id 并且还要让它成为 HtmlControl 再加上 runat="server" ，这个时候Master可以对body进行操作了，那我们就继续，id已经被它用了，我就调用 body
所属的 HtmlGenericControl 类的 Attributes 属性动态设置页面的 css class

1    <div class="divNavBanner">
2        <ul class="menu">
3            <li class="default"><a href="index.aspx">首  页</a></li>
4            <li class="company"><a href="aboutus.aspx">关于我们</a></li>
5            <li class="news"><a href="ContentList.aspx">行业动态</a></li>
6            <li class="services"><a href="#">服务项目</a></li>
7            <li class="itemflow"><a href="WorkFlow.aspx">项目流程</a></li>
8            <li class="model"><a href="SystemModules.aspx">功能模块</a></li>
9            <li class="online"><a href="#">在线答疑</a></li>
10            <li class="contact"><a href="#">联系我们</a></li>
11        </ul>
12        <div class="divBanner"></div>
13    </div>

结果和我在DW 中设计的样式效果一模一样。