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

قرار دادن GridView با اتصال DataSet Client Side با استفاده از jQuery AJAX در Asp.net
0 0
قرار دادن GridView با اتصال DataSet Client Side با استفاده از jQuery AJAX در Asp.net

با سلام در این مقاله توضیح خواهیم داد که چگونه با استفاده از جی کوئری AJAX و روشهای وب، کنترل DataGrid را به کنترل GridView متصل کنیم.
 پایگاه داده و رشته اتصال
برای این کار باید پایگاه داده Northwind را با استفاده از لینک زیر دانلود کنید .
دانلود Northwind پایگاه داده
در زیر رشته اتصال از فایل Web.Config است

<connectionStrings>
<add name="conString" connectionString="Data Source=.\SQLExpress;
database=Northwind;Integrated Security=true"/>
connectionStrings>

کد GridView
کد GridView با سه زمینه محدود بسیار ساده است.

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
    Font-Size="10pt" 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="ContactName" />
        <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
    Columns>
asp:GridView>

فضاهای نام
برای استفاده از این نمونه، باید فضاهای نامی زیر را وارد کنید .

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

پیوستن ردیف ساختگی
شما باید یک رشته ساختگی را به GridView متصل کنید تا GridView رندر شود. همچنین ردیف ساختگی برای حفظ سبک CSS و قالب بندی ردیف مورد نیاز است.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.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();
}

در بالا، خواهید دید که یک DataTable ساختگی با سه ستون ایجاد کرده ایم که نیاز اتصال به GridView دارد.
WebMethod برای مدیریت jQuery AJAX
 ما یک روش وب را ایجاد خواهیم کرد که درخواستهای jQuery AJAX handler را انجام می دهد و سوابق تولید شده از جدول مشتریان پایگاه Northwind را به عنوان یک رشته از XML باز می گرداند.

[WebMethod]
public static string GetCustomers()
{
    string query = "SELECT top 10 CustomerID, ContactName, City FROM Customers";
    SqlCommand cmd = new SqlCommand(query);
    return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
    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);
                return ds;
 
            }
        }
    }
}

در بالا، می توانید ببینید که یک درخواست انتخاب را در جدول مشتریان پایگاه Northwind با استفاده از شی DataSet تابع GetData اجرا می کنیم. این شیء داده ها بعدا با استفاده از روش GetXml در روش وب به XML تبدیل می شود.
 
قابلیت های Client side

<script type="text/javascript" src="http://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 (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("Table");
        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);
        });
    }
script>

در کد بالا، یک ارتباط jQuery AJAX به روش Web GetCustomers در مرحله آماده سازی سند صفحه ایجاد می شود. سپس روش web یک رشته XML را که با استفاده از روش parseXML جی کوئری تجزیه می شود، باز می گرداند . سند XML و ردیف ایجاد و به کنترل GridView  اضافه می شوند.
عکسها
در زیر تصویری از کنترل GridView را نشان می دهد که با استفاده از روش های jQuery AJAX و ASP.Net استفاده شده است.

 


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

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