小朱® 的技術隨手寫

本部落格不吹捧、不自戀、不造神，也絕不用技術文偷渡政治文，請各位朋友安心服用。

2010-01-24

[VS2010] ASP.NET 4.0 在 CSS 以及控制項繪製的新功能與增強功能

[VS2010] ASP.NET 4.0 在 CSS 以及控制項繪製的新功能與增強功能

ASP.NET 自從 2002 年第一個 RTM 版本隨著 .NET Framewok 1.0 發布以來，幾乎可以是席捲了 Web Application Framework 的市場，大量的 Web 開發人員開始由 ASP 轉換到 ASP.NET，順便也吸引了一些 Java Developer 經由 C# 投入 ASP.NET 的懷抱，Visual Studio 以及 ASP.NET 本身將 Web 應用程式開發導向成與開發 Windows 應用程式 (甚至是 VB 應用程式) 的視覺化開發模型的策略奏效，而 Web Forms 也是當時少數可以用事件概念將 HTTP 處理串聯起來並且將常用 HTML 介面包裝成控制項，讓開發人員可以用視覺化的方式來設計 Web 應用程式的 Programming Model，當時的 JSP/PHP 和微軟本身的 ASP 都沒辦法做到這樣的功能。

 

隨著 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="#" onclick="...">Home</a></li>

    <li><a href="#" onclick="...">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

    • 標籤雲