بارگذاری داده ها هنگام پایین بودن صفحات پیمایش با jQuery AJAX در ASP.Net
با سلام در این مقاله توضیح خواهیم داد که چگونه داده ها را از پایگاه داده SQL Server به طور پویا بر روی اسکرول صفحه مرورگر با استفاده از jQuery در ASP.Net بارگیری کنید.
بانک اطلاعاتی
برای این مقاله از جدول مشتریان پایگاه Northwind SQL Server استفاده می کنیم. شما می توانید پایگاه داده Northwind را با استفاده از لینک زیر دانلود کنید
دانلود Northwind و نصب پایگاه داده
کد HTML
از کنترل Repeater استفاده کردیم تا اولین مجموعه سوابق را هنگام بارگذاری صفحات مرتبط کند. هنگامی که صفحه بارگذاری می شود و کاربر مرورگر را بررسی می کند، جی کوئری این داده ها را به کنترل Repeater اضافه می کند.
<table>
<tr><td>
<div id="dvCustomers">
<asp:Repeater ID="rptCustomers" runat="server">
<ItemTemplate>
<table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
border: dashed 2px #04AFEF; background-color: #B0E2F5">
<tr>
<td>
<b><u><span class="name">
<%# Eval("ContactName") %></span></u></b>
</td>
</tr>
<tr>
<td>
<b>City: </b><span class="city"><%# Eval("City") %></span><br />
<b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
<b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
<b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
<b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
</td>
</tr>
</table>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</td>
<td valign="bottom">
<img id="loader" alt="" src="loading.gif" style="display: none" />
</td>
</tr>
</table>
پیاده سازی صفحه بندی در روش ذخیره شده SQL Server
از آنجایی که ما نیاز داریم داده ها را براساس تقاضا به عنوان مثال در قسمت هایی که نیاز به داشتن قابلیت صفحه بندی در روش ذخیره شده ما داشته باشیم، به طوری که بتوانیم سوابق را براساس شاخص صفحه یا شماره صفحه بدست آوریم . این روش ذخیره شده Total Page Count را به عنوان پارامتر OUPUT باز می گرداند. این شمارش به جی کوئری کمک می کند که آن را متوقف کند تا ارتباط های AJAX را متوقف کند، همانطور که همه اطلاعات به دست آمده است.
USE [Northwind]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[GetCustomersPageWise]
@PageIndex INT = 1
,@PageSize INT = 10
,@PageCount INT OUTPUT
AS
BEGIN
SET NOCOUNT ON;
SELECT ROW_NUMBER() OVER
(
ORDER BY [CustomerID] ASC
)AS RowNumber
,[CustomerID]
,[CompanyName]
,[ContactName]
,[City]
,[Country]
,[PostalCode]
,[Phone]
,[Fax]
INTO #Results
FROM [Customers]
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
اولین مجموعه از رکورد های مربوط به Repeater
در زیر کد اولین مجموعه از سوابق را به کنترل Repeater در رویداد بارگذاری مرتبط می کند. این بسیار ضروری است زیرا جی کوئری به برخی از محتوای HTML نیاز دارد که بتواند داده هایی را که از طریق AJAX گرفته شده است را تکرار کند
C #
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptCustomers.DataSource = GetCustomersData(1);
rptCustomers.DataBind();
}
}
public static DataSet GetCustomersData(int pageIndex)
{
string query = "[GetCustomersPageWise]";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", 10);
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
return GetData(cmd);
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Customers");
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;
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
rptCustomers.DataSource = GetCustomersData(1)
rptCustomers.DataBind()
End If
End Sub
Public Shared Function GetCustomersData(ByVal pageIndex As Integer) As DataSet
Dim query As String = "[GetCustomersPageWise]"
Dim cmd As SqlCommand = New SqlCommand(query)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
cmd.Parameters.AddWithValue("@PageSize", 10)
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
Return GetData(cmd)
End Function
Private Shared Function GetData(ByVal cmd As SqlCommand) As DataSet
Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim con As SqlConnection = New SqlConnection(strConnString)
Dim sda As SqlDataAdapter = New SqlDataAdapter
cmd.Connection = con
sda.SelectCommand = cmd
Dim ds As DataSet = New DataSet
sda.Fill(ds, "Customers")
Dim dt As DataTable = New DataTable("PageCount")
dt.Columns.Add("PageCount")
dt.Rows.Add()
dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
ds.Tables.Add(dt)
Return ds
End Function
WebMethod برای رسیدگی به ارتباط های AJAX از jQuery
روش وب زیر، ارتباط های جی کوئری AJAX را هنگامی که صفحه برروی صفحه scrolled down است، استفاده می کند. رکورد ها را از پایگاه داده استخراج و XML را باز می گرداند.
C #
[WebMethod]
public static string GetCustomers(int pageIndex)
{
return GetCustomersData(pageIndex).GetXml();
}
VB.Net
<WebMethod()> _
Public Shared Function GetCustomers(ByVal pageIndex As Integer) As String
Return GetCustomersData(pageIndex).GetXml
End Function
پیاده سازی جانبی برای برقراری ارتباط AJAX در پیمایش صفحه
در کد زیر، دررویداد پنجره اسکرول جی کوئری، از روش جاوا اسکریپت GetRecords می خواهیم که یک ارتباط AJAX را به سرور ایجاد کند و سوابق مشتری را از صفحه بانک اطلاعات SQL Server با استفاده از صفحه فهرست برداشت.
هر بار که اطلاعات به دست می آید، صفحه index افزایش می یابد و زمانی که صفحه index برابر با کل تعداد صفحه است، روند انجام ارتباط AJAX جی کوئری به سرور را غیر فعال می کند.
<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;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.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 OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Customers");
customers.each(function () {
var customer = $(this);
var table = $("#dvCustomers table").eq(0).clone(true);
$(".name", table).html(customer.find("ContactName").text());
$(".city", table).html(customer.find("City").text());
$(".postal", table).html(customer.find("PostalCode").text());
$(".country", table).html(customer.find("Country").text());
$(".phone", table).html(customer.find("Phone").text());
$(".fax", table).html(customer.find("Fax").text());
$("#dvCustomers").append(table).append("<br />");
});
$("#loader").hide();
}
</script>