c# - 使用ajax json C#从数据库加载数据到gridview时出错

Question

我正在尝试在滚动页面时将数据从数据库加载到gridview。它的工作原理如下

1)最初加载页面时，gridview 显示来自数据库的 10 条数据(工作正常)

2) 滚动时 gridview 显示要加载的图像，此时使用 ajax json 方法调用服务器端函数，从数据库加载下 5 个数据

3) 成功调用此函数后，JavaScript 会删除要加载的图像，并在 gridview 中附加接下来的 5 个数据。

现在的问题是删除图像后，gridview 在接下来的 5 次中一次又一次地显示数据库中的第一个数据。请帮忙..

C#

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            newscontainer.DataSource = GetNewsPageWise(1, 10);
            newscontainer.DataBind();
        }
    }

    public static DataSet GetNewsPageWise(int pageIndex, int pageSize)
    {
        string constring = "server=***;uid=***;pwd=******;database=*******";
        using (SqlConnection con = new SqlConnection(constring))
        {
            using (SqlCommand cmd = new SqlCommand("[GetNewsPageWise]"))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
                cmd.Parameters.AddWithValue("@PageSize", pageSize);
                cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds, "popnews");
                        DataTable dt = new DataTable("PageCount");
                        dt.Columns.Add("PageCount");
                        dt.Rows.Add();
                        dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                        ds.Tables.Add(dt);
                        return ds;
                    }
                }
            }
        }
    }

    [WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        //Added to similate delay so that we see the loader working
        //Must be removed when moving to production
        System.Threading.Thread.Sleep(2000);
        return GetNewsPageWise(pageIndex, 5).GetXml();
    }

}

Javascript

<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(function () {
    //Remove the original GridView header
    $("[id$=newscontainer] tr").eq(0).remove();
});
//Load GridView Rows when DIV is scrolled
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        GetRecords();
    }
});
//Function to make AJAX call to the Web Method
function GetRecords() {
    pageIndex++;
    if (pageIndex == 2 || pageIndex <= pageCount) {

        //Show Loader
        if ($("[id$=newscontainer] .loader").length == 0) {
            var row = $("[id$=newscontainer] tr").eq(0).clone(true);
            row.addClass("loader");
            row.children().remove();
            row.append('<td colspan = "999" style = "background-color:white"> <asp:Image ID="loader" runat="server" Height="50px" ImageUrl="~/Images/loader.gif" Width="51px" /></td>');
            $("[id$=newscontainer]").append(row);
        }
        $.ajax({
            type: "POST",
            url: "News.aspx/GetCustomers",
            data: '{pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }
}


 function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
    var customers = xml.find("popnews");
    $("[id$=newscontainer] .loader").remove();
    customers.each(function () {
        var customer = $(this);
        var row = $("[id$=newscontainer] tr").eq(0).clone(true);
        $(".postedon").html(customer.find("newsdate").text());
        $(".news").html(customer.find("news").text());
        $("[id$=newscontainer]").append(row);
    });

    //Hide Loader
    $("#loader").hide();
}

使用的存储过程

            SET ANSI_NULLS ON
            GO
            SET QUOTED_IDENTIFIER ON
             GO
            CREATE PROCEDURE [dbo].[GetNewsPageWise]
             @PageIndex INT = 1
                ,@PageSize INT = 10
               ,@PageCount INT OUTPUT
                 AS
                BEGIN
               SET NOCOUNT ON;
            SELECT ROW_NUMBER() OVER
                (
                   ORDER BY [newsid] ASC
                 )AS RowNumber
                   ,[newsid]
                   ,[news]
                  ,[newsdate]
                    ,[newstime]
                    INTO #Results
                  FROM [popnews]

                   DECLARE @RecordCount INT
                    SELECT @RecordCount = COUNT(*) FROM #Results

                 SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) /            
                 CAST(@PageSize AS DECIMAL(10, 2)))
                    PRINT       @PageCount

                        SELECT * FROM #Results
                       WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 
                         AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1

                      DROP TABLE #Results
                         END

Answer 1

您的数据是一个字符串，data: '{pageIndex: ' + pageIndex + '}', 应该是
数据:{pageIndex:pageIndex}
请确保您的ajax请求已发送到服务器并且您可以获得正确的响应。您可以在chrome或firebug中检查开发工具。

而且，您没有粘贴 onSuccess 函数。正如您所说，回调函数无法正常工作以添加新数据。也许原因就在那里。

[已更新]
您的成功函数是:

customers.each(function () {
    var customer = $(this);
    var row = $("[id$=newscontainer] tr").eq(0).clone(true);
    $(".postedon").html(customer.find("newsdate").text()); //problem
    $(".news").html(customer.find("news").text());         //problem
    $("[id$=newscontainer]").append(row);
});

在标记为“问题”的行中，您为具有这些类的元素设置文本。因此，具有该类的所有元素都将被选择。我认为您想要的是为克隆的行元素设置数据。请尝试:

$(".news", row).html(customer.find("news").text());

它将在行中找到类为“news”的元素。