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

صفحه بندی در GridView با استفاده از jQuery AJAX در ASP.Net
0 0
صفحه بندی در GridView با استفاده از jQuery AJAX در ASP.Net

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان صفحه بندی را در GridView با استفاده از jQuery AJAX در ASP.Net با C # و VB.Net شرح می دهیم.
بانک اطلاعات
برای این مقاله از پایگاه داده Northwind استفاده کرده ایم. می توانید با استفاده از ارتباط موجود در زیر آن را بارگیری کنید.
پایگاه داده Northwind را بارگیری کنید
کد HTML
کد HTML شامل یک کنترل GridView  است. همچنین HTML DIV که برای جمع آوری صفحات برای صفحه بندی استفاده خواهد شد.

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2"
    HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
    <Columns>
        <asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
        <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
    </Columns>
</asp:GridView>
<br />
<div class="Pager"></div>

نامهای نام
باید نامهای زیر را وارد کنید.
C #

using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient

GridView با داده های Dummy
در داخل رویداد Page Load ، GridView با سوابق ساختگی جمع شده است.
توجه : این بسیار مهم است زیرا GridView خالی در صفحه وب ارائه نمی شود.
از متغیر PageSize برای تعیین تعداد رکوردهای نمایش داده شده در هر صفحه در GridView استفاده خواهد شد.
توجه : Dummy DataTable که جمع آوری شده دارای همان ستون هایی است که از Query SQL بازگردانده می شود.
C #

private static int PageSize = 10;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDummyRow();
    }
}
 
private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerID");
    dummy.Columns.Add("ContactName");
    dummy.Columns.Add("City");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();
}

VB.Net

Private Shared PageSize As Integer = 10
Protected Sub Page_Load(sender As Object, e As EventArgsHandles Me.Load
    If Not IsPostBack Then
        BindDummyRow()
    End If
End Sub
 
Private Sub BindDummyRow()
    Dim dummy As New DataTable()
    dummy.Columns.Add("CustomerID")
    dummy.Columns.Add("ContactName")
    dummy.Columns.Add("City")
    dummy.Rows.Add()
    gvCustomers.DataSource = dummy
    gvCustomers.DataBind()
End Sub

روش ذخیره شده برای صفحه بندی
روش ذخیره شده زیر از عملکرد Row_Number برای آوردن سوابق صفحه Wise از جدول پایگاه داده SQL Server استفاده می کند.
مقادیر PageIndex و PageSize به عنوان پارامتر منتقل می شوند و Stored Procedure کل فایل های جدول را با استفاده از پارامتر RecordCount Output باز می گرداند.

CREATE PROCEDURE [dbo].[GetCustomers_Pager]
      @PageIndex INT = 1
      ,@PageSize INT = 10
      ,@RecordCount INT OUTPUT
AS
BEGIN
      SET NOCOUNT ON;
      SELECT ROW_NUMBER() OVER
      (
            ORDER BY [CustomerID] ASC
      )AS RowNumber
      ,[CustomerID]
      ,[CompanyName]
      ,[ContactName]
      ,[City]
      INTO #Results
      FROM [Customers]
     
      SELECT @RecordCount = COUNT(*)
      FROM #Results
           
      SELECT * FROM #Results
      WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
     
      DROP TABLE #Results
END

روش وب
روش وب زیر ارتباطهای مربوط به عملکرد jQuery AJAX را انجام می دهد.
در داخل روش وب ، روش Paging Stored Procedure با پارامترهای ورودی PageIndex و PageSize خوانده می شود و نتایج به همراه مقادیر PageIndex ، PageSize و RecordCount در DataSet جمع می شوند .
DataSet به یک رشته XML تبدیل و به عملکرد jQuery AJAX ارسال می شود.
توجه : تعداد کل رکورد ها برای جمع کردن pager ضروری است.
C #

[WebMethod]
public static string GetCustomers(int pageIndex)
{
    string query = "[GetCustomers_Pager]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", PageSize);
    cmd.Parameters.Add("@RecordCount"SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd, pageIndex).GetXml();
}
 
private static DataSet GetData(SqlCommand cmd, int pageIndex)
{
    string strConnString = ConfigurationManager.ConnectionStrings["conString"].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("Pager");
                dt.Columns.Add("PageIndex");
                dt.Columns.Add("PageSize");
                dt.Columns.Add("RecordCount");
                dt.Rows.Add();
                dt.Rows[0]["PageIndex"] = pageIndex;
                dt.Rows[0]["PageSize"] = PageSize;
                dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

VB.Net

< WebMethod()> _
Public Shared Function GetCustomers(pageIndex As IntegerAs String
    Dim query As String = "[GetCustomers_Pager]"
    Dim cmd As New SqlCommand(query)
    cmd.CommandType = CommandType.StoredProcedure
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
    cmd.Parameters.AddWithValue("@PageSize", PageSize)
    cmd.Parameters.Add("@RecordCount"SqlDbType.Int, 4).Direction = ParameterDirection.Output
    Return GetData(cmd, pageIndex).GetXml()
End Function
 
Private Shared Function GetData(cmd As SqlCommand, pageIndex As IntegerAs DataSet
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
    Using con As New SqlConnection(strConnString)
        Using sda As New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using ds As New DataSet()
                sda.Fill(ds, "Customers")
                Dim dt As New DataTable("Pager")
                dt.Columns.Add("PageIndex")
                dt.Columns.Add("PageSize")
                dt.Columns.Add("RecordCount")
                dt.Rows.Add()
                dt.Rows(0)("PageIndex") = pageIndex
                dt.Rows(0)("PageSize") = PageSize
                dt.Rows(0)("RecordCount") = cmd.Parameters("@RecordCount").Value
                ds.Tables.Add(dt)
                Return ds
            End Using
        End Using
    End Using
End Function

پیاده سازی Client Side
در تهیه سند jQuery ، ابتدا یک ارتباط AJAX به WebMethod برقرار می شود و سوابق صفحه اول جمع می شود.
مقدار PageIndex ، PageSize و RecordCount برای جمع کردنPager در داخل HTML DIV با استفاده از افزونه ASPS_Pager jQuery استفاده می شود.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="ASPS_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        GetCustomers(1);
    });
    $(".Pager .page").live("click"function () {
        GetCustomers(parseInt($(this).attr('page')));
    });
    function GetCustomers(pageIndex) {
        $.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);
        var customers = xml.find("Customers");
        var row = $("[id*=gvCustomers] tr:last-child").clone(true);
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        $.each(customers, function () {
            var customer = $(this);
            $("td", row).eq(0).html($(this).find("CustomerID").text());
            $("td", row).eq(1).html($(this).find("ContactName").text());
            $("td", row).eq(2).html($(this).find("City").text());
            $("[id*=gvCustomers]").append(row);
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        });
        var pager = xml.find("Pager");
        $(".Pager").ASPSnippets_Pager({
            ActiveCssClass: "current",
            PagerCssClass: "pager",
            PageIndex: parseInt(pager.find("PageIndex").text()),
            PageSize: parseInt(pager.find("PageSize").text()),
            RecordCount: parseInt(pager.find("RecordCount").text())
        });
    };
</script>

CSS
کلاسهای CSS زیر برای استفاده کردن در صفحه وب مورد نیاز است.

<style type="text/css">
    body
    {
        font-familyArial;
        font-size10pt;
    }
    .Pager span
    {
        text-aligncenter;
        color#999;
        displayinline-block;
        width20px;
        background-color#A1DCF2;
        margin-right3px;
        line-height150%;
        border1px solid #3AC0F2;
    }
    .Pager a
    {
        text-aligncenter;
        displayinline-block;
        width20px;
        background-color#3AC0F2;
        color#fff;
        border1px solid #3AC0F2;
        margin-right3px;
        line-height150%;
        text-decorationnone;
    }
</style>

عکس صفحه

 


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

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