使用 JS 重新加载 GridView 数据以节省时间

Reload GridView Data with JS to save time?

本文关键字：GridView 数据 节省时间 加载 JS 新加载 使用      更新时间：2023-09-26

atm 我尝试减少网页中的加载时间，为此我尝试将每个长加载方法提取到 JS 或作为 PageMethod/WebMethod 在页面构建后加载它，给用户更好的感觉......

现在我有一个带有 ODS 的 GridView，它加载了大约 100-200 个条目 atm，如果用户不清理他的私人消息框，它会更多。所以我想现在显示前 20 个条目，然后加载其他条目，因此在 99% 的情况下，用户只想要第一个条目之一。

这是我的代码 atm：

<asp:ObjectDataSource ID="odsIncome" runat="server" SelectMethod="GetAllPMsAsReciepient"
    TypeName="DAL.PMDAL">
    <SelectParameters>
        <asp:CookieParameter CookieName="UserID" DbType="Guid" Name="userID" />
    </SelectParameters>
</asp:ObjectDataSource>
<asp:GridView ID="gridIn" runat="server" AutoGenerateColumns="False" DataSourceID="odsIncome"
    OnRowDataBound="gridItemOverview_RowDataBound" AllowPaging="True" EmptyDataText="Keine Nachrichten vorhanden"
    PageSize="50" Width="100%" OnRowCommand="gridIn_RowCommand" OnPreRender="gridIn_PreRender">
    <HeaderStyle BackColor="#bfcfde" BorderColor="Gray" />
    <RowStyle BackColor="#ccdded" BorderColor="Gray" />
    <EmptyDataRowStyle BackColor="#ccdded" BorderColor="Gray" CssClass="emptyDataRow" Height="30px" HorizontalAlign="Center"  />
    <Columns>
        <asp:TemplateField HeaderText="Betreff" HeaderStyle-Width="550px" ItemStyle-HorizontalAlign="left">
            <%--small 675--%>
            <ItemTemplate>
                <asp:Image ImageUrl="~/Images/unread.png" ID="imgUnread" runat="server" Width="10px" />
                <asp:Image ImageUrl="~/Images/return3.png" ID="imgAnswered" runat="server" Width="10px" />
                <asp:HyperLink CssClass="pmLink" ID="linkTitle" NavigateUrl='<%# Eval("PMID","~/PM/ShowPM.aspx?type=In&id={0}") %>'
                    runat="server"><%# Eval("Title") %></asp:HyperLink>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Absender" HeaderStyle-Width="200px" ItemStyle-HorizontalAlign="left">
            <%--small 250--%>
            <ItemTemplate>
                <asp:HyperLink CssClass="pmLink" ID="linkSender" NavigateUrl='<%# Eval("SenderID","~/User/ShowProfile.aspx?id={0}") %>'
                    runat="server"><%# Eval("User1.Username") %></asp:HyperLink>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField HeaderStyle-Width="170px" ItemStyle-HorizontalAlign="left" DataField="Timestamp"
            HeaderText="Datum" SortExpression="Timestamp">
            <%--small 200--%>
        </asp:BoundField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="imgDelete" Width="15px" ImageUrl="~/Images/delete.png" runat="server"
                    CommandName="dele" CommandArgument='<%# Eval("PMID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

假设我制作了一个新方法来仅加载 20 个条目，我可以在 ODS 的 SelectMethod-Property 中输入该方法 - 但是在此之后如何使用 WebMethod 或 JS 重新加载 GridView/ODS 以重新加载所有条目并覆盖所有就绪绘制的表？

从WebMethod完成的任何操作都必须使用JavaScript代码重新加载。 使用 Web 方法时，无法从服务器执行此操作。 我强烈建议使用 ListView 控件，或者更好的是，使用模板框架，例如 JQuery 或其他框架中的几个插件之一。

但是，如果使用具有自定义分页方法的存储过程，则可以获得不错的性能，例如：

  • https://web.archive.org/web/20211020131201/https://www.4guysfromrolla.com/webtech/042606-1.shtml
  • 存储过程中的分页、排序和筛选 （SQL Server）
相关文章：