如何让Visual Studio和web标准联姻

来源: 作者: 2007-08-08 出处:pcdog.com

.net  
上一页 1 2 3 

Step3:编译、运行。
查看页面的源文件。我们发现,服务器端的Label控件打到前台的已经不是span,而是label了。这样我们就将服务器端控件的呈现进行了重新的设置。

实例二:根据浏览器的类型,设置不同的样式。如果是IE浏览器就对刚才的那个label使用“cssTest”样式class,如果是Firefox浏览器就对刚才的那个label设置“cssTest_FF”样式class。
Step1:在页面上写2个样式class,参考如下:

 <style type="text/css">
    .cssTest{
    color:red;
    }
    .cssTest_FF{
    color:green;
    }
 </style>

Setp2:将test.browser里面的代码删除,添加新的代码如下:

<browsers>  
  <browser refID="IE">
    <controlAdapters>
     <adapter controlType="System.Web.UI.WebControls.Label" adapterType="LabelAdapter" />
    </controlAdapters>
  </browser>
  <browser refID="MozillaFirefox">
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.Label" adapterType="LabelAdapter_FF" />
    </controlAdapters>
  </browser>  
</browsers>

Setp3:创建一个名为“LabelAdapter_FF”的类。类代码如下(解释见注释):

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)
        End Get
    End Property

    Protected Overrides Sub RenderBeginTag(ByVal writer As HtmlTextWriter)
        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

    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

Step4:编译、运行。
在IE和FF中分别查看源文件,发现不仅应用的样式不同,连打到前台的标签都不同了。效果图如下:
如何让Visual Studio和web标准联姻(图五)

点击查看大图


如何让Visual Studio和web标准联姻(图六)
点击查看大图


后记:很多朋友应该知道“ASP.NET CssFriendlyAdapters”这个工具,其实原理就是这个。不过那个能够解决更大型的控件的呈现而已。有兴趣的朋友可以自己搞搞。
vs2005中browsers是个很了不起的东西。小弟才浅,这里只是利用了它很少的一部分功能,但是依然解决了一直困扰“网页设计师”的两个问题。
虽然从社会分工的角度上来看,前台网页制作和后台编码是应该分开进行的。但是在项目设计阶段,如果有一个既懂前台网页设计又懂后台程序的角色好像也挺不错的。

源代码下载:http://www.cnblogs.com/Files/JustinYoung/adapter.rar

感谢于何的技术指导。没有他,便没有此篇文章。谨此奉上真挚的感谢。



上一页 1 2 3 
上一篇:详细介绍ASP.NET状态保存方法
下一篇:就来说说Asp.net 身份验证、授权