ASP.NET入门教程(三)----ASP.NET Web 窗体之对控件应用样式
对 HTML 控件应用样式 标准 HTML 标记通过样式属性支持 CSS,而样式属性可以设置为用分号分隔的属性/值对列表。有关 Internet Explorer 浏览器支持的 CSS 属性的更多信息,请参阅 MSDN Web Workshop 的
CSS Attributes Reference 页。所有的 ASP.NET HTML 服务器控件都可以采用与标准 HTML 标记完全一样的方式接受样式。下面的示例阐释若干应用于各种 HTML 服务器控件的样式。如果在返回到客户端的页上查看源代码,您会看到这些样式在控件的呈现中传递给了浏览器。
CSS 还定义了一个类属性,该属性可设置为文档的 <style>...</style> 节中包含的 CSS 样式定义。该类属性使您可以轻松地一次性定义样式并将它们应用于若干标记,而不必重新定义样式本身。HTML 服务器控件上的样式也可以以这种方式设置,如下面的示例所示。
在分析 ASP.NET 页时,样式信息被填充到
System.Web.UI.HtmlControls.HtmlControl 类上的
Style 属性(
CssStyleCollection 类型)中。该属性本质上是一个词典,它将控件的样式公开为每个样式属性键值的字符串索引集合。例如,可以使用下面的代码在
HtmlInputText 服务器控件上设置并随后检索
width 样式属性。
| <script language="C#" runat="server" > void Page_Load(Object sender, EventArgs E) { MyText.Style["width"] = "90px"; Response.Write(MyText.Style["width"]); }</script><input type="text" id="MyText" runat="server"/><script language="VB" runat="server" > Sub Page_Load(Sender As Object, E As EventArgs) MyText.Style("width") = "90px" Response.Write(MyText.Style("width")) End Sub</script><input type="text" id="MyText" runat="server"/><script language="JScript" runat="server" > function Page_Load(sender : Object, E : EventArgs) : void { MyText.Style("width") = "90px"; Response.Write(MyText.Style("width")); }</script><input type="text" id="MyText" runat="server"/> |
| C# | VB | JScript | |
下一个示例显示可以如何使用此
Style 集合属性以编程方式操作 HTML 服务器控件的样式。
对 Web 服务器控件应用样式 Web 服务器控件通过为常用的样式设置(如背景色和前景色、字体名称和大小、宽度、高度等等)添加若干强类型属性,提供了附加的样式支持级别。这些样式属性表示可在 HTML 中使用的样式行为的子集,它们被表示为直接在
System.Web.UI.WebControls.WebControl 基类上公开的“平面”属性。使用这些属性的优点是它们在开发工具(如 Microsoft Visual Studio .NET)中提供编译时类型检查和语句结束。 下面的示例显示一个应用了若干样式的
WebCalendar 控件(还包括一个未应用样式的日历以便对比)。注意,当设置的属性是类类型(如
Font)时,需要使用子属性语法
PropertyName-SubPropertyName。
| 
[[url=http://chs.gotdotnet.com/quickstart/aspplus/samples/webforms/customize/VB/style4.aspx]运行示例] | [查看源代码] |
System.Web.UI.WebControls 命名空间包括一个封装公共样式属性(其他样式类如
TableStyle 和
TableItemStyle 从该公共基类继承)的
Style 基类。许多 Web 服务器控件公开该类型的属性,以指定控件的个别呈现元素的样式。例如,
WebCalendar 公开许多这样的样式属性:
DayStyle、
WeekendDayStyle、
TodayDayStyle、
SelectedDayStyle、
OtherMonthDayStyle 和
NextPrevStyle。可以使用子属性语法
PropertyName-SubPropertyName 设置这类样式的个别属性,如下面的示例所示。
稍微不同的语法允许将每个
Style 属性声明为嵌套在 Web 服务器控件标记中的子元素。 <ASP:Calendar ... runat="server"> <TitleStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" /></ASP:Calendar>
下面的示例显示另一种语法,但在功能上与前一个示例等效。
与 HTML 服务器控件一样,也可使用 CSS 类定义对 Web 服务器控件应用样式。
WebControl 基类公开一个名为
CssClass 的
String 属性以设置样式类:
如果在服务器控件上设置的属性与控件上的任何强类型属性都不对应,该属性和值将被填充到控件的
Attributes 集合中。默认情况下,服务器控件在返回给请求浏览器客户端的 HTML 中不修改地呈现这些属性。这意味着可以直接在 Web 服务器控件上设置样式和类属性,而不必使用强类型属性。虽然这需要对控件的实际呈现有一定的了解,但它可能同样是应用样式的灵活方法。这对标准窗体输入控件尤其有用,如下面的示例所示。
也可使用
WebControl 基类的
ApplyStyle 方法以编程方式设置 Web 服务器控件样式,如下面的代码所示。
| <script language="C#" runat="server"> void Page_Load(Object Src, EventArgs E ) { Style style = new Style(); style.BorderColor = Color.Black; style.BorderStyle = BorderStyle.Dashed; style.BorderWidth = 1; MyLogin.ApplyStyle (style); MyPassword.ApplyStyle (style); MySubmit.ApplyStyle (style); }</script>Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList><script language="VB" runat="server"> Sub Page_Load(Src As Object, E As EventArgs) Dim MyStyle As New Style MyStyle.BorderColor = Color.Black MyStyle.BorderStyle = BorderStyle.Dashed MyStyle.BorderWidth = New Unit(1) MyLogin.ApplyStyle (MyStyle) MyPassword.ApplyStyle (MyStyle) MySubmit.ApplyStyle (MyStyle) End Sub</script>Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList><script language="JScript" runat="server"> function Page_Load(sender : Object, E : EventArgs) : void { Style style = new Style(); style.BorderColor = Color.Black; style.BorderStyle = BorderStyle.Dashed; style.BorderWidth = 1; MyLogin.ApplyStyle (style); MyPassword.ApplyStyle (style); MySubmit.ApplyStyle (style); }</script>Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList> |
| C# | VB | JScript | |
下面的示例说明上面的代码。
[/url]