向下滚动加载GridView行 [英] Loading GridView Rows on Scroll Down

问题描述

我正在尝试实施这篇文章..

点击这里

我下载它并且工作得很好，直到我试图用它来制作UserControl。



这是我的UserControl代码：

I am trying to implement this article ..
Click Here
I downloaded it and it was working just fine untill i tried to make a UserControl out of it.

THis is my UserControl Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Test.ascx.cs" Inherits="WebUserControl" %>

    <asp:ScriptManager ID="sm1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/ScriptsScroll/jquery-1.4.1.js" />
        </Scripts>
    </asp:ScriptManager>
    <div id="divProducts" style="height:300px;overflow:auto">
        <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" EnableViewState="False"

            GridLines="None" AutoGenerateColumns="False">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="ProductId" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle CssClass="header" BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
        </asp:GridView>
    </div>
    <div>
        <asp:Button runat="server" Text="Get More records" ID="btnGetMoreRecords"

            onclick="btnGetMoreRecords_Click" />
    </div>
    <div id="divProgress" style="margin-top: -50px;margin-left:150px;z-index:-999">
            <img src="loading.gif" width="100" height="100" alt="" />
    </div>
    <div>
        <asp:HiddenField runat="server" ID="hiddenLastProductID" />
    </div>
    <script type="text/javascript">

        var previousProductId = 0;
        //Max records to display at a time in the grid.
        var maxRecordsToDisplay = 30;

        $(document).ready(function () {

            //initially hide the loading gif
            $("#divProgress").hide();

            //initially hide the button
            $("#btnGetMoreRecords").hide();

            //Attach function to the scroll event of the div
            $("#divProducts").scroll(function () {
                var scrolltop = $('#divProducts').attr('scrollTop');
                var scrollheight = $('#divProducts').attr('scrollHeight');
                var windowheight = $('#divProducts').attr('clientHeight');
                var scrolloffset = 20;
                if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) {

                    //User has scrolled to the end of the grid. Load new data..
                    $("#divProgress").ajaxStart(function () {
                        $(this).show();
                    });
                    $("#divProgress").ajaxStop(function () {
                        $(this).hide();
                    });
                    BindNewData();

                }
            });

        });
        function BindNewData() {

            var lastProductId = $("#GridView1 tr:last").children("td:first").html();

            //get last table row in order to append the new products
            var lastRow = $("#GridView1 tr:last");

            //Fetch records only when the no. of records displayed in the grid are less than limit.
            if (GetRowsCount() < maxRecordsToDisplay) {
                if (parseInt(lastProductId, 10) > parseInt(previousProductId, 10)) {
                    previousProductId = lastProductId;

                    $.post("FetchRecordsHandler.ashx?lastProductId=" + lastProductId, function (data) {
                        if (data != null) {
                            //append new products rows to last row in the gridview.
                            lastRow.after(data);
                        }
                    });
                }
            }
            else {

                //Set value of last product id in hidden field so that we can access it from code behind.
                $("#hiddenLastProductID").val(lastProductId);
                //Check If there is more records in the database
                if (parseInt(lastProductId, 10) > parseInt(previousProductId, 10))
                    $("#btnGetMoreRecords").show();
            }
        }

        function GetRowsCount() {
            //Count no. of rows except header row in the grid.
            var rowCount = $('#GridView1 tr').length - 1;
            return rowCount;

        }
    </script>

我将此用户Control添加到WebForm中，但在向下滚动时没有加载任何行。单击获取更多记录按钮给我一个错误，说输入字符串的格式不正确。

I added this user Control to a WebForm but no rows are getting loaded on scrolling down. Clicking on "Get More Records Button" Give me an error saying "Input string was not in a correct format. "

推荐答案

（ document ）。ready（ function （）{

// 最初隐藏加载gif

(document).ready(function () { //initially hide the loading gif

（ < span class =code-string>＃divProgress）。hide（）;

// 最初隐藏按钮

("#divProgress").hide(); //initially hide the button

（ #btnGetMoreRecords）。hide（）;

// 附加功能到div的滚动事件

("#btnGetMoreRecords").hide(); //Attach function to the scroll event of the div

这篇关于向下滚动加载GridView行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！