ASP.NET 2.0中實現模板中的數據綁定

模板化的數據綁定控件爲我們在頁面上顯示數據提供了根本的靈活性。你可能還記得ASP.NET v1.x中的幾個模板化控件（例如DataList和Repeater控件）。ASP.NET 2.0仍然支持這些控件，但在模板中綁定數據的語法已經被簡化和改善了。本文將討論在數據綁定控件模板中綁定數據的多種方法。

　　數據綁定表達式

　　ASP.NET 2.0改善了模板中的數據綁定操作，把v1.x中的數據綁定語法DataBinder.Eval(Container.DataItem, fieldname)簡化爲Eval(fieldname)。Eval方法與DataBinder.Eval一樣可以接受一個可選的格式化字符串參數。縮短的Eval語法與DataBinder.Eval的不同點在於，Eval會根據最近的容器對象（例如DataListItem）的DataItem屬性來自動地解析字段，而DataBinder.Eval需要使用參數來指定容器。由於這個原因，Eval只能在數據綁定控件的模板中使用，而不能用於Page（頁面）層。當然，ASP.NET 2.0頁面中仍然支持DataBinder.Eval，你可以在不支持簡化的Eval語法的環境中使用它。

　　下面的例子演示瞭如何使用新的簡化的Eval數據綁定語法綁定到DataList數據項模板（ItemTemplate）中的Image、Label和HyperLink控件。

＜asp:DataList ID="DataList1" RepeatColumns="5" Width="600" runat="server" DataSourceID="ObjectDataSource1"＞
　＜ItemTemplate＞
　　＜asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='＜%# Eval("PhotoID", "PhotoFormViewPlain.aspx?ID={0}") %＞'＞
　　＜asp:Image ID="Image1" Runat="server" ImageUrl='＜%# Eval("FileName", "images/thumbs/{0}") %＞' /＞＜/asp:HyperLink＞
　　＜asp:Label ID="CaptionLabel" runat="server" Text='＜%# Eval("Caption") %＞' /＞
　＜/ItemTemplate＞
＜/asp:DataList＞＜br /＞
＜asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="DataComponentTableAdapters.PhotosTableAdapter" SelectMethod="GetPhotosForAlbum"＞

　　數據綁定也可以作爲控件的主題定義（theme definition）的一部分，這樣我們就可以通過改變主題來隨意地改變模板化控件的佈局和外觀。但是Theme（主題）模板中只能使用Eval（或者後面討論的Bind）。綁定到任意的用戶代碼是被禁止的。

　　FormView控件

　　DataList控件在來自數據源的數據項中進行迭代操作，併爲每個數據項輸出ItemTemplate（數據項模板）。這對於顯示數據項列表是有用的，但是通常情況下，你希望在一個窗體中實現單條數據項的綁定操作。爲了實現這個目的，ASP.NET 2.0引入了FormView控件，它能夠在任意的模板中每次顯示一個數據項。DetailsView和FormView之間的主要差異在於，DetailsView擁有內建的表格顯示方式，而FormView需要使用用戶自定義的顯示模板。在其它方面FormView和DetailsView對象模型是非常相似的。下面的例子顯示了一個綁定到ObjectDataSource的FormView控件。該FormView的ItemTemplate屬性包含數據綁定的Image、Label和HyperLink控件，與前面的DataList示例類似。

＜asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"＞
　＜ItemTemplate＞
　　＜asp:Label ID="CaptionLabel" runat="server" Text='＜%# Eval("Caption") %＞' Font-Size="32pt" /＞＜br /＞
　　＜asp:Image ID="Image1" runat="server" ImageUrl='＜%# Eval("FileName", "images/{0}") %＞' /＞
　　＜asp:HyperLink ID="HyperLink1" Text="Back to Album" NavigateUrl='＜%# Eval("AlbumID", "PhotosDataList.aspx?ID={0}") %＞' runat="server" /＞
　＜/ItemTemplate＞
＜/asp:FormView＞
＜asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="DataComponentTableAdapters.PhotosTableAdapter" SelectMethod="GetPhoto"＞
　＜SelectParameters＞
＜asp:QueryStringParameter Name="PhotoID" DefaultValue="9" QueryStringField="ID" /＞
＜/SelectParameters＞
＜/asp:ObjectDataSource＞

　　FormView與DetailsView類似，也跟蹤當前顯示的數據項，但是當數據源返回列表的時候，我們也可以選擇支持多個數據項的分頁操作。下面的例子顯示了一個帶有分頁功能的FormView。

＜asp:FormView ID="FormView1" Runat="server" DataSourceID="SqlDataSource1"
HeaderText="Books for Author" AllowPaging="True"＞
　＜ItemTemplate＞
　　＜asp:Image ID="Image1" ImageUrl='＜%# Eval("title_id","~/Images/{0}.gif") %＞' Runat="server" /＞
　　＜asp:Label ID="Label1" Font-Size="1.2em" Font-Bold="true" Text='＜%# Eval("title") %＞' runat="server" /＞
　　＜asp:Label ID="Label2" Text='＜%# Eval("price","{0:c}") %＞' runat="server" /＞
　＜/ItemTemplate＞
＜/asp:FormView＞
＜asp:SqlDataSource ID="SqlDataSource1" Runat="server" SelectCommand="SELECT dbo.authors.au_id, dbo.titles.title_id, dbo.titles.title, dbo.titles.type, dbo.titles.price, dbo.titles.notes FROM dbo.authors INNER JOIN dbo.titleauthor ON dbo.authors.au_id = dbo.titleauthor.au_id INNER JOIN dbo.titles ON dbo.titleauthor.title_id = dbo.titles.title_id WHERE (dbo.authors.au_id = @au_id)"
ConnectionString="＜%$ ConnectionStrings:Pubs %＞"＞
＜SelectParameters＞
＜asp:QueryStringParameter Name="au_id" DefaultValue="213-46-8915" QueryStringField="ID" /＞
＜/SelectParameters＞
＜/asp:SqlDataSource＞
雙向數據綁定

　　FormView可以通過相關的數據源控件支持自動地更新、插入和刪除操作（與DetailsView類似）。如果要定義編輯或插入的UI，那麼除了定義數據項模板（ItemTemplate）之外，你還要定義EditItemTemplate或InsertItemTemplate模板。在這個模板中，你可以把輸入控件（例如文本框、檢查框或下拉列表）綁定到數據源的字段。這些模板中的數據綁定使用了"雙向"數據綁定語法，允許FormView從模板的輸入控件中提取值並傳遞給數據源。這些數據綁定操作用新的Bind(fieldname)語法代替了Eval。

　　請注意：使用Bind語法的數據綁定控件必須設置好ID屬性。

　　GridView或DetailsView執行更新或插入操作的時候（這些控件的Columns或Fields都會定義BoundFields，綁定字段），GridView或 DetailsView負責建立編輯或插入模式中的輸入UI，因此它能夠自動地提取這些值並把它們傳遞給數據源。由於模板包含了任意的用戶自定義UI控件，雙向數據綁定語法就是必要的，以確保模板化控件（例如FormView）在應對更新、插入或刪除操作的時候，知道應該從模板中提取那些控件的值。你仍然可以在EditItemTemplate中使用Eval語句進行數據綁定，來給數據源傳遞值。請注意，FormView與DetailsView和GridView一樣支持DataKeyNames屬性，它保存了傳遞給更新/刪除操作的主鍵字典的原始值，即使這些值沒有顯示出來。

　　FormView支持DefaultMode屬性，它可以指定默認顯示的模板，但在默認情況下FormView處於只讀模式並顯示ItemTemplate模板。爲了把UI從只讀模式轉換爲編輯或插入模式，你可以給模板添加一個按鈕控件，把該按鈕的CommandName屬性設置爲Edit或New。在EditItemTemplate模板中，你可以增加按鈕，把CommandName設置爲Update或Cancel以提交或終止更新操作。類似的，你可以增加按鈕，把CommandName設置爲Insert或Cancel來提交或終止插入操作。

　　下面的例子演示了定義了ItemTemplate和EditItemTemplate模板的FormView。其中的ItemTemplate模板包含了使用Eval（雙向）綁定的控件，而EditItemTemplate模板則包含了使用Bind語句進行雙向綁定的文本框控件。主鍵字段（PhotoID）是使用DataKeyNames屬性存放在viewstate中的。該FormView包含了用於在模板之間進行切換的按鈕。

＜asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1" DataKeyNames="PhotoID"＞
＜EditItemTemplate＞
　＜b＞Enter a New Caption:＜/b＞
　＜asp:TextBox Text='＜%# Bind("Caption") %＞' runat="server" ID="CaptionTextBox" /＞ ＜asp:Button ID="Button1" runat="server" Text="Update" CommandName="Update" /＞
　＜asp:Button ID="Button2" runat="server" Text="Cancel" CommandName="Cancel" /＞
＜/EditItemTemplate＞
＜ItemTemplate＞
　＜asp:Label ID="CaptionLabel" runat="server" Text='＜%# Eval("Caption") %＞' Font-Size="32pt" /＞＜br /＞
　＜asp:Image ID="Image1" runat="server" ImageUrl='＜%# Eval("FileName", "images/{0}") %＞' /＞ ＜br /＞
　＜asp:Button ID="Button3" runat="server" Text="Edit Caption..." CommandName="Edit" /＞ ＜asp:HyperLink ID="HyperLink1" Text="Back to Album" NavigateUrl='＜%# Eval("AlbumID", "PhotosDataList.aspx?ID={0}") %＞' runat="server" /＞
＜/ItemTemplate＞
＜/asp:FormView＞
＜asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="DataComponentTableAdapters.PhotosTableAdapter" SelectMethod="GetPhoto" UpdateMethod="UpdateCaption" OldValuesParameterFormatString="original_{0}"＞
　＜UpdateParameters＞
　　＜asp:Parameter Name="Caption" /＞
　　＜asp:Parameter Name="Original_PhotoID" /＞
　＜/UpdateParameters＞
＜SelectParameters＞
＜asp:QueryStringParameter Name="PhotoID" DefaultValue="9" QueryStringField="ID" /＞
＜/SelectParameters＞
＜/asp:ObjectDataSource＞

　　GridView和DetailsView還支持模板化UI，它是通過給Columns或Fields集合增加TemplateField來實現的。TemplateField支持使用ItemTemplate、EditItemTemplate和InsertItemTemplate（DetailsView纔有）爲控件的不同顯示模式中的字段指定UI。與上面的FormView示例類似，EditItemTemplate或InsertItemTemplate中的雙向數據綁定也允許GridView或DetailsView從這些模板的控件中提取值。TemplateField最常見的用途是給EditItemTemplate增加驗證器控件，用於公開地驗證GridView或DetailsView操作。下面的例子演示了這種技術。



……
＜asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" DataKeyNames="AlbumID"＞
　＜Columns＞
　　＜asp:CommandField ShowEditButton="True" /＞
　　＜asp:BoundField ReadOnly="True" HeaderText="AlbumID" DataField="AlbumID" SortExpression="AlbumID" /＞
　　＜asp:TemplateField HeaderText="AlbumName" SortExpression="AlbumName" ItemStyle-Wrap="false"＞
　　　＜ItemTemplate＞
　　　　＜asp:Label ID="Label1" runat="server" Text='＜%# Eval("AlbumName") %＞'＞＜/asp:Label＞
　　　＜/ItemTemplate＞
　　　＜EditItemTemplate＞
　　　　＜asp:TextBox ID="TextBox1" runat="server" Text='＜%# Bind("AlbumName") %＞'＞＜/asp:TextBox＞
　　　　＜asp:RequiredFieldValidator ControlToValidate="TextBox1" ErrorMessage="AlbumName cannot be empty" ID="RequiredFieldValidator1" Display="Dynamic" runat="server"＞*＜/asp:RequiredFieldValidator＞
　　　＜/EditItemTemplate＞
　　＜/asp:TemplateField＞
　　……
　　＜/asp:GridView＞＜br /＞
　　＜asp:ValidationSummary ID="ValidationSummary1" runat="server" /＞
　　＜asp:ObjectDataSource ID="ObjectDataSource1" runat="server" ConvertNullToDBNull="true"
TypeName="DataComponentTableAdapters.AlbumsTableAdapter" SelectMethod="GetAlbumsByOwner" UpdateMethod="Update" OldValuesParameterFormatString="original_{0}"＞
　　……
＜/asp:ObjectDataSource＞

　　TemplateField的另外一種用途是定製給GridView或DetailsView列/字段輸入值的控件。例如，你可以在TemplateField的EditItemTemplate中放置一個DropDownList，允許用戶從預定義的值列表中選擇。下面的例子演示了這種技術。請注意，示例中的下拉列表綁定到了自己的數據源控件，以動態地獲取列表值。

＜asp:TemplateField HeaderText="Owner" SortExpression="Owner"＞
　＜ItemTemplate＞
　　＜asp:Label ID="Label2" runat="server" Text='＜%# Eval("Owner") %＞'＞＜/asp:Label＞
　＜/ItemTemplate＞
　＜EditItemTemplate＞
　　＜asp:DropDownList DataSourceID="ObjectDataSource2" DataTextField="Owner" DataValueField="Owner" ID="DropDownList2" runat="server" SelectedValue='＜%# Bind("Owner") %＞'＞
　　＜/asp:DropDownList＞
　＜/EditItemTemplate＞
　＜ItemStyle Wrap="False" /＞
＜/asp:TemplateField＞