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

由于网页样式在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)
    
{
        AddPageStyle();
    }


protected   void  AddPageStyle()
    
{
        Master.Page.Header.Controls.Add(
new LiteralControl("/n<link href=/"App_Themes/style.css/" rel=/"stylesheet/" type=/"text/css/">/n"));
    }
是可以执行,但是每个页面都写很郁闷,这是死办法
那就活一点,将这个方法提取到Master页面,提升至公共方法,方便内容页调用
办法二:
public  partial  class  MainPage : System.Web.UI.MasterPage
{
    
protected void Page_Load(object sender, EventArgs e)
    
{
        
    }

    
    
public void AddPageStyle(string stylePath)
    
{
        Page.Header.Controls.Add(
new LiteralControl("/n<link href=/""+ stylePath +"/" rel=/"stylesheet/" type=/"text/css/">/n"));
    }

    
public void changeBodyCss(string cssClassName)
    
{
        PageBody.Attributes[
"class"= cssClassName;
    }

}

内容页调用

public  partial  class  ContentList : System.Web.UI.Page
{
    
protected void Page_Load(object sender, EventArgs e)
    
{
        LoadStyle();
    }


    
protected void LoadStyle()
    
{
        
string stylePath = "App_Themes/contentPage.css";
        
string styleClass = "newsBody";
        Master.AddPageStyle(stylePath);
        Master.changeBodyCss(styleClass);
    }

}

如果只是简单复制的话,还是不能成功,这个就是一开始时我的错误。
必须将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" >< href ="index.aspx" > &nbsp;&nbsp; </ a ></ li >
 4              < li  class ="company" >< href ="aboutus.aspx" > 关于我们 </ a ></ li >
 5              < li  class ="news" >< href ="ContentList.aspx" > 行业动态 </ a ></ li >
 6              < li  class ="services" >< href ="#" > 服务项目 </ a ></ li >
 7              < li  class ="itemflow" >< href ="WorkFlow.aspx" > 项目流程 </ a ></ li >
 8              < li  class ="model" >< href ="SystemModules.aspx" > 功能模块 </ a ></ li >
 9              < li  class ="online" >< href ="#" > 在线答疑 </ a ></ li >
10              < li  class ="contact" >< href ="#" > 联系我们 </ a ></ li >
11          </ ul >
12          < div  class ="divBanner" ></ div >
13      </ div >

结果和我在DW 中设计的样式效果一模一样。 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值