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

بارگیری داده ها در GridView هنگام پیمایش با استفاده از jQuery AJAX در ASP.Net
0 0
بارگیری داده ها در GridView هنگام پیمایش با استفاده از jQuery AJAX در ASP.Net

 با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه GridView را در پیمایش در ASP.Net با استفاده از jQuery AJAX و C # و VB.Net بارگذاری کنید

بانک اطلاعات
برای این مقاله از پایگاه داده Northwind استفاده می کنیم. می توانید با استفاده از لینک زیر آن را دانلود کنید.
پایگاه داده Northwind را بارگیری و پیکربندی کنید
کد HTML
کد HTML حاوی HTML DIV و کنترل GridView در آن است. GridView را درون HTML DIV قرار داده ایم تا بتوانیم پیمایش را پیاده سازی کنیم.

<div id="dvGrid" style="height: 250px; overflow: auto; width: 517px">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" Width = "500">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText = "Customer Name" ItemStyle-CssClass="name" ItemStyle-Width="200" HeaderStyle-Width="200" />
        <asp:BoundField DataField="City" HeaderText = "City" ItemStyle-CssClass="city" ItemStyle-Width="100" HeaderStyle-Width="100" />
        <asp:BoundField DataField="Country" HeaderText = "Country" ItemStyle-CssClass="country" ItemStyle-Width="100" HeaderStyle-Width="100" />
        <asp:BoundField DataField="PostalCode" HeaderText = "Postal Code" ItemStyle-CssClass="postal" ItemStyle-Width="100" HeaderStyle-Width="100" />
    </Columns>
</asp:GridView>
</div>

حال در اینجا شما نیاز به چند نکته مهم در طراحی مناسب دارید.
1- شما برای هر ستون از GridView باید ArticleStyle-Width و HeaderStyle-Width را مشخص کنید. اطمینان حاصل کنید که هر دو ویژگی برای یک ستون خاص یکسان هستند.
2- کل ستون های ArticleStyle-Width از همه ستون ها باید به عنوان عرض GridView تنظیم شود.
3- در آخر باید عرض HTML DIV و عرض GridView مثبت 17px باشد. 17px عرض پیمایش است. به عنوان مثال در اینجا 500 + 17 = 517px.
4- ارتفاع HTML DIV را به گونه ای تنظیم کنید که به طور پیش فرض  یک نوار پیمایش را نشان دهد.
توجه:

برای هر ستون در GridView ویژگی ArticleStyle-CssClass را تنظیم کرده ایم؛ این کار برای شناسایی ستونها هنگام جمع آوری داده ها با استفاده از jQuery AJAX انجام می شود.
CSS Style برای GridView
کلاسهای CSS زیر برای محسوس شدن  GridView استفاده می شوند.

<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>

Stored procedure برای دریافت سوابق در صورت تقاضا هنگام پیمایش GridView
شما باید Stored procedure زیر را در پایگاه داده Northwind اجرا کنید. هدف از ایجاد Stored procedure زیر این است که صفحه سوابق را بر اساس فهرست صفحه با استفاده از صفحه بندی سفارشی شده در جدول پایگاه داده با ویژگی ROW_NUMBER از SQL Server دریافت کنید .

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

فضاهای نام
باید نامهای زیر را وارد کنید.
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
در زیر کد مربوط به اتصال GridView با استفاده از داده های گرفته شده از Stored procedure که قبلاً ایجاد کرده بودیم.
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        gvCustomers.DataSource = GetCustomersPageWise(1, 10);
        gvCustomers.DataBind();
    }
}
 
public static DataSet GetCustomersPageWise(int pageIndex, int pageSize)
{
    string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constring))
    {
        using (SqlCommand cmd = new SqlCommand("[GetCustomersPageWise]"))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
            cmd.Parameters.AddWithValue("@PageSize", pageSize);
            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, "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(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        gvCustomers.DataSource = GetCustomersPageWise(1, 10)
        gvCustomers.DataBind()
    End If
End Sub
 
Public Shared Function GetCustomersPageWise(pageIndex As Integer, pageSize As Integer) As DataSet
    Dim constring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constring)
        Using cmd As New SqlCommand("[GetCustomersPageWise]")
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
            cmd.Parameters.AddWithValue("@PageSize", pageSize)
            cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
            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("PageCount")
                    dt.Columns.Add("PageCount")
                    dt.Rows.Add()
                    dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
                    ds.Tables.Add(dt)
                    Return ds
                End Using
            End Using
        End Using
    End Using
End Function

تصویر زیر GridView را بعد از اتمام مراحل فوق نمایش می دهد.

 

ثابت کردن عنوان GridView
حال باید عنوان GridView را ثابت کنیم تا وقتی GridView را پیمایش کنیم ، ردیف هدر ثابت بماند.
از این رو ما نیاز به مشاهده منبع صفحه و سپس کپی کردن GridView Header Row HTML مانند تصویر زیر داریم.

سپس باید جدول HTML GridView و Header Row را کپی کنید و بالای HTML DIV که حاوی GridView است قرار دهید و برچسب پایان جدول HTML را تکمیل کنید.

GridView اکنون با مراحل بالا باید به دو شکل زیر باشد.

بارگیری ردیف GridView در demand هنگام پیمایش با استفاده از jQuery AJAX
اکنون ما نیاز به ایجاد یک روش وب داریم که با ارتباط های جی کوئری AJAX هنگام پیمایش GridView کنترل شود.
C #

[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 GetCustomersPageWise(pageIndex, 5).GetXml();
}

VB.Net

<WebMethod()> _
Public Shared Function GetCustomers(pageIndex As Integer) As String
    'Added to similate delay so that we see the loader working
    'Must be removed when moving to production
    System.Threading.Thread.Sleep(2000)
 
    Return GetCustomersPageWise(pageIndex, 5).GetXml()
End Function

حال کد جاوا اسکریپت زیر باید در صفحه قرار داده شود ، که کار ما را برای ایجاد یک GridView هنگام بارگیری داده در demand را تکمیل می کند
1- ابتدا ردیف عنوان GridView پیش فرض را حذف کرده ایم زیرا باید از هدر سفارشی ثابت که ایجاد کرده ایم استفاده کنیم.
2- سپس یک رویداد پیمایش jQuery را به HTML DIV وصل کرده ایم ، تا هنگام پیمایش HTML DIV بتوانیم مسیر دربافت مجموعه های بعدی از سوابق را شروع کنیم.
3- وقتی درخواست جی کوئری AJAX به سرور وب متد انجام شد ، یک ردیف ساختگی با یک تصویر در حال بارگذاری GIF ایجاد و سپس آن را به عنوان آخرین ردیف GridView اضافه می کنیم ، تا بتوانیم GIF را نمایش دهیم تا زمانی که سوابق دریافت و بارگیری می شوند.
4- هنگامی که ارتباط jQuery AJAX پاسخی به عنوان رشته XML دریافت می کند ، XML تجزیه و مقادیر با استفاده از نام کلاس هایی که به هر ستون GridView داده ایم جمع می شوند.

<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) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        $("[id$=gvCustomers] .loader").remove();
        customers.each(function () {
            var customer = $(this);
            var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
            $(".name", row).html(customer.find("ContactName").text());
            $(".city", row).html(customer.find("City").text());
            $(".postal", row).html(customer.find("PostalCode").text());
            $(".country", row).html(customer.find("Country").text());
            $("[id$=gvCustomers]").append(row);
        });
 
        //Hide Loader
        $("#loader").hide();
    }
</script>

 


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

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