如何在asp.net中实现onscroll加载c＃ [英] how to implement onscroll loading in asp.net c#
问题描述
我使用此代码，但它在每次滚动加载时重复相同的数据请给出任何想法来解决这个问题
my.aspx页面
< script type =text / javascript>
var pageIndex = 1;
var pageCount;
$（窗口）.scroll（function（）{
if（$（window）.scrollTop（）== $（document）.height（） - $（window）.height（））{
GetRecords（）;
}
}）;
$（function（）{
$（[id $ = ItemsList] tr）。eq（0）.remove（）;
}）;
$（[id $ = ItemsList]）。append（row）;
}
$ .ajax（{
类型：POST，
url：Latest-Products-in-greater-noida.aspx / GetLatestProd，
数据：'{pageIndex：'+ pageIndex +'}'，
contentType：application / json; charset = utf-8，
dataType：json，
成功：OnSuccess，
失败：函数（响应）{
alert（response.d）;
}，
错误：函数（响应）{
alert（响应） .d）;
}
}）;
}
}
//接收XML响应的函数将行附加到GridView
函数OnSuccess（响应）{
var xmlDoc = $ .parseXML（ response.d）;
var xml = $（xmlDoc）;
pageCount = parseInt（xml.find（PageCount）。eq（0）.find（PageCount）。text（））;
var Products = xml.find（Products）;
$（[id $ = ItemsList] .loader）。remove（）;
Products.each（function（）{
var Product = $（this）;
var row = $（[id $ = ItemsList] tr）。eq（0）.clone （true）;
$（。discount，row）.html（Product.find（Discount）。text（））;
$（。product_Id，row）.html（ Product.find（Product_Id）。text（））;
$（。product_Name，row）.html（Product.find（Product_Name）。text（））;
$（ 。print_Price，row）.html（Product.find（Print_Price）。text（））;
$（。selling_Price，row）.html（Product.find（Selling_Price）。text （））;
$（。status，row）.html（Product.find（status）。text（））;
$（。category，row）.html（ Product.find（Category）。text（））;
$（。image_Name，row）.html（Product.find（Image_Name）。text（））;
$（ [id $ = ItemsList]）。append（row）;
}）;
//隐藏装载机
$（＃loader）。hide（）;
}
< / script>
< asp：DataList ID =ItemsListBorderColor =blackCellPadding =7CellSpacing =0
RepeatDirection =HorizontalRepeatLayout =TableRepeatColumns = 5BorderWidth =0
runat =serverOnItemCommand =ItemsList_ItemCommand>
< ItemTemplate>
< div class =latestproductstyle =margin-removed 32px; margin-removed 20px;>
< table cellpadding =0cellspacing =0class =latestproducttbl>
< tr>
< td style =height：44px;>
< div class =discountcat>
< table cellpadding =0cellspacing =0class =discountcattbl>
< tr>
< td style =font-size：14px; color：White; padding-removed 8px;>
<％＃DataBinder.Eval（Container.DataItem，Discount）％>％
< / td>
< / tr>
< tr>
< td style =color：White;>
off
< / td>
< / tr>
< / table>
< / div>
< / td>
< / tr>
< tr>
< td style =height：150px;>
< div class =proimage>
< asp：ImageButton ID =ImageButton1runat =serverCommandName =DetailsCommandArgument ='<％＃Eval（Product_Id）+，+ Eval（Product_Name）％> ;'
ImageUrl ='<％＃Bind（Image_Name，〜/ Admin / ProductImage / {0}）％>'Width =140px
Height =150px/ >
< / div>
< / td>
< / tr>
< tr>
< td style =text-align：center; height：40px; font-size：14px; padding：0px 7px 0px 7px;
vertical-align：top; color：＃0875a3;> ;
< asp：LinkButton ID =LinkButton2runat =serverCommandName =DetailsCommandArgument ='<％＃Eval（Product_Id）+，+ Eval（Product_Name）％> ;'
CssClass =lnkpname><％＃DataBinder.Eval（Container.DataItem，Product_Name）％>< / asp：LinkButton>
< / td>
< / tr>
< tr>
< td class =tblprice>
< span class =reduce> Rs。
< asp：LinkButton ID =LinkButton3runat =serverCommandName =DetailsCommandArgument ='<％＃Eval（Product_Id）+，+ Eval（Product_Name）％> ;'
CssClass =reduce> <％＃DataBinder.Eval（Container.DataItem，Print_Price）％>< / asp：LinkButton>< / span>
Rs。< asp：LinkButton ID =LinkButton1runat =server
CommandName =DetailsCommandArgument ='<％＃Eval（Product_Id ）+，+ Eval（Product_Name）％>'CssClass =lnkdtl
ForeColor =＃CD0000><％＃DataBinder.Eval（Container.DataItem，Selling_Price）％ >< / asp：LinkButton>
< / td>
< / tr>
< tr>
< td style =text-align：center; height：50px;>
< asp：LinkButton ID =LinkButton4runat =serverCommandName =DetailsCommandArgument ='<％＃Eval（Product_Id）+，+ Eval（Product_Name）％> ;'
CssClass =shopnow>立即购买< / asp：LinkButton>
< / td>
< / tr>
< / table>
< / div>
< / ItemTemplate>
< / asp：DataList>
我的.cs页面
受保护 void Page_Load（ object sender，EventArgs e）
{
if （！IsPostBack）
{
ItemsList.DataSource = GetLatestProdPageWise（ 1 ）;
ItemsList.DataBind（）;
}
}
public static DataSet GetLatestProdPageWise （ int pageIndex）
{
string constring = ConfigurationManager.ConnectionStrings [ Grocery]。ConnectionString;
使用（SqlConnection con = new SqlConnection（constring））
{
使用（SqlCommand cmd = new SqlCommand（ [GetLatestProdPageWise]））
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue（ @ PageIndex，pageIndex）;
cmd.Parameters.AddWithValue（ @ PageSize， 20 ）;
cmd.Parameters.Add（ @ PageCount，SqlDbType.Int， 4 ）。Direction = ParameterDirection.Output;
使用（SqlDataAdapter sda = new SqlDataAdapter（））
{
cmd.Connection = con;
sda.SelectCommand = cmd;
使用（DataSet ds = new DataSet（））
{
sda.Fill（ds， Products）;
DataTable dt = new DataTable（ PageCount ）;
dt.Columns.Add（ PageCount）;
dt.Rows.Add（）;
dt.Rows [ 0 ] [ 0 ] = cmd.Parameters [ @ PageCount]。
ds.Tables.Add（dt）;
return ds;
}
}
}
}
}
[WebMethod]
public static string GetLatestProd（ int pageIndex）
{
// 添加为similate延迟，以便我们看到装载机工作
// 迁移到生产时必须删除
系统.Threading.Thread.Sleep（ 2000 ）;
return GetLatestProdPageWise（pageIndex）.GetXml（）;
}
我的存储过程
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo]。[GetLatestProdPageWise]
@ PageIndex INT = 1
， @ PageSize INT = 20
， @ PageCount INT OUTPUT
AS
BEGIN
SET NOCOUNT ON ;
SELECT ROW_NUMBER（） OVER
（
ORDER BY [ID] ASC
）< span class =code-keyword> AS RowNumber
，[Product_Name]
，[Product_Id]
，[Category]
，[Image_Name]
，[Selling_Price]
，[Print_Price]
，[折扣]
，[状态]
INTO #Results
FROM [Product_Inventory] where （Category = ' 最新产品'）和 status = ' 1' 订单 按 日期 DESC
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）* < span class =code-sdkkeyword> @ PageSize + 1 AND （（<（ span class =code-sdkkeyword> @ PageIndex -1）* @ PageSize + 1 ）+ @ PageSize ） - 1
DROP 表 #Results
END
< span class =code-keyword> GO
（窗口）.scroll（function（）{
if（
（window）.scrollTop（）==
i uses this code but it repeats the same data at every on scroll load please give any idea to solve this prob 这篇关于如何在asp.net中实现onscroll加载c＃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
my.aspx page
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
$(function () {
$("[id$=ItemsList] tr").eq(0).remove();
});
$("[id$=ItemsList]").append(row);
}
$.ajax({
type: "POST",
url: "Latest-Products-in-greater-noida.aspx/GetLatestProd",
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) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var Products = xml.find("Products");
$("[id$=ItemsList] .loader").remove();
Products.each(function () {
var Product = $(this);
var row = $("[id$=ItemsList] tr").eq(0).clone(true);
$(".discount", row).html(Product.find("Discount").text());
$(".product_Id", row).html(Product.find("Product_Id").text());
$(".product_Name", row).html(Product.find("Product_Name").text());
$(".print_Price", row).html(Product.find("Print_Price").text());
$(".selling_Price", row).html(Product.find("Selling_Price").text());
$(".status", row).html(Product.find("status").text());
$(".category", row).html(Product.find("Category").text());
$(".image_Name", row).html(Product.find("Image_Name").text());
$("[id$=ItemsList]").append(row);
});
//Hide Loader
$("#loader").hide();
}
</script>
<asp:DataList ID="ItemsList" BorderColor="black" CellPadding="7" CellSpacing="0"
RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="5" BorderWidth="0"
runat="server" OnItemCommand="ItemsList_ItemCommand">
<ItemTemplate>
<div class="latestproduct" style="margin-removed 32px; margin-removed 20px;">
<table cellpadding="0" cellspacing="0" class="latestproducttbl">
<tr>
<td style="height: 44px;">
<div class="discountcat">
<table cellpadding="0" cellspacing="0" class="discountcattbl">
<tr>
<td style="font-size: 14px; color: White; padding-removed 8px;">
<%#DataBinder.Eval(Container.DataItem, "Discount")%>%
</td>
</tr>
<tr>
<td style="color: White;">
off
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 150px;">
<div class="proimage">
<asp:ImageButton ID="ImageButton1" runat="server" CommandName="Details" CommandArgument='<%# Eval("Product_Id") + "," + Eval("Product_Name")%>'
ImageUrl='<%# Bind("Image_Name", "~/Admin/ProductImage/{0}") %>' Width="140px"
Height="150px" />
</div>
</td>
</tr>
<tr>
<td style="text-align: center; height: 40px; font-size: 14px; padding: 0px 7px 0px 7px;
vertical-align: top; color: #0875a3;">
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Details" CommandArgument='<%# Eval("Product_Id") + "," + Eval("Product_Name")%>'
CssClass="lnkpname"><%#DataBinder.Eval(Container.DataItem, "Product_Name")%></asp:LinkButton>
</td>
</tr>
<tr>
<td class="tblprice">
<span class="reduce">Rs.
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="Details" CommandArgument='<%# Eval("Product_Id") + "," + Eval("Product_Name")%>'
CssClass="reduce"> <%#DataBinder.Eval(Container.DataItem, "Print_Price")%></asp:LinkButton></span>
Rs.<asp:LinkButton ID="LinkButton1" runat="server"
CommandName="Details" CommandArgument='<%# Eval("Product_Id") + "," + Eval("Product_Name")%>' CssClass="lnkdtl"
ForeColor="#CD0000"><%#DataBinder.Eval(Container.DataItem, "Selling_Price")%></asp:LinkButton>
</td>
</tr>
<tr>
<td style="text-align: center; height: 50px;">
<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Details" CommandArgument='<%# Eval("Product_Id") + "," + Eval("Product_Name")%>'
CssClass="shopnow">Shop Now</asp:LinkButton>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:DataList>
my .cs page
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ItemsList.DataSource = GetLatestProdPageWise(1);
ItemsList.DataBind();
}
}
public static DataSet GetLatestProdPageWise(int pageIndex)
{
string constring = ConfigurationManager.ConnectionStrings["Grocery"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("[GetLatestProdPageWise]"))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", 20);
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, "Products");
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 GetLatestProd(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 GetLatestProdPageWise(pageIndex).GetXml();
}
my stored procedure
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[GetLatestProdPageWise]
@PageIndex INT = 1
,@PageSize INT = 20
,@PageCount INT OUTPUT
AS
BEGIN
SET NOCOUNT ON;
SELECT ROW_NUMBER() OVER
(
ORDER BY [ID] ASC
)AS RowNumber
,[Product_Name]
,[Product_Id]
,[Category]
,[Image_Name]
,[Selling_Price]
,[Print_Price]
,[Discount]
,[status]
INTO #Results
FROM [Product_Inventory] where (Category='Latest Products') and status='1' Order By Date DESC
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
GO
(window).scroll(function () {
if (
(window).scrollTop() ==
(document).height() -
