اتصال داده های XML به GridView با استفاده از جی کوئری در ASP.Net

در این مقاله نشان می دهیم که چگونه داده های یک فایل XML را در ASP.Net با استفاده از جی کوئری و JSON متصل کنیم. روش انجام این عملیات به صورت گام به گام به همراه کد های مربوطه برایتان قرار داده شده است. همچنین میتوانید در ادامه ی مطلب فایل دموی آن را نیز دانلود کنید و از آن استفاده کنید …

اتصال داده های XML

دیتابیس:

برای این آموزش از دیتابیس Northwind مایکروسافت استفاده کردیم، که می توانید آن را از این لینک دانلود نمایید.

کد HTML:

همانطور که مشاهده می کنید، این کد شامل یک GridView با نام gvCustomers و یک کنترل DIV است که pager برای صفحه بندی در آن پر می شود.

<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="کد مشتری" />
        <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="نام مخاطب" />
        <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="شهر" />
    </Columns>
</asp:GridView>
<br />
<div class="Pager"></div>

فضاهای نام:

فضای نام های زیر باید به برنامه اضافه شوند:

سی شارپ

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 با داده های نمونه ساختگی

در رویداد Page Load، GridView را با داده های نمونه پر می کنیم که می توانیم از ساختار HTML Table برای پر کردن داده ها با استفاده از جی کوئری استفاده کنیم.

[divider style=”normal” top=”20″ bottom=”20″]

پیشنهاد میکنم : اتصال داده ها به GridView با استفاده از jQuery یا JSON در ASP.Net

[divider style=”normal” top=”20″ bottom=”20″]

متغیری با نام PageSize ایجاد کردیم که تعداد رکوردهایی را که در هر صفحه از GridView نمایش داده می شوند، مشخص می کند.

نکته: DataTable ساختگی که پر می کنیم باید همان ستون هایی را داشته باشد که از کوئری SQL برگردانده می شود.

سی شارپ

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 EventArgs) Handles 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

مربوط به صفحه بندی در SQL Server:

در ادامه Stored Procedureای داریم که صفحه بندی را در SQL Server انجام داده و هر صفحه از داده ها را برمی گرداند.

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

WebMethod برای مدیریت فراخوانی های jQuery Ajax:

در زیر یک WebMethod داریم که توسط تابع jQuery Ajax فراخوانی می شود که GridView را با داده ها پر کرده و همچنین صفحه بندی را نیز انجام می دهد.

PageIndex به عنوان پارامتر برحسب اینکه کدام صفحه توسط کاربر کلیک شده است، از سمت کلاینت ارسال می شود، در حالی که PageSizeرا از متغیر محلی که تعریف کرده ایم، دریافت می کنیم. براساس این پارامترها رکوردهای صفحه را واکشی می نماییم.

رکوردها به همراه تعداد کل رکوردها به عنوان رشته XML به سمت کلاینت ارسال می شوند.

نکته: تعداد کل رکوردها برای پر کردن pager ضروری است.

سی شارپ

[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 Integer) As 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 Integer) As 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

در ادامه پیاده سازی سمت کلاینت را به طور کامل مشاهده می کنیم، در اینجا در رویداد load جی کوئری، GridView با استفاده از متد GetCustomers با PageIndex معادل ۱ پر می شود که GridView را با داده های ساختگی پر می کند.

با استفاده از تعداد رکوردها (Record Count)، pager با استفاده از افزونه جی کوئری ASPSnippets_pager درون کنترل DIV پر می شود.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="ASPSnippets_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-family: Arial;
        font-size: 10pt;
    }
    .Pager span
    {
        text-align: center;
        color: #999;
        display: inline-block;
        width: 20px;
        background-color: #A1DCF2;
        margin-right: 3px;
        line-height: 150%;
        border: 1px solid #3AC0F2;
    }
    .Pager a
    {
        text-align: center;
        display: inline-block;
        width: 20px;
        background-color: #3AC0F2;
        color: #fff;
        border: 1px solid #3AC0F2;
        margin-right: 3px;
        line-height: 150%;
        text-decoration: none;
    }
</style>

تصویر زیر، GridView با صفحه بندی سمت کلاینت توسط jQuery AJAX را نشان می دهد.