ASP.NET 3.5 中的完整 ListView

• 下载源码 - 4.12 KB

引言

ASP.NET 3.5 引入了一个名为 ListView 的新数据绑定控件。 ASP.NET 已经有很多数据绑定控件；它应该超过 10 个。但好消息是，ListView 实际上可以替换 ASP.NET 中所有其他数据绑定控件。ListView 控件使数据绑定比以前的控件更容易。它包括使用 CSS 的样式设置、灵活的分页、排序、插入、删除和更新功能。

完整的 ListView

在本文中，我将逐步介绍 ListView 的功能，并附带相关的代码审查。

1. 数据绑定
2. 数据分页器
3. 排序
4. 插入、更新和删除

DataBinding

ListView 是一个模板驱动的控件，这意味着它不会呈现任何内容。 默认情况下，开发人员必须完全指定他/她希望以模板形式呈现的 HTML。 要在 ListView 控件中显示数据，您需要使用一个 LayoutTemplate（用于定义输出呈现的 HTML 的顶层）。 为了显示数据，您需要使用 ItemTemplate 和 AlternativeItemTemplate 来显示备用行，并使用不同的 CSS。 这是使用 AlternativeItemTemplate 进行简单数据绑定的示例。

//very simple databinding in ListView
<LayoutTemplate>
 <table border="0" cellpadding="1">
  <tr style="background-color:#E5E5FE">
   <th align="left"><asp:LinkButton ID="lnkId" runat="server">Id</asp:LinkButton></th>
   <th align="left"><asp:LinkButton ID="lnkName" runat="server">Name</asp:LinkButton></th>
   <th align="left"><asp:LinkButton ID="lnkType" runat="server">Type</asp:LinkButton></th>
   <th></th>
  </tr>
  <tr id="itemPlaceholder" runat="server"></tr>
 </table>
</LayoutTemplate>
<ItemTemplate>
  <tr>
   <td><asp:Label runat="server" ID="lblId"><%#Eval("ID") %></asp:Label></td>
   <td><asp:Label runat="server" ID="lblName"><%#Eval("FirstName")+" 
	"+Eval("LastName") %></asp:Label></td>
   <td><asp:Label runat="server" ID="lblType"><%#Eval("ContactType") %></asp:Label></td>
   <td></td>
  </tr>
</ItemTemplate>
<AlternatingItemTemplate>
  <tr style="background-color:#EFEFEF">
   <td><asp:Label runat="server" ID="lblId"><%#Eval("ID") %></asp:Label></td>
   <td><asp:Label runat="server" ID="lblName"><%#Eval("FirstName")+" "+
	Eval("LastName") %></asp:Label></td>
   <td><asp:Label runat="server" ID="lblType"><%#Eval("ContactType") %></asp:Label></td>
   <td></td>
  </tr>
</AlternatingItemTemplate>

这里，Layout 模板创建控件的标头，而 ItemTemplate 显示从表中使用 Binding 列和 Label 控件获取的数据，而 AlternativeItemTemplate 执行与 ItemTemplate 相同的功能，只是更改了备用列的 CSS。

DataPager

要在 listview 中添加分页，您需要添加一个 asp:DataPager 控件，最好将此控件放在 LayoutTemplate 内部的 LayoutTemplate 结尾处。 DataPager 控件有许多选项来显示分页，这些也很有用。 这里我只使用了一个简单的。

<asp:DataPager ID="ItemDataPager" runat="server" PageSize="5">
    <Fields>
         <asp:NumericPagerField ButtonCount="2" />
    </Fields>
</asp:DataPager>    

排序

在 ListView 中对数据进行排序非常容易。 排序功能在包含要排序的列的按钮的 CommandArgument 属性中定义。 当其 CommandName 属性设置为 Sort 的按钮被单击时，它会发生。 您需要调用名为 onsorting="ListView1_Sorting" 的 Sort 方法。

// to allow sort if click on the header of the table make 
//table header controls clickable 
//and give commandname and commandargument
<tr style="background-color:#E5E5FE">
 <th align="left"><asp:LinkButton ID="lnkId" runat="server" 
	CommandName="Sort" CommandArgument="ID">Id</asp:LinkButton></th>
 <th align="left"><asp:LinkButton ID="lnkName" runat="server" 
	CommandName="Sort" CommandArgument="FirstName">Name</asp:LinkButton></th>
 <th align="left"><asp:LinkButton ID="lnkType" runat="server" 
	CommandName="Sort" CommandArgument="ContactType">Type</asp:LinkButton></th>
 <th></th>
</tr>    

插入、更新和删除

要将数据插入到 ListView 中，您需要在 ListView 中添加一个名为 InsertItemTemplate 的标签。要添加插入的代码，请在 ItemCommand 中添加代码。

HTML 代码

<InsertItemTemplate>
    <tr runat="server">
        <td></td>
        <td>
        <asp:TextBox ID="txtFname" runat="server" 
		Text='<%#Eval("FirstName") %>' Width="100px">First Name</asp:TextBox>
        <asp:TextBox ID="txtLname" runat="server" 
		Text='<%#Eval("LastName") %>' Width="100px">Last Name</asp:TextBox>
        </td>
        <td><asp:TextBox ID="txtCtype" runat="server" 
	Text='<%#Eval("ContactType") %>' Width="100px">Contact Type</asp:TextBox></td>
        <td><asp:Button ID="InsertButton" runat="server" 
		CommandName="Insert" Text="Insert" /></td>
    </tr>
</InsertItemTemplate>    

CS 代码

在 CS 文件中，将此代码插入到 ItemCommand 中

if (e.CommandName == "Insert")
{
    TextBox txtFname = (TextBox)e.Item.FindControl("txtFname");
    TextBox txtLname = (TextBox)e.Item.FindControl("txtLname");
    TextBox txtCtype = (TextBox)e.Item.FindControl("txtCtype");
    string insertCommand = "Insert into [Contacts] 
	    ([FirstName],[LastName],[ContactType]) Values('" + txtFname.Text + "', '" 
                 + txtLname.Text + "', '" + txtCtype.Text + "');";
    SqlDataSource1.InsertCommand = insertCommand;
}

同样，使用 EditItemTemlpate 将完成更新和删除的代码。 请检查附带的源文件以获取完整的代码。

历史

• 2008 年 3 月 24 日：文章的第一个版本