数据点播Gridview [英] Data on demand Gridview

查看：68 发布时间：2019/6/16 5:54:47 C# ASP.NET

本文介绍了数据点播Gridview的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在一个gridview上工作，它应该提供像facebook一样向下滚动的数据。

我的代码是

.aspx页码。

I work on one gridview which should provide data on scroll down like facebook .

my code is

.aspx page code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .Grid td
        {
            background-color: #A1DCF2;
            color: black;
            font-size: 10pt;
            font-family: Arial;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .Grid th
        {
            background-color: #3AC0F2;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 517px; border-collapse: collapse;">
        <tr>
            <th scope="col" style="width: 200px;">
               EmployeeID
            </th>
            <th scope="col" style="width: 217px;">
                Name
            </th>
            <th scope="col" style="width: 100px;">
                ManagerID
            </th>
            
            
        </tr>
    </table>
    <div id="dvGrid" style="height: 250px; overflow: auto; width: 517px">
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" Width="517">
            <Columns>
                <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" ItemStyle-CssClass="EmployeeID" ItemStyle-Width="200" HeaderStyle-Width="200" />
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-CssClass="Name" ItemStyle-Width="217" HeaderStyle-Width="217" />
                <asp:BoundField DataField="ManagerID" HeaderText="ManagerID" ItemStyle-CssClass="ManagerID" ItemStyle-Width="100" HeaderStyle-Width="100" />
                 
            </Columns>
        </asp:GridView>
    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">
        var pageIndex = 1;
        var pageCount;
        $(function() {
            //Remove the original GridView header
            $("[id$=gvCustomers] tr").eq(0).remove();
        });

        //Load GridView Rows when DIV is scrolled
        $("#dvGrid").on("scroll", function(e) {
            var $o = $(e.currentTarget);
            if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
                GetRecords();
            }
        });

        //Function to make AJAX call to the Web Method
        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {

                //Show Loader
                if ($("[id$=gvCustomers].loader").length == 0) {
                    var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                    row.addClass("loader");
                    row.children().remove();
                    row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif"  /></td>');
                    $("[id$=gvCustomers]").append(row);
                }
                $.ajax({
                    type: "POST",
                    url: "Default.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 to recieve XML response append rows to GridView


        function OnSuccess(response) {
            debugger;
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var customers = xml.find("Employee");
            $("[id$=gvCustomers] .loader").remove();
            customers.each(function() {
                var customer = $(this);
                var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                $(".EmployeeID", row).html(Employee.find("EmployeeID").text());
                $(".Name", row).html(Employee.find("Name").text());
                $(".ManagerID", row).html(Employee.find("ManagerID").text());
                $("[id$=gvCustomers]").append(row);
            });

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

    </form>
</body>
</html>

和.cs这样的代码

and .cs code like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gvCustomers.DataSource = GetDataPageWise(1, 10);
            gvCustomers.DataBind();
        }
    }
    public static DataSet GetDataPageWise(int pageIndex, int pageSize)
    {
        string constring = ConfigurationManager.ConnectionStrings["keyconn"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constring))
        {
            using (SqlCommand cmd = new SqlCommand("[GetDataPageWise]"))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
                cmd.Parameters.AddWithValue("@PageSize", pageSize);
                cmd.Parameters.Add("@PageCount", SqlDbType.Int, 3).Direction = ParameterDirection.Output;
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds, "Employee");
                        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 GetDataPageWise(pageIndex, 10).GetXml();
    }
}

和这样的商店程序

and store procedure like this

ALTER PROCEDURE [dbo].[GetDataPageWise]
      @PageIndex INT = 1
      ,@PageSize INT = 10
      ,@PageCount INT OUTPUT
AS
BEGIN
      SET NOCOUNT ON;
      SELECT ROW_NUMBER() OVER
            (
                  ORDER BY [EmployeeID] ASC
            )AS RowNumber,
            [EmployeeID],
            [Name],
            [ManagerID]
    INTO #Results
      FROM [Employee]
    
      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

和桌面设计如

桌子名称：员工

并且提交的是

EmployeeID int，Name varchar，ManagerID int

代码参考： http://www.aspsnippets.com/Articles/Load-on-demand-data-in-GridView-on-scroll-using-ASPNet-and-jQuery-AJAX.aspx [ ^ ]

此代码对我没有任何帮助请帮助..

and table design like

name of table : Employee

and it filed is
EmployeeID int, Name varchar,ManagerID int

code ref : http://www.aspsnippets.com/Articles/Load-on-demand-data-in-GridView-on-scroll-using-ASPNet-and-jQuery-AJAX.aspx[^]

this code not work for me any help please..

数据点播Gridview [英] Data on demand Gridview

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

数据点播Gridview [英] Data on demand Gridview

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭