引言
前几篇的文章在说AJAX的内容,利用AJAX技术能够开发出高效运行的网站应用程序,不过在进行B/S项目开发时只拥有AJAX技术是远远不够的,踏入到B/S要学的东西会更多,但相较C/S的复杂逻辑结构来说B/S在开发时还是很简单的。
在开发B/S项目时,常常会用到数据绑定控件,.NET平台已经对这些控件进行了良好的封装,只要稍有经验的程序猿很快就能够上手使用这些数据控件,所以接下来的几篇文章将会讨论数据控件,首先将会从数据控件的细节入手讨论ListView、GridView、Repeater、DataList控件的基本使用方法,并在会后系列文章的最后对这几个控件进行综合性的分析总结。
一、绑定控件之Repeater
.NET封装了多种数据绑定控件,诸如GridView、DataList等但该篇文章将会从Repeater入手,因为Repeater只提供了基本的数据绑定模板,没有内置其它分页等功能,所以它是最原始的数据绑定控件,只要能够熟练运用Repeater控件其它的绑定控件也就很简单了。
1、Repeater简介
Repeater 控件是基本模板化数据列表。 它不像GridView控件一样能够可视化的设计格式或样式,因此开发时在控件模板中必须显式声明所有格式、格式和样式标记。另外Repeater控件没有内置选择、排序、编辑、分页等功能,它只提供了基本的数据绑定,但是它为开发人员提供了ItemCommand 事件,该事件支持在控件中收发命令。
想要绑定数据,模板是必不可少的,Repeater控件同样支持数据模板,而且还可以在模板中添加想要的标签,它主要用法如下图:
Note:每个 Repeater 控件必须定义 ItemTemplate。
二、控件使用技巧
上文讲解了Repeater基本的使用方法及它的一些基本特性,接下来做几个经典的示例来运用Repeater控件。
1、数据绑定之删除、编辑
该示例将会使用Asp.net的前台和后台结合来实现显示数据,并能够编辑和删除数据。
删除页面:
编辑页面:
前台代码:在单击编辑按钮后将会进入编辑页面,页面是由两个Panel控件来控制,通过传递ID号的方式判断显示的是编辑页面还是删除页面,另外前台代码通过设置控件的CommandArgument属性来传递后台所需要判断的id号。
- <body>
- <form id="form1" runat="server">
- <div>
- <asp:Repeater ID="userRepeat" runat="server" OnItemCommand="userRepeat_ItemCommand" OnItemDataBound="userRepeat_ItemDataBound">
- <HeaderTemplate>
- <table border="1" style="width:1000px;text-align:center;border-collapse:collapse;">
- <thead style="background-color:red;">
- <tr>
- <th>ID</th>
- <th>内容</th>
- <th>操作</th>
- </tr>
- </thead>
- </HeaderTemplate>
- <ItemTemplate>
- <asp:Panel ID="plItem" runat="server">
- <tr>
- <td><asp:Label runat="server" ID="lblID" Text=‘<%#Eval("id") %>‘></asp:Label></td>
- <td><%#Eval("name") %></td>
- <td>
- <asp:LinkButton ID="lbtEdit" CommandName="Edit" CommandArgument=‘<%#Eval("id") %>‘ runat="server">编辑</asp:LinkButton>
- <asp:LinkButton ID="lbtDelete" CommandName="Delete" CommandArgument=‘<%#Eval("id") %>‘ runat="server">删除</asp:LinkButton>
- </td>
- </tr>
- </asp:Panel>
- <asp:Panel ID="plEdit" runat="server">
- <tr>
- <td><asp:Label runat="server" ID="Label1" Text=‘<%#Eval("id") %>‘></asp:Label></td>
- <td><asp:TextBox ID="txtName" runat="server" Text=‘<%#Eval("name") %>‘></asp:TextBox></td>
- <td>
- <asp:LinkButton ID="lbtCancel" CommandName="Cancel" CommandArgument=‘<%#Eval("id") %>‘ runat="server">取消</asp:LinkButton>
- <asp:LinkButton ID="lbtUpdate" CommandName="Update" CommandArgument=‘<%#Eval("id") %>‘ runat="server">更新</asp:LinkButton>
- </td>
- </tr>
- </asp:Panel>
- </ItemTemplate>
- <FooterTemplate>
- </table>
- </FooterTemplate>
- </asp:Repeater>
- </div>
- </form>
- </body>
后台代码:在后台代码中很重要的两个事件是ItemCommand和ItemDataBound,其中ItemCommand负责接收前台传进来的按钮命令,根据命令的参数来设置后台传递的id,并在ItemDataBound中来验证id判断切换显示Panel。
2、分页--PageDataSource
前台代码:使用原始的html文本,并添加了一个Literal标签,用来动态添加并指定html标签。
页面截图:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
-
- .pageBar
- {
- margin-top: 10px;
- }
- .pageBar a
- {
- color: #333;
- font-size: 12px;
- margin-right: 10px;
- padding: 4px;
- border: 1px solid #ccc;
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
-
- <asp:Repeater ID="Repeater1" runat="server" >
- <HeaderTemplate>
- <table border="1" cellpadding="0" cellspacing="0" style="width:1006px;border-collapse:collapse; text-align:center;">
- <tr>
- <th style="background-color:red">ID</th>
- <th style="background-color:red">内容</th>
- </tr>
- </HeaderTemplate>
- <ItemTemplate>
- <tr>
- <td><asp:Label ID="lblId" runat="server" Text=‘<%# DataBinder.Eval(Container.DataItem,"id") %>‘ ></asp:Label></td>
- <td><%# DataBinder.Eval(Container.DataItem,"name") %></td>
- </tr>
- </ItemTemplate>
- <FooterTemplate>
- </table>
- </FooterTemplate>
- </asp:Repeater>
-
- </div>
- <div class="pageBar">
- <asp:Literal ID="ltlPageBar" runat="server"></asp:Literal>
- </div>
- </form>
- </body>
- </html>
后台代码:Repeater控件的数据源是PagedDataSource对象,在页面加载时为该对象动态指定了分页的属性,并使用Literal标签来动态指定每个标签跳转页的链接。