如何让Visual Studio和web标准联姻(三)
[转贴 2008-02-20 13:18:31]
Step3：编译、运行。
查看页面的源文件。我们发现，服务器端的Label控件打到前台的已经不是span，而是label了。这样我们就将服务器端控件的呈现进行了重新的设置。 bitsCN.nET*中国网管博客
实例二：根据浏览器的类型，设置不同的样式。如果是IE浏览器就对刚才的那个label使用“cssTest”样式class，如果是Firefox浏览器就对刚才的那个label设置“cssTest_FF”样式class。
Step1:在页面上写2个样式class，参考如下：
bitsCN.nET*中国网管博客
<style type="text/css">
.cssTest{
color:red;
}
.cssTest_FF{ [bitsCN.Com]
color:green;
}
</style>
.cssTest{
color:red;
}
.cssTest_FF{ [bitsCN.Com]
color:green;
}
</style>
Setp2：将test.browser里面的代码删除，添加新的代码如下： www_bitscn_com中国.网管联盟
<browsers>
<browser refID="IE">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Label" adapterType="LabelAdapter" />
</controlAdapters>
</browser> 中国_网管联盟bitsCN.com
<browser refID="MozillaFirefox">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Label" adapterType="LabelAdapter_FF" /> www@bitscn@com
</controlAdapters>
</browser>
</browsers>
<browser refID="IE">
<controlAdapters>
www@bitscn@com
<adapter controlType="System.Web.UI.WebControls.Label" adapterType="LabelAdapter" />
</controlAdapters>
</browser> 中国_网管联盟bitsCN.com
<browser refID="MozillaFirefox">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Label" adapterType="LabelAdapter_FF" /> www@bitscn@com
</controlAdapters>
</browser>
</browsers>
Setp3：创建一个名为“LabelAdapter_FF”的类。类代码如下（解释见注释）： bbs.bitsCN.com中国网管论坛
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class LabelAdapter_FF
Inherits System.Web.UI.WebControls.Adapters.WebControlAdapter
Protected Overloads ReadOnly Property Control() As Label
Get
Return DirectCast(MyBase.Control, Label) www@bitscn@com
End Get
End Property
Protected Overrides Sub RenderBeginTag(ByVal writer As HtmlTextWriter) 中国_网管联盟bitsCN.com
writer.WriteLine()
writer.AddAttribute(HtmlTextWriterAttribute.Id, Control.ClientID)
If Not String.IsNullOrEmpty(Control.ControlStyle.CssClass) Then
writer.AddAttribute(HtmlTextWriterAttribute.Class, Control.ControlStyle.CssClass & "_FF") ‘用原来cssClass加上”_FF”这个样式class
End If
writer.AddStyleAttribute("font-weight", "bold") ’也可以直接样式属性
writer.RenderBeginTag(HtmlTextWriterTag.Div) ‘这里换成div了，只是演示而已
writer.Indent = writer.Indent + 1 bitsCN~com
End Sub
Protected Overrides Sub RenderEndTag(ByVal writer As HtmlTextWriter)
writer.Indent = writer.Indent - 1
writer.RenderEndTag()
writer.WriteLine()
End Sub
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
RenderContent(writer)
End Sub
Private Sub RenderContent(ByVal writer As HtmlTextWriter)
writer.Write(Control.Text)
End Sub
End Class
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class LabelAdapter_FF
Inherits System.Web.UI.WebControls.Adapters.WebControlAdapter
bitsCN.nET*中国网管博客
Protected Overloads ReadOnly Property Control() As Label
Get
Return DirectCast(MyBase.Control, Label) www@bitscn@com
End Get
End Property
Protected Overrides Sub RenderBeginTag(ByVal writer As HtmlTextWriter) 中国_网管联盟bitsCN.com
writer.WriteLine()
writer.AddAttribute(HtmlTextWriterAttribute.Id, Control.ClientID)
If Not String.IsNullOrEmpty(Control.ControlStyle.CssClass) Then
writer.AddAttribute(HtmlTextWriterAttribute.Class, Control.ControlStyle.CssClass & "_FF") ‘用原来cssClass加上”_FF”这个样式class
bitsCN#com中国网管联盟
End If
writer.AddStyleAttribute("font-weight", "bold") ’也可以直接样式属性
writer.RenderBeginTag(HtmlTextWriterTag.Div) ‘这里换成div了，只是演示而已
writer.Indent = writer.Indent + 1 bitsCN~com
End Sub
Protected Overrides Sub RenderEndTag(ByVal writer As HtmlTextWriter)
writer.Indent = writer.Indent - 1
中国_网管联盟bitsCN.com
writer.RenderEndTag()
writer.WriteLine()
End Sub
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
RenderContent(writer)
End Sub
bbs.bitsCN.com
Private Sub RenderContent(ByVal writer As HtmlTextWriter)
writer.Write(Control.Text)
End Sub
End Class
Step4：编译、运行。
在IE和FF中分别查看源文件，发现不仅应用的样式不同，连打到前台的标签都不同了。效果图如下：
www@bitscn@com
后记：很多朋友应该知道“ASP.NET CssFriendlyAdapters”这个工具，其实原理就是这个。不过那个能够解决更大型的控件的呈现而已。有兴趣的朋友可以自己搞搞。
vs2005中browsers是个很了不起的东西。小弟才浅，这里只是利用了它很少的一部分功能，但是依然解决了一直困扰“网页设计师”的两个问题。
虽然从社会分工的角度上来看，前台网页制作和后台编码是应该分开进行的。但是在项目设计阶段，如果有一个既懂前台网页设计又懂后台程序的角色好像也挺不错的。
源代码下载：http://www.cnblogs.com/Files/JustinYoung/adapter.rar
感谢于何的技术指导。没有他，便没有此篇文章。谨此奉上真挚的感谢。
标签: 1 
分类: 1
本文章引用通告地址(TrackBack Ping URL)为: 
本文章尚未被引用。