在DetailsView控件中如何使用TemplateField

這篇文章給大家分享的是有關(guān)在DetailsView控件中如何使用TemplateField的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

導(dǎo)言

　　比起B(yǎng)oundField、CheckBoxField、HyperLinkField以及其他的那些數(shù)據(jù)字段控件（data field controls）來說，TemplateField提供了一種高度復(fù)雜的數(shù)據(jù)呈現(xiàn)的方法。在上一節(jié)中，我們主要著重于在GridVIew中使用TemplateField，以實(shí)現(xiàn)：

·在一列中顯示多個(gè)數(shù)據(jù)字段。比如說，將FirstName和LastName字段合并起來顯示在一個(gè)GridView列中。

·使用交互Web控件來展示數(shù)據(jù)。我們看到了如何使用一個(gè)Calendar控件來顯示HiredDate的值。

·顯示基于潛在數(shù)據(jù)的狀態(tài)信息。盡管Employees表中并沒有包含一個(gè)關(guān)于雇員在公司干了多久的數(shù)據(jù)列，但我們?nèi)匀豢梢允褂肨emplateField 和格式化方法在GridView中實(shí)現(xiàn)這樣的功能，就像我們?cè)谏弦还?jié)中做的那樣。

　　就像在GridView中那樣，DetailsView控件也可以同樣的使用TemplateField。在本節(jié)教程中，我們將使用一個(gè)包含兩個(gè)TemplateField的DetailsView來一次一個(gè)的顯示產(chǎn)品信息。第一個(gè)TemplateField將整合UnitPrice、UnitsInStock和UnitsOnOrder等數(shù)據(jù)并顯示在一個(gè)DetailsView行上。第一個(gè)TemplateField則將顯示Discontinued的數(shù)據(jù)，不過將使用格式化方法，在有折扣的時(shí)候就顯示“YES”，否則就顯示“NO”。

圖一：使用兩個(gè)模板列來自定義顯示

好了，讓我們開始吧！

第一步：將數(shù)據(jù)綁定到DetailsView

　　像前一節(jié)中所討論的那樣，要使用TemplateField最簡(jiǎn)單的辦法就是先創(chuàng)建一個(gè)僅包含BoundField的DetailsView控件，然后添加新的TemplateField或是將某些BoundField轉(zhuǎn)換成TemplateField。因此，我們先通過設(shè)計(jì)器向頁(yè)面上添加一個(gè)DetailsView控件，并綁定一個(gè)返回產(chǎn)品列表的ObjectDataSource給它。這些操作將創(chuàng)建一個(gè)帶有BoundField和CheckBoxField 的DetailsView，BoundField用于非布爾值，CheckBoxField當(dāng)然就是用于布爾值了（比如說“是否打折”）。

　　打開DetailsViewTemplateField.aspx頁(yè)面，從工具箱中拖一個(gè)DetailsView到設(shè)計(jì)器上。從DetailsView的智能標(biāo)簽（smart tag）上選擇并添加一個(gè)新的調(diào)用ProductsBLL類的GetProducts ()方法的ObjectDataSource控件。

圖二：添加一個(gè)新的調(diào)用GetProducts ()方法的ObjectDataSource控件

　　在這個(gè)報(bào)表中，刪除ProductID、SupplierID、CategoryID以及ReorderLevel等BoundField。然后，調(diào)整剩下的BoundField的順序以使CategoryName和SupplierName跟在ProductName后面。然后設(shè)置各BoundField的HeaderText和formatting屬性，不用緊張，隨便填，只要你覺得爽就行。就像在GridView中那樣，可以通過字段對(duì)話框或是直接修改聲明代碼（declarative syntax。譯者注：直譯應(yīng)該是什么？聲明語法？不管怎么樣，反正就是HTML視圖里面的那些東西）來編輯這些綁定列。最后，清空DetailsView的Height和Width屬性，這樣可以使其根據(jù)需要顯示的數(shù)據(jù)來自動(dòng)擴(kuò)展，另外，再在智能標(biāo)簽中選上“啟用分頁(yè)（Enable Paging）”復(fù)選框。

　　在做了這些更改之后，你的DetailsView控件的聲明標(biāo)記應(yīng)該像下面這樣：

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
 DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
 EnableViewState="False">
 <Fields>
  <asp:BoundField DataField="ProductName" HeaderText="Product"
   SortExpression="ProductName" />
  <asp:BoundField DataField="CategoryName" HeaderText="Category"
   ReadOnly="True" SortExpression="CategoryName" />
  <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
   ReadOnly="True" SortExpression="SupplierName" />
  <asp:BoundField DataField="QuantityPerUnit"
   HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
  <asp:BoundField DataField="UnitPrice" HeaderText="Price"
   SortExpression="UnitPrice" />
  <asp:BoundField DataField="UnitsInStock"
   HeaderText="Units In Stock" SortExpression="UnitsInStock" />
  <asp:BoundField DataField="UnitsOnOrder"
   HeaderText="Units On Order" SortExpression="UnitsOnOrder" />
  <asp:CheckBoxField DataField="Discontinued"
   HeaderText="Discontinued" SortExpression="Discontinued" />
 </Fields>
</asp:DetailsView>

　　同樣，我們還是花點(diǎn)時(shí)間到瀏覽器中看看效果吧！現(xiàn)在，你可以看到一個(gè)單獨(dú)的產(chǎn)品(Chai)，它包括一些顯示其屬性的行：名稱、分類、供應(yīng)商、庫(kù)存量、訂貨量還有它的打折狀態(tài)。

圖三：使用一組綁定列來顯示產(chǎn)品明細(xì)

第二步：將單價(jià)、庫(kù)存量和訂貨量合并在一列中

　　DetailsView有一列用于UnitPrice、UnitsInStock和UnitsOnOrder。通過TemplateField可以將這3個(gè)數(shù)據(jù)合并到一行中，你可以添加一個(gè)新的TemplateField，也可以將UnitPrice、UnitsInStock或UnitsOnOrder任何一個(gè)BoundField直接轉(zhuǎn)換成TemplateField。雖然我個(gè)人還是喜歡將已有的BoundField轉(zhuǎn)換成TemplateField這種方式，不過這里我們還是來聯(lián)系一下添加新的TemplateField吧。

　　在DetailsView的智能標(biāo)簽的彈出菜單中點(diǎn)擊“編輯字段(Edit Fields)”。在彈出的字段對(duì)話框中，添加一個(gè)新的TemplateField并將其HeaderText屬性設(shè)置為“Price and Inventory”，然后將這個(gè)新的TemplateField移動(dòng)到UnitPrice的上面。

圖四：給DetailsView控件添加一個(gè)模板列

　　由于新添加的TemplateField將要顯示UnitPrice、UnitsInStock以及UnitsOnOrder等BoundField中的數(shù)據(jù)，所以讓我們先把這幾個(gè)BoundField刪了。

　　這一個(gè)步驟的最后一個(gè)任務(wù)是定義“Price and Inventory”這個(gè)TemplateField 的ItemTemplate，你可以通過設(shè)計(jì)器中DetailsView的模板編輯界面也可以手工編寫聲明代碼來完成這個(gè)任務(wù)。就像GridView那樣，在智能標(biāo)簽的彈出菜單中點(diǎn)擊“編輯模板”（ Edit Templates），就可以使用模板編輯界面了。這里你可以在下拉框中選擇你想要編輯的模板并從工具箱中添加任何你喜歡的Web控件。

　　在本教程中，首先給“Price and Inventory”模板列的ItemTemplate添加一個(gè)Label。然后，在Label控件的智能標(biāo)簽上點(diǎn)擊“編輯數(shù)據(jù)綁定(Edit DataBindings)”并將其Text屬性綁定到UnitPrice字段上。

圖五：將Label的Text屬性綁定到UnitPrice字段上

　　將單價(jià)格式化為貨幣形式，做了這個(gè)操作之后，“Price and Inventory”模板列的Label上僅顯示了所選產(chǎn)品的單價(jià)。圖六向我們展示了到現(xiàn)在為止我們所做的成果。

圖六：“單價(jià)和總量”模板列顯示了單價(jià)

　　注意產(chǎn)品的單價(jià)現(xiàn)在還沒有格式化為貨幣格式。如果是一個(gè)BoundField，格式化可以通過將HtmlEncode屬性設(shè)置為false并將DataFormatString屬性設(shè)置為“{0:formatSpecifier}”來實(shí)現(xiàn)。然而，在TemplateField中，任何格式化說明都必須在數(shù)據(jù)綁定語法中指定或是通過使用一個(gè)在應(yīng)用程序的某個(gè)地方(比如說在ASP.NET頁(yè)面的后置代碼類中)編寫的格式化方法。

　　要指定Label的數(shù)據(jù)綁定代碼中的格式化，可以在Label的智能標(biāo)簽中點(diǎn)擊“編輯數(shù)據(jù)綁定(Edit DataBindings)”，然后在彈出的數(shù)據(jù)綁定對(duì)話框中的格式（Format）下拉框直接輸入格式化說明或選擇一個(gè)預(yù)定義的格式化字符串。就像BoundField的DataFormatString屬性那樣，格式化使用{0:formatSpecifier}來進(jìn)行指定。為了使UnitPrice字段使用貨幣格式，我們可以在那個(gè)下拉框中選擇一個(gè)合適值，也可以直接輸入“{0:C}”。

圖七：將單價(jià)格式化為貨幣形式

　　說明一下，格式化說明是Bind或Eval方法的第二個(gè)參數(shù)。剛才通過設(shè)計(jì)器添加的這個(gè)設(shè)置表現(xiàn)為以下的標(biāo)記語言：<asp:Label ID="Label1" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>將剩下的數(shù)據(jù)字段添加到TemplateField中

　　現(xiàn)在，我們已經(jīng)在“Price and Inventory”模板列中顯示并格式化了UnitPrice字段，不過我還需要將UnitsInStock和UnitsOnOrder顯示出來。讓我們把它們顯示在單價(jià)的下面一行的圓括號(hào)中吧！在設(shè)計(jì)器的模板編輯器中，這些用于顯示的標(biāo)記語言可以簡(jiǎn)單的用鍵盤輸入，當(dāng)然你需要先將光標(biāo)定位到模板中的某個(gè)位置。另外，你也可以直接在聲明代碼中直接輸入。

　　添加了靜態(tài)的標(biāo)記語言、Label控件以及數(shù)據(jù)綁定代碼，所以“Price and Inventory”模板列可以像下面這樣顯示單價(jià)和總量信息：

單價(jià)(In Stock / On Order: 庫(kù)存量 / 訂貨量)

做了這些之后，你的DetailsView的聲明標(biāo)記代碼應(yīng)該像這個(gè)樣子：

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
 DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
 EnableViewState="False">
 <Fields>
  <asp:BoundField DataField="ProductName"
   HeaderText="Product" SortExpression="ProductName" />
  <asp:BoundField DataField="CategoryName" HeaderText="Category"
   ReadOnly="True" SortExpression="CategoryName" />
  <asp:BoundField DataField="SupplierName"
   HeaderText="Supplier" ReadOnly="True"
   SortExpression="SupplierName" />
  <asp:BoundField DataField="QuantityPerUnit"
   HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
  <asp:TemplateField HeaderText="Price and Inventory">
   <ItemTemplate>
    <asp:Label ID="Label1" runat="server"
     Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
    <br />
    <strong>
    (In Stock / On Order: </strong>
    <asp:Label ID="Label2" runat="server"
     Text='<%# Eval("UnitsInStock") %>'></asp:Label>
    <strong>/</strong>
    <asp:Label ID="Label3" runat="server"
     Text='<%# Eval("UnitsOnOrder") %>'>
    </asp:Label><strong>)</strong>
   </ItemTemplate>
  </asp:TemplateField>
  <asp:CheckBoxField DataField="Discontinued"
   HeaderText="Discontinued" SortExpression="Discontinued" />
 </Fields>
</asp:DetailsView>

做了這些修改之后，我們已經(jīng)把單價(jià)和總量信息統(tǒng)一的顯示在一個(gè)單獨(dú)的DetailsView行中了。

圖八：?jiǎn)蝺r(jià)和總量信息顯示在一個(gè)單獨(dú)的行上了

第三步：自定義折扣字段的信息

　　Products表的Discontinued字段是一個(gè)BIT值，它指明一個(gè)產(chǎn)品是否打折。當(dāng)把一個(gè)DetailsView（或者GridView）綁定到一個(gè)數(shù)據(jù)源控件時(shí)，布爾型的字段（比如說Discontinued）會(huì)被實(shí)現(xiàn)為CheckBoxField，而非布爾型的字段（比如說ProductID、ProductName等等）將被實(shí)現(xiàn)為BoundField。CheckBoxField被呈現(xiàn)為一個(gè)禁用的CheckBox，如果數(shù)據(jù)的值為true則CheckBox為選中狀態(tài)，否則就是未選中狀態(tài)。

　　比起顯示一個(gè)CheckBoxField，可能我們更希望將其顯示為一個(gè)文本以說明這個(gè)產(chǎn)品是不是有折打。要做到這一點(diǎn)，我們可以從DetailsView中刪掉這個(gè)CheckBoxField，再添加一個(gè)BoundField，并將其DataField屬性設(shè)置到Discontinued上。嗯，花點(diǎn)時(shí)間完成它！做完這個(gè)改變后，DetailsView對(duì)那些打折的產(chǎn)品就顯示一個(gè)“True”，而對(duì)其他的就顯示一個(gè)“False”。

圖九：字符串“True”和“False”用來顯示打折狀態(tài)

　　想想一下，我們不想用“True”或者“False”，而是想要“YES”和“NO”。這樣的自定義可以由一個(gè)TemplateField和一個(gè)格式化方法來實(shí)現(xiàn)。格式化方法可以接受若干個(gè)輸入?yún)?shù)，但是智能返回一個(gè)用于插入到模板中的HTML（字符串類型的）

　　在DetailsViewTemplateField.aspx頁(yè)面的后置代碼類中添加一個(gè)名為DisplayDiscontinuedAsYESorNO的格式化方法，它接受一個(gè)布爾型的值作為參數(shù)并返回一個(gè)字符串。就像前一節(jié)中討論的那樣，這個(gè)方法必須標(biāo)記為protected或是public，不然就不能從模板中訪問到它了。

protected string DisplayDiscontinuedAsYESorNO(bool discontinued)
{
 if (discontinued)
  return "YES";
 else
  return "NO";
}

這個(gè)方法檢查輸入的參數(shù)（是否折扣），如果為true則返回“YES”，否則就返回“NO”。

注意：回憶一下我們?cè)谏弦还?jié)中的相關(guān)內(nèi)容，傳遞給格式化方法的參數(shù)可能是空值，所以我們需要在訪問雇員的HiredDate之前對(duì)它進(jìn)行空值檢查。這樣的檢查在這里卻是不需要的，因?yàn)镈iscontinued字段永遠(yuǎn)不會(huì)是空值。此外，這也是為什么這個(gè)方法接受的是一個(gè)布爾值而不是ProductsRow實(shí)例或object類型的參數(shù)的原因。

　　完成了這個(gè)格式化方法之后，剩下的就只是在TemplateField的ItemTemplate中調(diào)用它了。要?jiǎng)?chuàng)建這個(gè)TemplateField，我們可以刪除Discontinued綁定列再添加一個(gè)新的TemplateField，也可以直接將Discontinued BoundField轉(zhuǎn)換成TemplateField。然后，在源視圖（譯者注：就是HTML視圖）編輯TemplateField以使其包含一個(gè)調(diào)用DisplayDiscontinuedAsYESorNO方法的ItemTemplate，傳過去的參數(shù)就是當(dāng)前ProductRow實(shí)例的Discontinued屬性。這個(gè)可以通過Eval方法來訪問?，F(xiàn)在，這個(gè)TemplateField的標(biāo)記代碼就像這樣了：

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
 <ItemTemplate>
  <%# DisplayDiscontinuedAsYESorNO((bool)
   Eval("Discontinued")) %>
 </ItemTemplate>
</asp:TemplateField>

　　這樣，DisplayDiscontinuedAsYESorNO方法就會(huì)在呈現(xiàn)DetailsView時(shí)被調(diào)用，傳給它的是ProductRow實(shí)例的Discontinued值。由于Eval方法返回的是一個(gè)obejct類型的值，而DisplayDiscontinuedAsYESorNO方法僅接受布爾型的參數(shù)，所以我們將Eval方法的返回值轉(zhuǎn)換成布爾型的。根據(jù)接收到的值，DisplayDiscontinuedAsYESorNO方法將會(huì)返回“YES”或“NO”，這個(gè)返回值就是要在這個(gè)DetailsView行中顯示的東西。

圖十：現(xiàn)在在折扣行中顯示的就是“YES”或“NO”了

總結(jié)

在DetailsView控件中，相對(duì)于其他的列控件來說，模板列可以處理更加復(fù)雜的數(shù)據(jù)呈現(xiàn)。模板列主要用于這樣一些情況：

·一個(gè)DetailsView列中需要顯示多個(gè)數(shù)據(jù)列

·使用一個(gè)Web控件來展示數(shù)據(jù)比一段簡(jiǎn)單的文本更好

·頁(yè)面的輸出取決于綁定到DetailsView的數(shù)據(jù)，比如說元數(shù)據(jù)或者說是數(shù)據(jù)的重新格式化

雖然模板列可以高度復(fù)雜的呈現(xiàn)DetailsView的數(shù)據(jù)，但DetailsView的輸入仍然讓人感到有些別扭，因?yàn)樗衙總€(gè)字段都顯示成HTML標(biāo)記<table>的一行。

FormView控件提供了一種更加復(fù)雜的輸出呈現(xiàn)。FormView并不含有什么列，它僅僅包括一系列的模板(ItemTemplate、EditItemTemplate、HeaderTemplate等等)。在下一節(jié)中，我們將看到如何使用FormView來達(dá)到呈現(xiàn)更多控件的效果。

編程愉快！

感謝各位的閱讀！關(guān)于“在DetailsView控件中如何使用TemplateField”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！