您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 2.0 模板資料繫結系列：Eval 簡化語法、FormView/DetailsView 控制項與分頁實作

編輯：關於ASP.NET

Eval 簡化語法：取代 DataBinder.Eval

ASP.NET 2.0 在資料繫結控制項模板中引入 Eval("FieldName")，自動解析最近命名容器的 DataItem 屬性，語法比 DataBinder.Eval(Container.DataItem, "FieldName") 更簡潔。

<asp:DataList ID="dlPhotos" runat="server" DataSourceID="odsPhotos" RepeatColumns="5">
    <ItemTemplate>
        <asp:HyperLink ID="hlPhoto" runat="server" 
            NavigateUrl='<%# Eval("PhotoID", "PhotoFormView.aspx?ID={0}") %>'>
            <asp:Image ID="imgThumb" runat="server" 
                ImageUrl='<%# Eval("FileName", "images/thumbs/{0}") %>' />
        </asp:HyperLink>
        <asp:Label ID="lblCaption" runat="server" Text='<%# Eval("Caption") %>' />
    </ItemTemplate>
</asp:DataList>

Eval("Field", "Format")：支援格式化字串，{0} 為欄位值。
限制：僅能在資料繫結控制項模板中使用，不可在頁面層級 (<%# Eval(...) %> 於頁面直接報錯)。頁面層級仍需用 DataBinder.Eval。

FormView：單一資料項完整呈現與編輯

FormView 針對單筆資料提供完整模板化呈現，支援 ReadOnly、Edit、Insert 三種模式，適合「主檔維護」頁面。

基本繫結 (ObjectDataSource)

<asp:FormView ID="fvPhoto" runat="server" DataSourceID="odsPhoto" DataKeyNames="PhotoID">
    <ItemTemplate>
        <asp:Label ID="lblCaption" runat="server" Text='<%# Eval("Caption") %>' Font-Size="32pt" /><br/>
        <asp:Image ID="imgPhoto" runat="server" ImageUrl='<%# Eval("FileName", "images/{0}") %>' />
        <asp:HyperLink ID="hlBack" runat="server" Text="Back to Album" 
            NavigateUrl='<%# Eval("AlbumID", "PhotosList.aspx?ID={0}") %>' />
    </ItemTemplate>
</asp:FormView>

<asp:ObjectDataSource ID="odsPhoto" runat="server" 
    TypeName="PhotoBLL" SelectMethod="GetPhoto">
    <SelectParameters>
        <asp:QueryStringParameter Name="PhotoID" QueryStringField="ID" DefaultValue="9" />
    </SelectParameters>
</asp:ObjectDataSource>

支援分頁的 FormView

<asp:FormView ID="fvBooks" runat="server" DataSourceID="dsBooks" 
    AllowPaging="true" HeaderText="Books for Author">
    <ItemTemplate>
        <asp:Image ID="imgBook" runat="server" ImageUrl='<%# Eval("title_id", "~/Images/{0}.gif") %>' />
        <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("title") %>' Font-Size="1.2em" Font-Bold="true" />
        <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("price", "{0:c}") %>' />
    </ItemTemplate>
    <PagerTemplate>
        <asp:LinkButton CommandName="Prev" Text="< Prev" runat="server" />
        <asp:Label ID="lblPage" runat="server" Text='Page <%# Container.PageIndex + 1 %> of <%# Container.PageCount %>' />
        <asp:LinkButton CommandName="Next" Text="Next >" runat="server" />
    </PagerTemplate>
</asp:FormView>

<asp:SqlDataSource ID="dsBooks" runat="server" 
    ConnectionString="<%$ ConnectionStrings:Pubs %>"
    SelectCommand="SELECT ... FROM authors INNER JOIN titleauthor ... INNER JOIN titles ... WHERE authors.au_id = @au_id">
    <SelectParameters>
        <asp:QueryStringParameter Name="au_id" QueryStringField="ID" DefaultValue="213-46-8915" />
    </SelectParameters>
</asp:SqlDataSource>

AllowPaging="true" 啟用分頁，資料來源需支援分頁 (SqlDataSource/ObjectDataSource 需正確實作)。
PagerTemplate 自訂分頁導航 UI。
Container.PageIndex、Container.PageCount 僅在 PagerTemplate 可用。

DetailsView：內建表格式呈現

DetailsView 類似 FormView 但**內建表格佈局** (每欄一列)，適合快速建立「詳細檢視/編輯」頁面，無需手寫 HTML 表格。

<asp:DetailsView ID="dvPhoto" runat="server" DataSourceID="odsPhoto" 
    AutoGenerateRows="False" DataKeyNames="PhotoID" DefaultMode="ReadOnly">
    <Fields>
        <asp:BoundField DataField="Caption" HeaderText="標題" />
        <asp:ImageField DataImageUrlField="FileName" DataImageUrlFormatString="images/{0}" HeaderText="圖片" />
        <asp:HyperLinkField DataTextField="AlbumName" DataNavigateUrlFields="AlbumID" 
            DataNavigateUrlFormatString="AlbumPhotos.aspx?ID={0}" HeaderText="相簿" />
        <asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />
    </Fields>
</asp:DetailsView>

主題佈景主題整合

ASP.NET 2.0 Theme (佈景主題) 可包含控制項皮膚 (.skin)，其中**只能使用 Eval/Bind**，不可呼叫自訂程式碼：

' Theme.skin
<asp:GridView runat="server" 
    RowStyle-CssClass="gridRow" 
    AlternatingRowStyle-CssClass="gridAltRow"
    HeaderStyle-CssClass="gridHeader" />

' 頁面套用主題
<%@ Page Theme="MyTheme" %>

主題分離外觀與邏輯，支援執行期動態切換 (Page.Theme = "Dark")。

雙向繫結 Bind：編輯模板必備

<EditItemTemplate>
    <asp:TextBox ID="txtCaption" runat="server" Text='<%# Bind("Caption") %>' />
    <asp:TextBox ID="txtPrice" runat="server" Text='<%# Bind("Price", "{0:F2}") %>' />
    <asp:LinkButton CommandName="Update" Text="儲存" runat="server" />
    <asp:LinkButton CommandName="Cancel" Text="取消" runat="server" />
</EditItemTemplate>

Bind("Field")：雙向，擷取使用者輸入寫回資料來源 (需資料來源支援 Update)。
Eval("Field")：單向，僅顯示。

實戰比較：FormView vs DetailsView vs GridView

控制項	呈現方式	適用場景	模板彈性	內建功能
FormView	單一資料項、完全自訂模板	主檔維護、詳細檢視、複雜版面	最高 (Item/Edit/Insert/Pager Template)	分頁、模式切換
DetailsView	單一資料項、表格式 (欄位為列)	快速詳細檢視/編輯、欄位固定	中 (Fields 集合、Field 模板)	分頁、插入/編輯/刪除、自動表格
GridView	多筆資料、表格式 (列為資料行)	清單、報表、批次操作	中 (Columns 集合、Row 模板)	分頁、排序、選取、編輯、刪除

結語

ASP.NET 2.0 透過 Eval/Bind 簡化語法、FormView/DetailsView 專注單筆資料呈現與編輯、Theme 整合樣式分離，大幅提升模板資料繫結的開發效率與維護性。掌握 Eval 單向顯示與 Bind 雙向編輯的區別、PagerTemplate 自訂分頁、ObjectDataSource/SqlDataSource 參數化查詢，即能快速構建專業級資料驅動頁面。