第六篇：ListView控件与DataPager控件详解（2）

话接前文，今天的主要内容是如何实现嵌套数据，也就是父子表的格式。然后就是ListView的删除、插入、更新、排序。

 

ListView的操作

我们可以创建模板来为ListView控件提供编辑、插入、删除一条数据项的操作。

要使用户可以编辑数据，我们可以向ListView添加一个EditItemTemplate模板。当选定项切换到编辑模式的时候ListView控件使用EditItemTemplate模板来显示此项。该模板在用户编辑时应该包含绑定了数据的可输入控件。例如，TextBox控件。

要使用户可以编辑数据，我们可以向ListView添加一个InsertItemTemplate模板。与EditItemTemplate控件一样，该模板包含绑定了数据的可输入控件。通过指定InsertItemPosition 属性InsertItemTemplate模板可以选择显示在开头或者结尾部分。

我们可以向ItemTemplate、SelectedItemTemplate与AlternatingItemTemplate模板添加一个编辑按钮来使用户可以切换到编辑模式。在EditItemTemplate模板中我们可以添加更新按钮来使用户可以保存数据。同样也可以添加一个取消按钮来使用户可以不保存数据切换回显示模式。

我们可以通过为按钮设置CommandName属性来定义一个动作。下面列出了ListView控件内建的ComandName属性名称。

Select

         为选中的项显示SelectedItemTemplate模板中的内容。

Insert

       在InsertItemTemplate模板中，保存被指定的数据绑定控件。

Edit

       使ListView可以进入编辑模式，并显示EditItemTemplate中的项。

Update

       在EditItemTemplate模板中，使被绑定的控件可以保存到数据源。

Delete

       删除数据项。

Cancel

       取消当前的动作。或清空InsertItemTemplate中的控件值。

插入：

使用InsertItemTemplate模板在ListView中自定义插入界面来实现数据的插入。InsertItemTemplate一般包含一些为用户提供新记录输入的可输入控件。并且通常它也包含实现插入或取消操作的按钮控件。

向ListView中添加一个InsertItemTemplate模板。通过使用实现了双向绑定的可输入控件来建立与字段的关联。当一条数据被插入以后，ListView控件自动从可输入控件来获取字段的值。

要创建实现了内建插入与取消操作的控件，需要向模板中添加一个按钮。并设置CommandName属性为"Cancel"或"Insert"。

我们可以通过设置ListView控件的InsertItemPostion属性自由的设置插入项的位置。

看一段InsertItemTemplate的例子.

  <InsertItemTemplate>
    <tr runat="server" style="background-color:#D3D3D3">
      <td valign="top">
        <asp:Label runat="server" ID="FirstNameLabel" 
          AssociatedControlID="FirstNameTextBox" Text="First Name"/>
        <asp:TextBox ID="FirstNameTextBox" runat="Server" 
          Text='<%#Bind("FirstName") %>' /><br />
        <asp:Label runat="server" ID="LastNameLabel" 
          AssociatedControlID="LastNameTextBox" Text="Last Name" />
        <asp:TextBox ID="LastNameTextBox" runat="Server" 
          Text='<%#Bind("LastName") %>' /><br />
        <asp:Label runat="server" ID="EmailLabel" 
          AssociatedControlID="EmailTextBox" Text="E-mail" />
        <asp:TextBox ID="EmailTextBox" runat="Server" 
          Text='<%#Bind("EmailAddress") %>' />
      </td>
      <td>
        <asp:LinkButton ID="InsertButton" runat="server" 
          CommandName="Insert" Text="Insert" />
      </td>
    </tr>
  </InsertItemTemplate>

  其中的TextBox控件就是我们所说的双向绑定控件。
 

编辑：

通过向ItemTemplate、SelectedItemTemplate与AlternatingItemTemplate中添加按钮，并将按钮CommandName属性定义为"Edit" ，ID定义为"EditButton"。通过点击按钮来启动编辑状态。下面是AlternatingItemTemplate中的示例。

            <AlternatingItemTemplate>
                <tr style="">
                    <td>
                        <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
                    </td>
                    //后面的代码省略

使用EditItemTemplate模板在ListView中自定义数据编辑模式。EditItemTemplate一般包含一些为用户提供记录修改的可输入控件。并且通常它也包含实现更新或取消操作的按钮控件。

向ListView中添加一个EditItemTemplate模板。通过使用实现了双向绑定的可输入控件来建立与字段的关联。当一条数据被插入以后，ListView控件自动从可输入控件来获取字段的值。

要创建实现了内建更新与取消操作的控件，需要向模板中添加一个按钮。并设置CommandName属性为"Cancel"或" Update "。

EditItemTemplate模板举例：

        <EditItemTemplate>
          <tr style="background-color: #ADD8E6" runat="server">
            <td>
              <asp:LinkButton ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />&nbsp;
              <asp:LinkButton ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
            </td>
            <td>
              <asp:TextBox ID="FirstNameTextBox" runat="server" Text='<%#Bind("FirstName") %>' 
                MaxLength="50" /><br />
            </td>
            <td>
              <asp:TextBox ID="LastNameTextBox" runat="server" Text='<%#Bind("LastName") %>' 
                MaxLength="50" /><br />
            </td>
          </tr>
        </EditItemTemplate>
      </asp:ListView>

 

删除：

通过向ItemTemplate、SelectedItemTemplate与AlternatingItemTemplate中添加按钮，并将按钮CommandName属性定义为" Delete "， ID定义为" DeleteButton "。通过点击按钮来启动删除事件。

下面是AlternatingItemTemplate中的示例。

            <AlternatingItemTemplate>
                <tr style="">
                    <td>
                        <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Delete" />
                    </td>
                    //后面的代码省略

 

深入：使用ListView来显示父子表关系

实现父子表的关系，嵌套的数据显示是一种不错的方法。ListView来实现数据的嵌套可以说是小菜一叠。只需要在ItemTemplate中再放入一个ListView就可以了，或其它的数据控件。

来看看例子吧：

HTML Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListView ID="ListView1" runat="server" OnSelectedIndexChanging="ListView1_SelectedIndexChanging"
            EnableViewState="False" OnSorting="ListView1_Sorting">
            <LayoutTemplate>
                <table>
                    <tr>
                        <th>
                            <asp:LinkButton runat="server" ID="SortButton" Text="Sort" CommandName="Sort" CommandArgument="CategoryName" />
                        </th>
                        <th>
                            CategoryID
                        </th>
                        <th>
                            CategoryName
                        </th>
                        <th>
                            Description
                        </th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
            <SelectedItemTemplate>
                <tr>
                    <td>
                        <asp:LinkButton ID="Select" CommandName="Select" runat="server" Text="Select"></asp:LinkButton>
                    </td>
                    <td>
                        <asp:Label ID="CategoryID" runat="server" Text='<%# Eval("CategoryID") %>' />
                        <div id="Div2" runat="server" style="float: left">
                            <asp:ListView ID="ListViewCompositie" runat="server">
                                <LayoutTemplate>
                                    <table>
                                        <tr>
                                            <th>
                                                ProductID
                                            </th>
                                            <th>
                                                ProductName
                                            </th>
                                            <th>
                                                UnitPrice
                                            </th>
                                        </tr>
                                        <tr id="itemPlaceholder" runat="server">
                                        </tr>
                                    </table>
                                </LayoutTemplate>
                                <ItemTemplate>
                                    <tr>
                                        <td>
                                            <asp:Label ID="ProductID" runat="server" Text='<%# Eval("ProductID") %>' />
                                        </td>
                                        <td>
                                            <asp:Label ID="ProductName" runat="server" Text='<%# Eval("ProductName") %>' />
                                        </td>
                                        <td>
                                            <asp:Label ID="UnitPrice" runat="server" Text='<%# Eval("UnitPrice") %>' />
                                        </td>
                                    </tr>
                                </ItemTemplate>
                            </asp:ListView>
                        </div>
                    </td>
                    <td>
                        <asp:Label ID="CategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
                    </td>
                    <td>
                        <asp:Label ID="Description" runat="server" Text='<%# Eval("Description") %>' />
                    </td>
                </tr>
            </SelectedItemTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:LinkButton ID="Select" CommandName="Select" runat="server" Text="Select"></asp:LinkButton>
                    </td>
                    <td>
                        <asp:Label ID="CategoryID" runat="server" Text='<%# Eval("CategoryID") %>' />
                    </td>
                    <td>
                        <asp:Label ID="CategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
                    </td>
                    <td>
                        <asp:Label ID="Description" runat="server" Text='<%# Eval("Description") %>' />
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
    </div>
    </form>
</body>
</html>

C# Code
public partial class CompositeListView : System.Web.UI.Page
{
    DataClassesDataContext db;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (db == null)
            db = new DataClassesDataContext();
        this.BindList();
    }

    private void BindList()
    {
        this.ListView1.DataSource = db.Categories;
        this.ListView1.DataBind();
    }

    protected void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
    {
        this.ListView1.SelectedIndex = e.NewSelectedIndex;
        this.BindList();
        ListView listView = this.ListView1.Items[e.NewSelectedIndex].FindControl("ListViewCompositie") as ListView;
        Label label = this.ListView1.Items[e.NewSelectedIndex].FindControl("CategoryID") as Label;
        var a = db.Products.Where(product => product.CategoryID == Convert.ToInt32(label.Text));
        listView.DataSource = a;
        listView.DataBind();
    }
    protected void ListView1_Sorting(object sender, ListViewSortEventArgs e)
    {

    }
}

 

另外有几个问题请教各位大虾。

1、为何我对ListView控件进行自定义时只能使用LinkButton。

2、如何将被嵌套的ListView也就是ListViewCompositie漂浮在被嵌套行的下方从而遮挡下面的列。而不是向我例子中直接将行撑开呢？（本人CSS比较菜，还望指点）

谢谢指教。