运行时自定义 GridView 的页面大小

引言

今天，我分享一个与 ASP.NET 中的 GridView 相关的更有用的代码片段。GridView 用于从数据库或外部数据源显示记录，是静态 HTML 表格的替代品，静态 HTML 表格无法与 GridView 等数据绑定控件一起工作。

背景与需求

当数据量很大，我们需要以较小的视图显示它时，我们使用 GridView 的分页功能来实现自定义 PageSize。

分页允许我们快速加载大量数据，并使渲染的 HTML 页面尺寸变小，从而加快网站加载速度。

但在某些情况下，用户可能希望根据自己的需要更改页面大小。通常，当我们的常规配置屏幕尺寸、显示分辨率以及用户的大小不相等，甚至相差甚远时，就需要这样做。让我们通过下面的例子来说明。

我开发了一个应用程序，考虑了 1366×768 的屏幕分辨率，但我的一个用户使用全高清 (1920×1080) 显示器访问了该应用程序，这导致 GridView 的尺寸混乱。

因此，我对该 GridView 控件进行了一些更改，这使应用程序更加有用、用户友好和环境适应性更强。

设计与代码

让我们先了解设计，然后再了解源代码。这是上述输出的源代码。我们将在该代码之后添加额外的代码。

    <asp:Panel ID="pnlGrid" runat="server" GroupingText="Product Listing">
                    <table width="100%">
                        <tr>
                            <td valign="middle" align="center">Size:
                                <asp:TextBox ID="txtSize" runat="server" CssClass="TextBox" Width="30px" OnTextChanged="txtSize_TextChanged" AutoPostBack="true"></asp:TextBox>
                                &nbsp; Page No:
                                <asp:TextBox ID="txtPageNo" runat="server" CssClass="TextBox" Width="30px" OnTextChanged="txtPageNo_TextChanged" AutoPostBack="true"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td>
                                <asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false" AllowPaging="true" PageSize="10" AlternatingRowStyle-BackColor="Linen" HeaderStyle-BackColor="SkyBlue" Width="100%" OnPageIndexChanging="gvProducts_PageIndexChanging" EmptyDataText="Sorry! No Products to List. First Add from Add Product Link.">
                                    <Columns>
                                        <asp:TemplateField HeaderText="Product ID">
                                            <ItemTemplate>
                                                <asp:Label ID="lblProductID" runat="server" Text='<%#Eval("ProductID")%>' ToolTip="ID of Product as stored in Database."></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <Columns>
                                        <asp:TemplateField HeaderText="Product Name">
                                            <ItemTemplate>
                                                <asp:Label ID="lblProductName" runat="server" ToolTip="Name of Product" Text='<%#Eval("ProductName")%>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <Columns>
                                        <asp:TemplateField HeaderText="Brand">
                                            <ItemTemplate>
                                                <asp:Label ID="lblBrandName" runat="server" ToolTip="Brand of Product" Text='<%#Eval("BrandName")%>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <Columns>
                                        <asp:TemplateField HeaderText="Category">
                                            <ItemTemplate>
                                                <asp:Label ID="lblProductCat" runat="server" ToolTip="Category of Product" Text='<%#Eval("CategoryName")%>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <Columns>
                                        <asp:TemplateField HeaderText="In Stock">
                                            <ItemTemplate>
                                                <asp:Label ID="lblProductinStock" runat="server" ToolTip="Quantity available in Stock"
                                                    Text='<%#Eval("UnitsInStock")%>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                <asp:LinkButton ID="lnkExportAll" runat="server" ToolTip="Export this List" Text="Export to Excel" OnClick="lnkExportAll_Click"></asp:LinkButton>
                                &nbsp; &nbsp; &nbsp;
                <asp:LinkButton ID="lnkAddNew" runat="server" ToolTip="Add New Product"
                    Text="Add New" OnClick="lnkAddNew_Click"></asp:LinkButton>
                            </td>
                        </tr>
                    </table>
                </asp:Panel>

我们在上述设计中添加了一行新的和两个 TextBox，用于输入页面大小和页码。在此设计中，您可以输入视图的大小和页码。让我们看看上述源代码中的重要部分。

<tr> 
  <td valign="middle" align="center">
   Size: <asp:TextBox ID="txtSize" runat="server" CssClass="TextBox" Width="30px" 
         OnTextChanged="txtSize_TextChanged" AutoPostBack="true"></asp:TextBox> &nbsp; 
   Page No: <asp:TextBox ID="txtPageNo" runat="server" CssClass="TextBox" Width="30px" 
   OnTextChanged="txtPageNo_TextChanged" AutoPostBack="true"></asp:TextBox>
  </td> 
</tr>

在上述两个 TextBox 中，我们将它们的 AutoPostBack 属性设置为 true，并在两个 TextBox 的 TextChanged 事件中编写了一些代码。

 

这是在添加上述代码后显示页面大小和页码值的两个文本框后的样子。

 

使之真正工作的代码

protected void txtsize_textchanged(object sender, EventArgs e)
 {
    gvProducts.PageSize = Convert.ToInt32(txtsize.Text);
    ListProducts();
 }
protected void txtpageno_textchanged(object sender, EventArgs e)
 {
    gvProducts.PageIndex = Convert.ToInt32(txtpageno.Text) - 1;
    ListProducts();
 }

在这两个事件中，我们编写代码来重新绑定数据并设置 PageSize 和 PageIndex 属性。让我们看看产生的输出。 

1. 在自定义页面大小字段中输入的数字将更新 GridView 的 PageSize 属性，页面将刷新以使用新设置加载 GridView。
2. 类似地，页码字段将更改 GridView 的当前页索引为 GridView 中输入的值。
3. 无需按 Enter 或按任何按钮，由于 TextBox 对象的 PostBack 特性，TextChanged 命令将自动执行。

在本文中，我们学习了如何创建一个自定义页面大小的 GridView，它可以更改用户输入的硬编码值，使其更加有用和精美。