آپلود پنل Load Delay با استفاده از کنترل Timer در Asp.net
با سلام در این مقاله توضیح خواهیم داد که چگونه با استفاده از UpdatePanel و AJAX بخشی از صفحه را بارگذاری کنیم تا بتوانیم بارگذاری صفحه را با بارگیری داده هایی سنگین مانند Grids و غیره سریعترانجام دهیم.
بانک اطلاعاتی
در اینجا از پایگاه Northwind مایکروسافت استفاده می کنم. شما می توانید آن رادانلود کنید .
پایگاه داده Northwind را دانلود و نصب کنید
کد HTML
کد HTML شامل یک GridView ASP.Net است.
<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>
فضاهای نام
C #
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
اتصال GridView
روش زیر برای اتصال GridView با داده استفاده می شود، به سادگی یک query انتخاب را در جدول مشتریان Northwind Database ایجاد می کند و سوابق استخراج شده را به کنترل GridView ASP.Net متصل می کند.
C #
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
بارگیری آهسته : بارگیری GridView با استفاده از AJAX UpdatePanel هنگام اتمام بارگذاری صفحه
اکنون برای ساختن قابلیت بارگذاری ما باید از کنترل تایمر AJAX ASP.Net استفاده کنیم.
ابتدا ما یک کنترل تایمر ASP.Net، یک UpdatePanel و یک ScriptManager در صفحه اضافه خواهیم کرد. بنابراین Markup 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="CustomerID" />
<asp:BoundField ItemStyle-Width="100px" DataField="City" HeaderText="City" />
<asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
<asp:Image ID="imgLoader" runat="server" ImageUrl="~/loading7.gif" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
کنترل تایمر ASP.Net با فاصله 2000 میلی ثانیه (2 ثانیه) و همچنین رویداد OnTick خود را OnTick کرد . به طوری که تایمر پس از 2 ثانیه تاخیر در صفحه به طور کامل بارگذاری می شود.
درون پردازش رویداد OnTick، از روش BindGrid که قبلا ایجاد کردیم ارتباس می گیریم .
توجه :
باید کنترل تایمر را در کنترلگر رویداد OnTick خود غیر فعال کنید تا به طور مداوم اجرا شود.
C #
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