模板化的數(shù)據(jù)綁定控件為我們在頁面上顯示數(shù)據(jù)提供了根本的靈活性。你可能還記得ASP.NET v1.x中的幾個模板化控件(例如DataList和Repeater控件)。ASP.NET 2.0仍然支持這些控件,但在模板中綁定數(shù)據(jù)的語法已經(jīng)被簡化和改善了。本文將討論在數(shù)據(jù)綁定控件模板中綁定數(shù)據(jù)的多種方法。
數(shù)據(jù)綁定表達(dá)式
ASP.NET 2.0改善了模板中的數(shù)據(jù)綁定操作,把v1.x中的數(shù)據(jù)綁定語法DataBinder.Eval(Container.DataItem, fieldname)簡化為Eval(fieldname)。Eval方法與DataBinder.Eval一樣可以接受一個可選的格式化字符串參數(shù)??s短的Eval語法與DataBinder.Eval的不同點(diǎn)在于,Eval會根據(jù)最近的容器對象(例如DataListItem)的DataItem屬性來自動地解析字段,而DataBinder.Eval需要使用參數(shù)來指定容器。由于這個原因,Eval只能在數(shù)據(jù)綁定控件的模板中使用,而不能用于Page(頁面)層。當(dāng)然,ASP.NET 2.0頁面中仍然支持DataBinder.Eval,你可以在不支持簡化的Eval語法的環(huán)境中使用它。
下面的例子演示了如何使用新的簡化的Eval數(shù)據(jù)綁定語法綁定到DataList數(shù)據(jù)項模板(ItemTemplate)中的Image、Label和HyperLink控件。
<asp:DataList ID="DataList1" RepeatColumns="5" Width="600" runat="server" DataSourceID="ObjectDataSource1"> <ItemTemplate> ?。糰sp: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> ?。糰sp:Label ID="CaptionLabel" runat="server" Text=‘<%# Eval("Caption") %>‘ /> </ItemTemplate> </asp:DataList><br /> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="DataComponentTableAdapters.PhotosTableAdapter" SelectMethod="GetPhotosForAlbum"> |
<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"> ?。糏temTemplate> ?。糰sp:Label ID="CaptionLabel" runat="server" Text=‘<%# Eval("Caption") %>‘ Font-Size="32pt" /><br /> <asp:Image ID="Image1" runat="server" ImageUrl=‘<%# Eval("FileName", "images/{0}") %>‘ /> ?。糰sp: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"> ?。糞electParameters> <asp:QueryStringParameter Name="PhotoID" DefaultValue="9" QueryStringField="ID" /> </SelectParameters> </asp:ObjectDataSource> |
<asp:FormView ID="FormView1" Runat="server" DataSourceID="SqlDataSource1" HeaderText="Books for Author" AllowPaging="True"> <ItemTemplate> ?。糰sp:Image ID="Image1" ImageUrl=‘<%# Eval("title_id","~/Images/{0}.gif") %>‘ Runat="server" /> ?。糰sp:Label ID="Label1" Font-Size="1.2em" Font-Bold="true" Text=‘<%# Eval("title") %>‘ runat="server" /> ?。糰sp: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> |
雙向數(shù)據(jù)綁定
FormView可以通過相關(guān)的數(shù)據(jù)源控件支持自動地更新、插入和刪除操作(與DetailsView類似)。如果要定義編輯或插入的UI,那么除了定義數(shù)據(jù)項模板(ItemTemplate)之外,你還要定義EditItemTemplate或InsertItemTemplate模板。在這個模板中,你可以把輸入控件(例如文本框、檢查框或下拉列表)綁定到數(shù)據(jù)源的字段。這些模板中的數(shù)據(jù)綁定使用了"雙向"數(shù)據(jù)綁定語法,允許FormView從模板的輸入控件中提取值并傳遞給數(shù)據(jù)源。這些數(shù)據(jù)綁定操作用新的Bind(fieldname)語法代替了Eval。
請注意:使用Bind語法的數(shù)據(jù)綁定控件必須設(shè)置好ID屬性。
GridView或DetailsView執(zhí)行更新或插入操作的時候(這些控件的Columns或Fields都會定義BoundFields,綁定字段),GridView或 DetailsView負(fù)責(zé)建立編輯或插入模式中的輸入UI,因此它能夠自動地提取這些值并把它們傳遞給數(shù)據(jù)源。由于模板包含了任意的用戶自定義UI控件,雙向數(shù)據(jù)綁定語法就是必要的,以確保模板化控件(例如FormView)在應(yīng)對更新、插入或刪除操作的時候,知道應(yīng)該從模板中提取那些控件的值。你仍然可以在EditItemTemplate中使用Eval語句進(jìn)行數(shù)據(jù)綁定,來給數(shù)據(jù)源傳遞值。請注意,F(xiàn)ormView與DetailsView和GridView一樣支持DataKeyNames屬性,它保存了傳遞給更新/刪除操作的主鍵字典的原始值,即使這些值沒有顯示出來。
FormView支持DefaultMode屬性,它可以指定默認(rèn)顯示的模板,但在默認(rèn)情況下FormView處于只讀模式并顯示ItemTemplate模板。為了把UI從只讀模式轉(zhuǎn)換為編輯或插入模式,你可以給模板添加一個按鈕控件,把該按鈕的CommandName屬性設(shè)置為Edit或New。在EditItemTemplate模板中,你可以增加按鈕,把CommandName設(shè)置為Update或Cancel以提交或終止更新操作。類似的,你可以增加按鈕,把CommandName設(shè)置為Insert或Cancel來提交或終止插入操作。
下面的例子演示了定義了ItemTemplate和EditItemTemplate模板的FormView。其中的ItemTemplate模板包含了使用Eval(雙向)綁定的控件,而EditItemTemplate模板則包含了使用Bind語句進(jìn)行雙向綁定的文本框控件。主鍵字段(PhotoID)是使用DataKeyNames屬性存放在viewstate中的。該FormView包含了用于在模板之間進(jìn)行切換的按鈕。
<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1" DataKeyNames="PhotoID"> <EditItemTemplate> ?。糱>Enter a New Caption:</b> ?。糰sp:TextBox Text=‘<%# Bind("Caption") %>‘ runat="server" ID="CaptionTextBox" /> <asp:Button ID="Button1" runat="server" Text="Update" CommandName="Update" /> ?。糰sp:Button ID="Button2" runat="server" Text="Cancel" CommandName="Cancel" /> </EditItemTemplate> <ItemTemplate> ?。糰sp:Label ID="CaptionLabel" runat="server" Text=‘<%# Eval("Caption") %>‘ Font-Size="32pt" /><br /> ?。糰sp:Image ID="Image1" runat="server" ImageUrl=‘<%# Eval("FileName", "images/{0}") %>‘ /> <br /> ?。糰sp: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}"> ?。糢pdateParameters> ?。糰sp:Parameter Name="Caption" /> ?。糰sp:Parameter Name="Original_PhotoID" /> ?。?UpdateParameters> <SelectParameters> <asp:QueryStringParameter Name="PhotoID" DefaultValue="9" QueryStringField="ID" /> </SelectParameters> </asp:ObjectDataSource> |
…… <asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" DataKeyNames="AlbumID"> ?。糃olumns> ?。糰sp:CommandField ShowEditButton="True" /> ?。糰sp:BoundField ReadOnly="True" HeaderText="AlbumID" DataField="AlbumID" SortExpression="AlbumID" /> ?。糰sp:TemplateField HeaderText="AlbumName" SortExpression="AlbumName" ItemStyle-Wrap="false"> ?。糏temTemplate> ?。糰sp:Label ID="Label1" runat="server" Text=‘<%# Eval("AlbumName") %>‘></asp:Label> ?。?ItemTemplate> ?。糆ditItemTemplate> ?。糰sp:TextBox ID="TextBox1" runat="server" Text=‘<%# Bind("AlbumName") %>‘></asp:TextBox> ?。糰sp: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" /> ?。糰sp:ObjectDataSource ID="ObjectDataSource1" runat="server" ConvertNullToDBNull="true" TypeName="DataComponentTableAdapters.AlbumsTableAdapter" SelectMethod="GetAlbumsByOwner" UpdateMethod="Update" OldValuesParameterFormatString="original_{0}"> …… </asp:ObjectDataSource> |
<asp:TemplateField HeaderText="Owner" SortExpression="Owner"> <ItemTemplate> ?。糰sp:Label ID="Label2" runat="server" Text=‘<%# Eval("Owner") %>‘></asp:Label> </ItemTemplate> ?。糆ditItemTemplate> <asp:DropDownList DataSourceID="ObjectDataSource2" DataTextField="Owner" DataValueField="Owner" ID="DropDownList2" runat="server" SelectedValue=‘<%# Bind("Owner") %>‘> ?。?asp:DropDownList> </EditItemTemplate> <ItemStyle Wrap="False" /> </asp:TemplateField> |