توضیحات و دانلود

بارگذاری داده ها هنگام پایین بودن صفحات پیمایش با jQuery AJAX در ASP.Net
0 0
بارگذاری داده ها هنگام پایین بودن صفحات پیمایش با 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>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :