分享
 
 
 

ASP.NET2.0中实现模板中的数据绑定

王朝asp·作者佚名  2008-05-21
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有