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

اتصال با AJAX به GridView با استفاده از جی کوئری در Asp.net
0 0
اتصال با AJAX به GridView با استفاده از جی کوئری در Asp.net

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

<asp:GridView ID = "gvCustomers" runat="server" AutoGenerateColumns = "false">
<Columns>
    <asp:BoundField DataField = "CustomerID" HeaderText = "Customer Id" />
    <asp:BoundField DataField = "ContactName" HeaderText = "ContactName" />
    <asp:BoundField DataField = "Country" HeaderText = "Country" />
</Columns>
</asp:GridView>

فضاهای نام
شما باید فضای نامهای زیر را وارد کنید.
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 با یک رکورد ساختگی ذخیره می شود.
برای پر کردن کنترل GridView با استفاده از جی کوئری AJAX در Client Side، یک DataTable ساختگی با طرح ستون مشابه ستون هایی که در پایگاه داده است استفاده می شود.
این آیتم ساختگی به وسیله جی کوئری کلون شده و مورد استفاده قرار می گیرد تا موارد جدید را به کنترل GridView در Client Side اضافه کند.
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("CustomerID");
        dummy.Columns.Add("ContactName");
        dummy.Columns.Add("Country");
        dummy.Rows.Add();
        gvCustomers.DataSource = dummy;
        gvCustomers.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dummy As DataTable = New DataTable()
        dummy.Columns.Add("CustomerID")
        dummy.Columns.Add("ContactName")
        dummy.Columns.Add("Country")
        dummy.Rows.Add()
        gvCustomers.DataSource = dummy
        gvCustomers.DataBind()
    End If
End Sub

WebMethod برای ارتباط جی کوئری AJAX
WebMethod زیر به عنوان یک منبع داده برای ارتباط های AJAX جی کوئری استفاده می شود.
هنگامی که یک ارتباط به WebMethod انجام می شود ، ابتدا سوابق را از پایگاه داده استخراج و یک DataSet را پر می کند سپس DataSet به عنوان یک رشته XML به سمت عملکرد Client Side فراخوانی می شود.
C #

[WebMethod]
public static string GetCustomers()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT TOP 10 CustomerID, ContactName, Country FROM Customers";
            cmd.Connection = con;
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataSet ds = new DataSet();
                sda.Fill(ds);
                return ds.GetXml();
            }
        }
    }
}

VB.Net

<WebMethod()>
Public Shared Function GetCustomers() As String
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand()
            cmd.CommandText = "SELECT TOP 10 CustomerID, ContactName, Country FROM Customers"
            cmd.Connection = con
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim ds As DataSet = New DataSet()
                sda.Fill(ds)
                Return ds.GetXml()
            End Using
        End Using
    End Using
End Function

عملکرد Client Side
 دررویداد document ready , handler ، ارتباط AJAX به WebMethod ساخته شده است.
رشته XML که از WebMethod برگردانده شده است در داخل رویداد Success دریافت می شود.
رشته XML به یک سند XML تجزیه می شود و سپس یک حلقه برای هر ورودی موجود در XML اجرا می شود.
درون حلقه، آیتم ساختگی کنترل GridView کلون می شود و مقادیر ستون ها به فیلدهای مربوطه تنظیم می شوند.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (r) {
                alert(r.d);
            },
            error: function (response) {
                alert(r.d);
            }
        });
    });
 
    function OnSuccess(r) {
        //Parse the XML and extract the records.
        var customers = $($.parseXML(r.d)).find("Table");
 
        //Reference GridView Table.
        var table = $("[id*=gvCustomers]");
 
        //Reference the Dummy Row.
        var row = table.find("tr:last-child").clone(true);
 
        //Remove the Dummy Row.
        $("tr", table).not($("tr:first-child", table)).remove();
 
        //Loop through the XML and add Rows to the Table.
        $.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("Country").text());
            table.append(row);
            row = table.find("tr:last-child").clone(true);
        });
    }
</script>

عکس روی صفحه

 


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

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