"> نمایش اطلاعات GridView بعد از بارگزاری صفحه توسط UpdatePanel

نمایش اطلاعات GridView بعد از بارگذاری صفحه با استفاده از UpdatePanel

Ajax UpdatePanel

در این مقاله نشان می دهیم که چگونه با استفاده از Ajax UpdatePanel و کنترل Timer، به طور آسنکرون GridView را بعد از بارگذاری کامل صفحه بارگزاری نماییم. مراحل انجام کار به صورت گام به گام برایتان قرار داده شده است. همچنین در انتهای مطلب سورس آن نیز برای دانلود قرار داده شده است. با من همراه باشید …

Ajax UpdatePanel

دیتابیس:

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

کد HTML:

این کد شامل یک ASP.Net GridView می باشد.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green">
<Columns>
    <asp:BoundField ItemStyle-Width="200px" DataField="CustomerID" HeaderText="CustomerID" />
    <asp:BoundField ItemStyle-Width="100px" DataField="City" HeaderText="City" />
    <asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>

فضاهای نام:

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

سی شارپ :

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

VB.Net:

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

اتصال GridView:

متد زیر برای اتصال GridView به داده ها استفاده می شود، این متد به سادگی یک کوئری Select روی جدول Customers از دیتابیس Northwind اجرا می کند و رکوردهای واکشی شده را به کنترل GridView متصل می کند.

سی شارپ :

private void BindCustomers()
{
    String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    SqlCommand cmd = new SqlCommand();
    SqlDataAdapter sda = new SqlDataAdapter();
    DataSet ds = new DataSet();
    cmd.CommandType = CommandType.Text;
    cmd.CommandText = "select Top 10 CustomerID,City,Country from customers";
    cmd.Connection = con;
    sda.SelectCommand = cmd;
    try
    {
        con.Open();
        sda.Fill(ds);
        GridView1.EmptyDataText = "No Records Found";
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    catch (Exception ex)
    {
        throw ex;
    }
    finally
    {
        con.Close();
        con.Dispose();
    }
}

VB.Net:

Private Sub BindCustomers()
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
        Dim con As SqlConnection = New SqlConnection(strConnString)
        Dim cmd As SqlCommand = New SqlCommand
        Dim sda As SqlDataAdapter = New SqlDataAdapter
        Dim ds As DataSet = New DataSet
        cmd.CommandType = CommandType.Text
        cmd.CommandText = "select Top 10 CustomerID,City,Country from customers"
        cmd.Connection = con
        sda.SelectCommand = cmd
        Try
            con.Open()
            sda.Fill(ds)
            GridView1.EmptyDataText = "No Records Found"
            GridView1.DataSource = ds
            GridView1.DataBind()
        Catch ex As Exception
            Throw ex
        Finally
            con.Close()
            con.Dispose()
        End Try
End Sub

Lazy Loading: بارگزاری GridView با استفاده از Ajax UpdatePanel بعد از بارگزاری کامل صفحه

حال برای ساختن Lazy Load یا امکان تاخیر، باید از کنترل Timer استفاده کنیم.

ابتدا یک Timer، یک UpdatePanel و یک ScriptManager به صفحه اضافه می کنیم. بنابراین کد HTML ما به شکل زیر در می آید:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" OnTick="TimerTick" Interval="2000">
        </asp:Timer>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
            Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green">
            <Columns>
                <asp:BoundField ItemStyle-Width="200px" DataField="CustomerID" HeaderText="کد مشتری" />
                <asp:BoundField ItemStyle-Width="100px" DataField="City" HeaderText="شهر" />
                <asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="کشور" />
            </Columns>
        </asp:GridView>
        <asp:Image ID="imgLoader" runat="server" ImageUrl="~/loading7.gif" />
    </ContentTemplate>
</asp:UpdatePanel>
</div>

کنترل Timer با یک وقفه ۲۰۰۰ میلی ثانیه ای (۲ ثانیه) اضافه شد و رویداد onTick نیز برای آن مقداردهی شد. بنابراین، تایمر با ۲ ثانیه تاخیر بعد از بارگزاری کامل صفحه فراخوانده می شود.

در onThick event handler، متد BindGrid را که قبل تر ایجاد کرده ایم صدا می زنیم. همچنین ما یک تصویر Loading با فرمت GIF نیز اضافه کردیم که این انیمیشن تا زمان بارگزاری محتوا نمایش داده می شود.

نکته: بسیار مهم است که کنترل Timer را در رویداد OnThick آن غیرفعال کنیم، در غیر این صورت به درستی کار نخواهد کرد.

سی شارپ

protected void TimerTick(object sender, EventArgs e)
{
    this.BindCustomers();
    Timer1.Enabled = false;
    imgLoader.Visible = false;
}

VB.Net:

Protected Sub TimerTick(ByVal sender As Object, ByVal e As EventArgs)
        Me.BindCustomers()
        Timer1.Enabled = False
        imgLoader.Visible = False
End Sub

موفق باشید !

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    مسلم ملکی پاسخ

    سلام و ممنون از وب سایت خوبتون.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم