共用方式為

使用 FormView 的範本 （C#）

由 斯科特·米切爾

下載 PDF

與 DetailsView 不同，FormView 不是由字段所組成。 相反地，FormView 會使用範本轉譯。 在本教學課程中，我們將使用 FormView 控件來呈現較不嚴格的數據顯示。

簡介

在最後兩個教學課程中，我們已瞭解如何使用TemplateFields自定義 GridView 和 DetailsView 控件的輸出。 TemplateFields 允許高度自定義特定欄位的內容，但最終 GridView 和 DetailsView 都有相當方塊、類似網格線的外觀。 在許多情況下，這類網格線式版面配置是理想的，但有時需要更流暢、較不嚴格的顯示器。 顯示單一記錄時，可以使用 FormView 控件來設定這類流暢的版面配置。

與 DetailsView 不同，FormView 不是由字段所組成。 您無法將 BoundField 或 TemplateField 新增至 FormView。 相反地，FormView 會使用範本轉譯。 將 FormView 視為包含單一 TemplateField 的 DetailsView 控件。 FormView 支援下列範本：

  • ItemTemplate 用來轉譯 FormView 中顯示的特定記錄
  • HeaderTemplate 用來指定選擇性的標頭數據列
  • FooterTemplate 用來指定選擇性頁尾數據列
  • EmptyDataTemplate 當 FormView DataSource 缺少任何記錄時， EmptyDataTemplate 會用來取代 ItemTemplate 來轉譯控件的標記
  • PagerTemplate 可用來自訂分頁功能已啟用的 FormView 的分頁介面
  • EditItemTemplate / InsertItemTemplate 用於自定義支援此類功能的 FormView 之編輯介面或插入介面

在本教學課程中，我們將使用 FormView 控件來呈現較不嚴格的產品顯示。 FormView 會 ItemTemplate 使用標頭元素和 <table> 的組合來顯示這些值，而不是具有名稱、類別、供應商等欄位（請參閱圖 1）。

FormView 脫離 DetailsView 中看到的 Grid-Like 版面配置

圖 1：FormView 超出 DetailsView 中的 Grid-Like 版面配置（按一下以檢視完整大小的影像）

步驟 1：將數據系結至 FormView

開啟FormView.aspx頁面，然後將 FormView 從 [工具箱] 拖曳至設計工具。 第一次新增 FormView 時，它會以灰色方塊顯示，提示我們需要一個ItemTemplate。

在提供 ItemTemplate 之前，FormView 無法在設計工具中顯示

圖 2：在提供 ItemTemplate 之前，FormView 無法在設計工具中顯示（點選以檢視完整大小的影像）

ItemTemplate可以手動建立 或透過宣告式語法建立 ，也可以透過設計工具將 FormView 系結至數據源控件來自動建立。 這個自動建立 ItemTemplate 的 HTML 包含每個欄位的名稱，以及屬性 Text 系結至欄位值的 Label 控制項。 此方法也會自動建立 InsertItemTemplate 和 EditItemTemplate，這兩者都會填入數據源控件所傳回之每個數據欄位的輸入控件。

如果您想要自動建立範本，請從 FormView 的智慧標記新增 ObjectDataSource 控制件，以叫用 ProductsBLL 類別的 GetProducts() 方法。 這會建立具備 ItemTemplate、InsertItemTemplate 和 EditItemTemplate 的 FormView。 從 [來源] 檢視中移除 InsertItemTemplate ， EditItemTemplate 因為我們不想建立支援編輯或插入的 FormView。 接下來，清除 ItemTemplate 內的標記，以便我們能夠從一個全新的開始進行操作。

如果您想要手動設置 ItemTemplate，可以將 ObjectDataSource 從 [工具箱] 拖曳至設計工具，然後新增和配置 ObjectDataSource。 不過，請勿從設計工具設定 FormView 的數據源。 請改為移至 [來源] 檢視，並手動將 FormView 的 DataSourceID 屬性設定為 ID ObjectDataSource 的值。 接下來，手動新增 ItemTemplate。

無論您決定採取何種方法，此時您的 FormView 宣告式標記看起來應該像這樣：

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

花點時間檢查 FormView 智慧標籤中的「啟用分頁」複選框；這將把AllowPaging="True" 屬性新增到 FormView 的宣告語法中。 此外，將 EnableViewState 屬性設定為 False。

步驟 2：定義ItemTemplate 的標記

當 FormView 系結至 ObjectDataSource 控制項並設定為支援分頁時，我們已準備好為 ItemTemplate 指定內容。 在本教學課程中，讓我們在標題中 <h3> 顯示產品的名稱。 接下來，讓我們使用 HTML <table> 在四欄數據表中顯示剩餘的產品屬性，其中第一個和第三個數據行會列出屬性名稱，第二個和第四個數據行會列出其值。

此標記可以透過設計工具中的 FormView 範本編輯介面輸入，或透過宣告式語法手動輸入。 使用範本時，我通常會發現直接使用宣告式語法會更快，但您可以隨意使用您最熟悉的任何技術。

下列標記顯示出已完成ItemTemplate結構後的FormView宣告式標記：

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

請注意，數據綁定語法，例如 - <%# Eval("ProductName") %>，可以直接插入到模板的輸出中。 也就是說，它不需要指派給 Label 控件的 Text 屬性。 例如，我們使用ProductName在<h3>元素中顯示<h3><%# Eval("ProductName") %></h3>值，而 Chai 的產品會呈現為<h3>Chai</h3>。

ProductPropertyLabel和 ProductPropertyValue CSS 類別可用來指定 中的<table>產品名稱和值樣式。 這些 CSS 類別定義在 Styles.css 中，使屬性名稱以粗體顯示並靠右對齊，並為屬性值增加右邊的填充。

由於 FormView 沒有 CheckBoxFields 可用，因此為了將值顯示為 Discontinued 複選框，我們必須新增自己的 CheckBox 控制件。 屬性 Enabled 設定為 False，使其為唯讀，而 CheckBox 的 Checked 屬性會系結至數據欄位的值 Discontinued 。

ItemTemplate完成之後，產品資訊會以更流暢的方式顯示。 比較上一個教學課程的DetailsView輸出（圖 3）與本教學課程中 FormView 所產生的輸出（圖 4）。

固定詳細數據檢視輸出

圖 3：固定詳細資料檢視輸出（按一下以檢視完整大小的影像）

Fluid FormView 輸出

圖 4：流暢的 FormView 輸出（按兩下以檢視完整大小的影像）

總結

雖然 GridView 和 DetailsView 控件可以使用 TemplateFields 自定義其輸出，但兩者仍會以類似方格的 Boxy 格式呈現其數據。 對於需要使用較不嚴格的版面配置來顯示單一記錄時，FormView 是理想的選擇。 如同 DetailsView，FormView 會從其 DataSource轉譯單一記錄，但與 DetailsView 不同，它只由範本組成，而且不支援字段。

如本教學課程中所見，FormView 允許在顯示單一記錄時提供更有彈性的版面配置。 在未來的教學課程中，我們將檢查 DataList 和 Repeater 控件，這些控件提供與 FormsView 相同的彈性層級，但能夠顯示多個記錄（例如 GridView）。

快樂的程序設計！

關於作者

斯科特·米切爾，七本 ASP/ASP.NET 書籍和 4GuysFromRolla.com 創始人的作者，自1998年以來一直與Microsoft Web 技術合作。 斯科特擔任獨立顧問、教練和作家。 他的最新書是 山姆斯教你自己在24小時內學會 ASP.NET 2.0。 他可以聯絡 mitchell@4GuysFromRolla.com。

特別感謝

本教學系列已由許多熱心的評論者審閱。 本教學課程的主要檢閱者是 E.R. Gilmore。 有興趣檢閱我即將推出的 MSDN 文章嗎？ 如果是，請在 mitchell@4GuysFromRolla.com給我留言。

上一頁下一頁