使用 Slider Extender 在 Grid View 中分页

• 下载源代码 - 465.64 KB

引言

本文演示了如何使用 Ajax 滑块扩展器在 GridView 中实现分页。滑块扩展器的用途非常广泛。它允许用户通过将 asp:TextBox 升级为图形滑块来选择有限范围的值。在本文中，我将展示滑块扩展器如何通过将输入传递给分页器模板来帮助 GridView 分页显示其数据。我将向您解释滑块扩展器的工作原理。

当通过滑动滑块条使用滑块选择一个值时，该值会在完整或部分回发期间自动保存。我们可以使用 asp:TextBox 来获取和设置滑块的值。

滑块的值可以动态显示在另一个 asp:TextBox 或 asp:Label 中。

现在问题是，滑块扩展器如何帮助 Grid View 分页显示其数据。答案是...当我们滑动滑块扩展器时，会从滑块获得一个值，我们可以将该值设置为 GridView 的新页面索引，然后将 GridView 与数据源绑定，这将显示该特定页面的数据。

以下是滑块扩展器的一些重要属性

• Minimum - 允许的最小值，即如果范围从 0 到 100，则起始值/最小值为 0。
• Maximum - 允许的最大值，即如果范围从 0 到 100，则结束值/最大值为 100。
• Decimals - 值的十进制位数。
• Steps - 滑块范围内的离散值数量，即如果最小值为 0，最大值为 100，并且我们想显示 0,25,50,75,100，则步数为 4。（0-25、25-50、50-75、75-100）
• Value - 滑块的当前值。
• Length - 使用默认布局时，水平/垂直滑块的宽度/高度。
• BoundControlID - 动态显示滑块值的 TextBox 或 Label 的 ID。

Using the Code

为了使滑块扩展器用作分页控件，我使用了 <asp:TextBox> 和 SliderExtender。

<asp:TextBox ID="txtSlider" runat="server" AutoPostBack="True" 
    Text='<%# GridView1.PageIndex + 1 %>' OnTextChanged="txtSlider_TextChanged"
    Width="200px"></asp:TextBox>

<cc1:SliderExtender ID="SliderExtender1" runat="server" Orientation="Horizontal"
    TargetControlID="txtSlider" Minimum="1" Steps='<%# 
    GridView1.PageCount %>' 
    Maximum='<%# GridView1.PageCount %>'> </cc1:SliderExtender>

请看上面，我创建了一个 textbox txtSlider 和一个 Ajax SliderExtender SliderExtender1。我将 txtSlider 与 SliderExtender 的 TargetControlId 关联，以便它能保存 SliderExtender 的值。我将 txtSlider 的 AutoPostBack 属性设置为 true，因为当从滑块中选择一个值时，GridView 的页面必须更改。因此，当从滑块中选择一个值时，会触发一个事件 OnTextChanged，并且在该事件中，我们处理网格视图的分页。

protected void txtSlider_TextChanged(object sender, EventArgs e)
    {
        GridViewRow rowPager = GridView1.BottomPagerRow;
        TextBox txtSliderExt = (TextBox)rowPager.Cells[0].FindControl("txtSlider");
        GridView1.PageIndex = Int32.Parse(txtSliderExt.Text) - 1;

        BindGrid();
    }  
private void BindGrid()
    {
        string Path = HttpContext.Current.ApplicationInstance.Server.MapPath(
            "~/App_Data/Product.xml");
        DataSet ds = new DataSet();
        ds.ReadXml(Path);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }

在上面的函数 txtSlider_TextChanged 中，您将看到，我试图从 GridView PagerRow 中找到 txtSlider 并将其分配给 txtSliderExt。现在，由于 txtSliderExt 具有来自 SliderExtender 的值，因此将其分配给 GridView.PageIndex 以显示新页面数据。设置 GridView 的 PageIndex 后，我将 Grid 与数据源绑定。这里我使用了 DataSet 作为数据源。DataSet 中的数据来自 XML 文件 *Product.xml*，该文件存储在 *App_Data* 文件夹中。

在分页器部分，您会发现四个图像分别显示“第一页”、“上一页”、“下一页”和“最后一页”。单击这些图像时，会触发一个 ItemCommand 并执行相关代码。代码如下

 protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "First")
        {
            GridView1.PageIndex = 0;
        }
        else if (e.CommandName == "Prev")
        {
            if( GridView1.PageIndex >0)
            GridView1.PageIndex = GridView1.PageIndex - 1;
        }
        else if (e.CommandName == "Next")
        {
            if (GridView1.PageIndex < GridView1.PageCount - 1)
            GridView1.PageIndex = GridView1.PageIndex + 1;
        }
        else if (e.CommandName == "Last")
        {

            GridView1.PageIndex = GridView1.PageCount-1;
        }
        BindGrid();
    }

在这里您会看到，通过单击这些按钮，滑块会根据 GridView 的 PageIndex 自动向右和向左移动。

一个 label lblPaging 用于在 GridView 中显示当前页和总页数。

<asp:Label ID="lblPaging" Text='<%# "Page " + (GridView1.PageIndex + 1) +
    " of " + GridView1.PageCount %>' runat="server"></asp:Label>

历史

• 2009 年 1 月 15 日：首次发布