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

Error in loading data from database to gridview using ajax json C#

本文关键字:加载 gridview 出错 数据库 json ajax 数据 使用      更新时间:2023-09-26

我试图在滚动页面时从数据库加载数据到gridview。它是这样工作的

1)最初当页面加载gridview显示10个数据从database(工作良好)

2)当滚动gridview显示一个图像加载和时间服务器端函数调用使用ajax json方法加载下5个数据从数据库

3)成功点击此函数后,javascript删除加载的图像并添加下一个5个数据的gridview。

现在的问题是在删除图像后,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

你的数据是一个字符串,data: '{pageIndex: ' + pageIndex + '}',,应该是
data: {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);
});

中的行标记为'problem',则为元素设置具有这些类的文本。所有带有这个类的元素都会被选中。我认为您需要的是为克隆的行元素设置数据。请尝试:

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

查找行中class为'news'的元素

我可以在第一个站点看到的一件事是,在ajax调用中您有dataType: "json",但从web方法中您返回XML格式的结果,因此dataType属性应设置为" XML "