ASP.NET4靈活顯標記:數據Web控件改進
長期以來,使用Web控件的開發者都欣賞這些控件所具有的高生產力,但在控制它們生成的標記方面卻付出了一定的代價。例如,許多ASP.NET控件會自動地使用元素來包裝它們的內容,原因是為了方便布局或樣式控制。然而,這種行為卻與過去幾年中不斷發展的網絡標準相違背;這些標準支持使用更清潔和更簡潔的HTML標記,而建議節約使用標記;同時,它們提倡應當盡可能使用層疊樣式表(CSS)來實現網頁的布局和造型。此外,元素和其他自動添加的內容使得使用CSS來修飾Web控件和從客戶端使用這些控件更加困難。
ASP.NET 4.0版本的目的之一就是讓Web窗體開發人員更好地控制由Web控件呈現的標記。為此,ASP.NET 4.0中的許多Web控件都包括了一些特定屬性,允許頁面開發人員指示控件不生成無關的標記或者不僅僅使用元素作為外層包裝標記。
本文將著重探討ASP.NET 4.0在數據Web控件方面的一系列改進特征。正如你將看到,這些增強功能能夠使開發人員能夠更好地控制在客戶端瀏覽器上最終呈現的標記。
1、禁止模板控件生成外層表格元素
在ASP.NET 3.5中,有若干使用(或可能使用)模板的Web控件會自動使用一個元素封裝呈現的模板內容。具有此行為的一個這樣的控件便是FormView控件。下面,我們看一下FormView控件如何使用一個元素封裝輸出內容的例子。
首先,讓我們構造一個FormView控件,我們想使用它來顯示Northwind數據庫中的Categories表格中的一個特定類別的產品名稱及描述信息。為此,這個FormView控件需要提供一個包括CategoryName和Description字段的ItemTemplate模板元素。下面的聲明標記正是創建了這樣的一個FormView:
<ItemTemplate>
<b><%# Eval("CategoryName")%></b><br />
<%# Eval("Description")%>'
</ItemTemplate>
</asp:FormView>
此外,我們不妨設想這個FormView控件綁定到一個返回有關飲料類信息的數據源控件。通過瀏覽器瀏覽時,FormView控件將生成下列HTML代碼內容:
<tr>
<td colspan="2">
<b>Beverages</b><br />
Soft drinks, coffees, teas, beers, and ales'
</td>
</tr>
</table>
上面的標記顯示了元素被自動添加到模板中定義的標記中。簡言之,FormView控件把其模板內容包裝在一個具有一行和一列的表格內,而不管我們喜歡與否。
FormView生成上述外層元素以表達樣式信息。此外,上面的FormView控件還使用了一個RowStyle屬性,其中包含了多種子樣式(背景色,字體,BorderColor,等等)。例如,如果RowStyle的BackColor和Font-Size屬性分別被設置為Red和Larger,那么FormView將呈現以下標記:
<tr style="background-color:red;font-size:Large;">
<td colspan="2">
<b>Beverages</b><br />
Soft drinks, coffees, teas, beers, and ales'
</td>
</tr>
</table>
請注意上面的標記中是如何在元素(具體地說,是通過元素)中指定由FormView的RowStyle屬性定義的樣式的。因此,當使用RowStyle屬性時這個外層
元素是非常有用的,但如果沒有使用RowStyle屬性或者樣式信息是直接在模板的標記(理想情況下,應當使用CSS類)中指定的,那么再生成上述外層元素就顯得多余了。
ASP.NET 4.0在FormView中增加了一個新的命名為RenderOuterTable的布爾屬性。當把此屬性設置為True(默認)時,將生成一個外層的元素,就像在ASP.NET 3.5及早期版本中所實現的一樣。但是,如果把此屬性設置為False,那么將忽略生成外部的那個元素。
以我們以前的FormView控件為例,讓我們看看如果把RenderOuterTable設置為False會發生什么。
<ItemTemplate>
<b><%# Eval("CategoryName")%></b><br />
<%# Eval("Description")%>'
</ItemTemplate>
</asp:FormView>
經過上面輕微的修改,為FormView控件呈現的標記中不再包括外部表格。相反,FormView控件只是生成它的模板中的內容,如下面的HTML片段所示:
Soft drinks, coffees, teas, beers, and ales'
當RenderOuterTable設置為False時,任何通過外部表格表達的樣式將不再呈現。簡言之,當呈現上面的FormView控件時,對RowStyle屬性的任何樣式設置都將被忽略。
除了FormView控件外,RenderOuterTable屬性還被添加到下面的ASP.NET 4.0Web控件中:
Login
PasswordRecovery
ChangePassword
Wizard
CreateUserWizard
注意:本文提供的示例中提供了在FormView和Login控件中使用RenderOuterTable屬性的情況舉例。
2、ListView控件的增強支持
ListView控件能夠使用模板顯示一組數據記錄。像GridView一樣,ListView控件也支持分頁、排序、編輯和刪除數據。它也可以用來插入數據。開發人員在使用ASP.NET 3.5版本的ListView控件時必須至少需要提供如下兩個模板:
ItemTemplate—指定綁定到ListView中的每一項要提供的標記
LayoutTemplate—指定ListView的外層標記,并包含一個Web控件以指出應當提供ItemTemplate中的標記
在大多數情況下,LayoutTemplate只是包含一個Web控件來指定ItemTemplate中的標記應出現的位置,結果將產生一個使用以下標記的ListView控件:
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</LayoutTemplate>
<ItemTemplate>
...
</ItemTemplate>
</asp:ListView>
在上面的例子中,LayoutTemplate模板的作用僅在于聲明“ItemTemplate中的標記應該放到這里”。然而,無論如何,只要你使用ASP.NET 3.5,那么你還是不得不顯式地在ListView的標記內定義這個LayoutTemplate模板。
好消息是,在ASP.NET 4.0版本中,您可以省略LayoutTemplate模板—ItemTemplate現在是唯一在ListView內必須出現的模板。下面的聲明標記片斷顯示了這一新的縮寫語法:
<ItemTemplate>
...
</ItemTemplate>
</asp:ListView>
3、針對CheckBoxList和RadioButtonList控件的新選項RepeatLayout
欲了解有關ListView控件的更多信息,請參考有關的網絡文章,在此省略討論。
下面,我們來討論ASP.NET 4.0在CheckBoxList和RadioButtonList控件中提供的一個新的RepeatLayout選項。
CheckBoxList和RadioButtonList控件能夠顯示對應于一些給定數據的一組復選框或單選按鈕;因此,對于基于數據庫查詢生成一組復選框或單選按鈕是非常有用的。這兩個控件都具有一個RepeatLayout屬性,用于確定這一組復選框或單選按鈕是如何布局的。在ASP.NET 3.5中此屬性有兩個可能的設置:
Table(默認)—使用元素布局數據項。默認情況下,每一個復選框或單選按鈕被布置在它自己的表格行中。使用RepeatColumns屬性將會使每一行中都顯示一組固定數目的復選框或單選按鈕。
Flow—使用元素布局每個復選框或單選按鈕,且默認情況下,每個元素后面要插入一個人工換行符。如果設置了RepeatColumns屬性,則表示在一定數目的復選框或單選按鈕后面要插入一個人工換行符。
ASP.NET 4.0中,又把如下兩個額外的設置添加到RepeatLayout屬性:
OrderedList—使用
元素布局其中的項。你不能把RepeatColumns屬性與此設置一起使用。這樣做將導致訪問網頁時拋出一個異常。
UnorderedList—使用
元素布局其中的項。你也不能把RepeatColumns屬性與此設置一起使用。這樣做也將導致訪問網頁時拋出一個異常。
請考慮下面的CheckBoxList控件代碼,它的RepeatLayout屬性被設置為UnorderedList。
DataValueField="CategoryID" RepeatLayout="UnorderedList">
</asp:CheckBoxList>
當綁定到Northwind數據庫的產品類別時,上述控件將呈現以下標記:
<li><input id="..." type="checkbox" name="..." value="1" />
<label for="...">Beverages</label></li>
<li><input id="..." type="checkbox" name="..." value="1" />
<label for="...">Condiments</label></li>
<li><input id="..." type="checkbox" name="..." value="1" />
<label for="...">Confections</label></li>
...
</ul>
請注意,上面的CheckBoxList控件是如何生成一個無序列表(<ul>)的,以及每個復選框標記是如何呈現在一個列表標記(<li>)內部的。
ASP.NET 4.0提供OrderedList和UnorderedList這兩個選項的想法是,復選框或單選按鈕更易于使用CSS進行布局。目前,已有很多的網頁討論了如何使用CSS來布局有序和無序列表元素的問題;因此,在此我們亦省略相關討論。
4、小結
總體來看,ASP.NET 4.0提供給Web窗體開發人員更大的靈活性以控制最終呈現的標記。許多模板控件原先都添加了元素以實現樣式控制。現在,這些標簽可以被選擇性通過一個新的屬性RenderOuterTable加以抑制。同樣,CheckBoxList和RadioButtonList控件的RepeatLayout屬性也被擴展,包括兩個新的設置—OrderedList和UnorderedList,這給開發者提供可選擇的方式來影響這些控件生成的標記。
此外,ListView控件也被進一步瘦身—LayoutTemplate模板成為可選的。