ASP.NET 2.0中实现模板中的数据绑定

wapysun

浏览: 21489743 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

ASP.net ASP .net UI

板化的数据绑定控件为我们在页面上显示数据提供了根本的灵活性。你可能还记得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" />&nbsp;<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>