Trong bài viết này tôi sẽ giải thích làm thế nào để tải một phần của trang với delay sử dụng UpdatePanel và AJAX để chúng ta có thể tải trang nhanh hơn bằng cách tải dữ liệu lớn như grid,...
Đối với hướng dẫn này, tôi đang sử dụng cơ sở dữ liệu NorthWind của Microsoft, bạn có thể tải về sử dụng các liên kết dưới đây:
Để bắt đầu tôi có GridView đơn giản trong trang ASPX của tôi
<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>
Và dưới đây là phương thức để ràng buộc các GridView với dữ liệu. Do đó chức năng chỉ đơn giản là bắn một truy vấn select trên bảng Customers của cơ sở dữ liệu NorthWind và liên kết với kết quả cho Control 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();
}
}Bây giờ, để xây dựng Lazy Loading hoặc chức năng Delay chúng ta sẽ phải sử dụng AJAX Timer Control.
Trước tiên chúng ta sẽ thêm Timer Control, UpdatePanel và criptManager đến trang Do đó HTML của chúng ta trông giống như dưới đây
<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>
Trên, bạn sẽ thấy rằng chúng ta đã thêm control Timer với Interval 2000 mili giây (2 giây) và cũng có OnTick. Để Timer được gọi thì khi delay của 2 giây, dưới đây về xử lý sự kiện OnTick tôi gọi phương thức BindGrid chúng ta tạo ra trước đó. Ngoài ra tôi đã thêm hình ảnh Load GIF để nó hiển thị hình ảnh động cho đến khi nội dung được tải.
protected void TimerTick(object sender, EventArgs e)
{
this.BindCustomers();
Timer1.Enabled = false;
imgLoader.Visible = false;
}Trên bạn sẽ thấy tôi vô hiệu hóa các điều khiển Timer và cũng làm ẩn Đang tải hình ảnh GIF từ nội dung hiện đang được nạp.