ASP.NET立即上手教程(5)

2024-07-10 13:12:20

字體：大中小

來源：轉載

供稿：網友

應用樣式到html服務器控件

web是一個靈活的用戶接口環境，不同的站點在視覺和感覺上極盡變化之能事。層疊式樣式表（css）的廣泛應用，極大的豐富了web的設計。所有asp.net的html服務器控件和web服務器控件，已經被設計為能夠提供一流的css樣式支持。這一部分討論如何應用樣式到服務器控件，并且演示服務器控件在web forms中所提供的精細的外觀控制。

應用樣式到 html服務器控件

標準的html標簽通過style屬性來支持css，style屬性由一系列成對出現的以分號分割的屬性/值來定義。例如{font: 12pt verdana; font-weight:700;color:orange;}。關于ie瀏覽器對css屬性支持的更多信息，請參考msdn web workshop的 css attributes reference 頁面。所有asp.net的 html服務器控件，都可以像標準html標志那樣，接受css樣式。下面的例子說明了把一些樣式應用到不同的html服務器控件。如果你察看返回給客戶端的源程序，你就會發現這些在控件中引用的樣式送到了客戶端。

css也定義了class屬性，通過在文檔中包含<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"/>

下面的這個例子，向你展示如何使用style集合屬性，通過程序來操縱html服務器控件的樣式

應用樣式到web服務器控件

web服務器控件對樣式提供了額外的支持級別，即對于常用的樣式設置，增加了幾個強類型屬性。常用的樣式包括背景色、前景色、字體名稱和大小、寬度、字體加重等等。這些樣式屬性作為html中可以使用的樣式行為的子集，并且作為“平臺”屬性，在system.web.ui.webcontrols.webcontrol基類中直接擴展。使用這些屬性的好處在于，在開發工具，例如vs.net中，他們提供了編譯時類型檢查和狀態完成。

下面的例子顯示了一個應用了若干樣式的日歷控件（作為對照，同時包含了一個沒有使用樣式的日歷控件）。注意當你設置一個類類型的屬性，例如font，你需要使用子屬性語法屬性名稱-子屬性名稱。

名稱空間system.web.ui.webcontrols包含style基類，可以封裝常用的樣式屬性（其他的樣式類，例如tablestyle 和 tableitemstyle，都是從這個基類繼承而來）。

許多服務器控件擴展了這個類型的屬性，用來指定該控件分支元素的樣式。例如，日歷控件擴展了許多樣式屬性：daystyle, weekenddaystyle, todaydaystyle, selecteddaystyle, othermonthdaystyle, 和 nextprevstyle等等。你可以使用子屬性語法屬性名稱-子屬性名稱來設置這些樣式的分支屬性，如下面的例子：

一個細微的差別語法，允許聲明每一個style 屬性，作為子元素嵌套在web服務器控件標簽中。

以下為引用的內容：
<asp:calendar ... runat="server">
<titlestyle bordercolor="darkolivegreen" borderwidth="3"
backcolor="olivedrab" height="50px" />
</asp:calendar>

下面的例子展示了交替顯示語法，但是功能上與前一個一樣。

如同處理html服務器控件一樣，你可以使用css類定義來應用樣式到web服務器控件。webcontrol基類擴展了一個string屬性，名叫cssclass，用來設置樣式類：

如果設置到服務器控件的屬性不符合該控件的任何強類型屬性，那么這個屬性和值就會被放到該控件的attributes集合中。默認的情況下，服務器控件將會不加修改的引用這些屬性返回到發出請求的瀏覽器客戶端。這就意味著，樣式和類的屬性可以直接應用在服務器控件，而不使用這些控件的強類型屬性。當然了，明白這個概念需要理解控件的實際引用，他同樣是一個應用樣式的靈活的方式。對于標準的表單輸入控件，這個方法特別有用。請看下面的例子：

通過使用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>

本章小節：

1. asp.net的 html 服務器控件和 web 服務器控件家族提供了一流的css樣式支持。

2. 可以通過設置控件的樣式或者類屬性來應用樣式。這些設置可以通過控件的attributes集合用程序來訪問。對于html服務器控件，樣式屬性的分支值可以通過控件的style集合來獲取。

3. 大多數常用的樣式設置已經作為web服務器控件自身的強類型屬性

4. system.web.ui.webcontrols 名稱空間包含style 基類，封裝了常用的類型屬性。許多web 服務器控件擴展了這個屬性，作為分支引用元素。

5. 對于服務器控件，使用 webcontrol 基類的applystyle方法可以用程序來設置樣式。

上一篇：ASP.NET立即上手教程(6)

下一篇：ASP.NET立即上手教程(4)