VS2010 对于CSS的升级

 

隨著 ASP.NET 版本升級，它添加了很多新的東西，像是範本化控制項 (template-based control，像是 GridView/ListView/FormView 等)，導覽控制項 (Sitemap/Menu/TreeView)，AJAX (ASP.NET

AJAX 與 Control Toolkit)，Data Source Control (SqlDataSource/ObjectDataSource/LinqDataSource) 等功能，使得 Web Form Model 更加成熟，它自動化的 HTML Rendering 能力雖然減輕了很多

開發人員的 HTML 繪製負擔，但它卻也在無形中為應用程式加上了一個大包袱：龐大的 Programming Model 以及生硬的 Event Model，使得能夠對 Web Form 控制的範圍其實不大，除非使用 Control

Extension 或是 Custom Control，但這個又對開發人員的負擔很重 (User Control 則好一點)，ASP.NET MVC 也是因應這個需求所產生，但本文並不談 ASP.NET MVC，而是 ASP.NET 的 Web Form 控制

項，控制項的繪製 (rendering) 在 ASP.NET 4.0 做了一些修改，最大的原因是為了符合 CSS 以及讓像 jQuery 這樣高度依賴 CSS 格式的 Scripting Framework 更能夠發揮功能。

 

1. CSS 繪製相容性 (Rendering Compatibility)。

 

在 ASP.NET 4.0 中特別有針對 CSS 做了一些強化，而為了要保持和 .NET Framework 3.5 以及更早版本的 ASP.NET 保持行為上的相容，所以特別在 Web.config 中加入了相容性的設定功能：

 

<system.web>
   <pages controlRenderingCompatibilityVersion="3.5|4.0"/>
</system.web>

 

若設定為 3.5，表示與 3.5 和更早的版本相容。

若設為 4.0，則表示可以啟用 ASP.NET 4.0 才有的部份新功能。

 

 

xhtmlConformance 屬性會永遠設為 Strict，它會讓控制項使用 XHTML 1.0 Strict 標記來繪製。
關閉非輸入控制項不會再出現無效的樣式。
圍繞在隱藏欄位的 DIV 元素現在也會設定樣式讓它們不會干擾到使用者建立的 CSS 規則。
選單控制項繪製具有語意正確 (semantically) 以及相符於可協助性指南 (accessibility guide) 的標記。
驗證控制項不會繪製 inline style (即使用 style=”…” 設定的樣式)。
控制項會繪製 border=”0”。
 

2. 關閉控制項 (Disabling Control) 的修訂 (需要設定 controlRenderingCompatibilityVersion=”4.0”)。

 

在以往的 Web 控制項中，幾乎都可以使用 Enabled=”false” 來關閉控制項，這個行為在 HTML 4.0 前是正常的，但是到了 HTML 4.01 時，disabled 屬性 (控制 HTML 是否關閉) 卻設定只能在

input 控制項中使用，因此對 ASP.NET 諸多控制項來說，這個行為一定要修改，所以在 ASP.NET 4.0 提供了一個稱為 DisabledCssClass 的屬性，預設值是 aspnetdisabled，表示將這個控制項關閉，

但開發人員仍可以自己設計關閉的 CSS，並且使用 DisableCssClass 設定給控制項即可。

 

3. 將系統設定的隱藏欄位的 DIV 設定一個內建的樣式，以讓 CSS 的 DIV 設定不會影響到該區域 (需要設定 controlRenderingCompatibilityVersion=”4.0”)。

 

ASP.NET 2.0 開始，系統有將必要的隱藏欄位以 DIV 來包裝，不過它會受到使用者的 CSS 規則所影響，因此 ASP.NET 4.0 修改了這部份的 CSS 設定，加入了一個 aspnetHidden 的 CSS class，以確

保這個區域不會受到使用者所定義的 CSS 規則的影響。

 

4. 部份控制項可以不繪製表格，而以自訂的格式繪製。

 

在 ASP.NET 4.0 中，有幾個控制項多了一個 RenderOuterTable=”true|false” 的屬性，它可以不讓 Render 繪製出包在外面的表格，而且繪製出指定的 template 內容，這會更讓控制項和 CSS 貼近

許多。而這些控制項是：

FormView
Login
PasswordRecovery
ChangePassword
Wizard
CreateUserWizard
 

5. Menu 的繪製強化 (需要設定 controlRenderingCompatibilityVersion=”4.0”)。

 

在 ASP.NET 4.0 中的 Menu 控制項，將不再以原始的繪製方式，而改以 jQuery 所使用的 <ul> 和 <li> 格式，這對使用 jQuery 的開發人員來說相當的方便，因為他們可以直接套用一些 jQuery 的

plug-in (例如 jdMenu) 來快速的建立 Menu，例如下列的樣板：

 

<asp:Menu ID="Menu1" runat="server">

<Items>

<asp:MenuItem Text="Home" Value="Home" />

<asp:MenuItem Text="About" Value="About" />

</Items>

</asp:Menu>

 

會被繪製為：

 

<div id="Menu1">

<ul>

<li><a href="#" οnclick="...">Home</a></li>

<li><a href="#" οnclick="...">About</a></li>

</ul>

</div>

<script type="text/javascript">

new Sys.WebForms.Menu('Menu1');

</script>

 

這個功能被稱為語意化標記 (semantically mark)。而且這個功能也是為了符合 W3C 的 WAI-ARIA 所定義的 Accessibility Guide 中的 Menu 格式 (可參考 http://www.w3.org/TR/wai-aria-

practices/#menu)。

 

參考資料：

ASP.NET 4.0 Enhancement for Data Control:

http://blogs.msdn.com/mikeormond/archive/2009/06/29/asp-net-4-0-enhancements-to-data-controls.aspx

ASP.NET 4.0 Menu and Semantic Markup:

http://blogs.msdn.com/mikeormond/archive/2009/11/13/asp-net-4-0-asp-menu-and-semantic-markup.aspx