ورود / ثبت نام
0
0

اتصال داده ها به GridView با استفاده از jQuery یا JSON در ASP.Net

376 بازدید
JSON در ASP.Net

JSON در ASP.Net

در این مقاله نشان می دهیم که چگونه داده ها را با استفاده از jQuery یا JSON در ASP.Net به GridView متصل کنیم و همچنین صفحه بندی سمت کلاینت را از طریق jQuery Ajax انجام می دهیم.

دیتابیس:

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

دانلود دیتابیس

کد HTML:

کد 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="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 با داده های ساختگی

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

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

نکته: تعداد ستون های DataTable ساختگی باید با تعداد ستون هایی که از کوئری 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 = ۱۰

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

Stored Procedure مربوط به صفحه بندی

کد زیر مربوط به Stored Procedure صفحه بندی می باشد که صفحه بندی را در دیتابیس اجرا کرده و داده های هر صفحه را برمی گرداند.

CREATE PROCEDURE [dbo].[GetCustomers_Pager]

      @PageIndex INT = ۱

      ,@PageSize INT = ۱۰

      ,@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 -۱) * @PageSize + ۱ AND(((@PageIndex -۱) * @PageSize + ۱) + @PageSize) - ۱



      DROP TABLE #Results

END

 

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

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

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

پیشنهاد میکنم : مقاله ی آموزشی کار با Json در JQuery و MVC

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

 

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

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

نکته: تعداد کل رکوردها برای پر کردن 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 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: ۱۰pt;

    }

    .Pager span

    {

        text-align: center;

        color: #۹۹۹;

        display: inline-block;

        width: ۲۰px;

        background-color: #A1DCF2;

        margin-right: ۳px;

        line-height: ۱۵۰%;

        border: ۱px solid #۳AC0F2;

    }

    .Pager a

    {

        text-align: center;

        display: inline-block;

        width: ۲۰px;

        background-color: #۳AC0F2;

        color: #fff;

        border: ۱px solid #۳AC0F2;

        margin-right: ۳px;

        line-height: ۱۵۰%;

        text-decoration: none;

    }

</style>

ضمیمه نیز ضمیمه شده.

[button color=”blue” size=”medium” link=”https://dl.mspsoft.com/dl2/BozorgMehr/GridView_Client_Side_Paging.rar” icon=”fa download” target=”true”]دانلود فایل ضمیمه[/button]

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18470
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد اتصال داده ها به GridView با استفاده از jQuery یا JSON در ASP.Net

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.