用 JS 重新加载 GridView 数据以节省时间？答案

【问题标题】：Reload GridView Data with JS to save time?用 JS 重新加载 GridView 数据以节省时间？
【发布时间】：2013-10-14 20:17:27
【问题描述】：

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

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

这是我的密码：

<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 以重新加载所有条目和覆盖已经绘制好的表格？

【问题讨论】：

标签： javascript asp.net gridview webmethod

【解决方案1】：

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

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

【讨论】：