• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

[ASP.NET 3.5]Sử dụng UpdateProgress trong ASP.NET 3.5

Các bài viết giới thiệu và hướng dẫn dành cho lập trình Web Forms

Điều hành viên: vietluyen

neverland87
Guru
Guru
Bài viết: 490
Ngày tham gia: T.Bảy 26/05/2007 4:31 pm
Been thanked: 8 time

[ASP.NET 3.5]Sử dụng UpdateProgress trong ASP.NET 3.5

Gửi bàigửi bởi neverland87 » CN 11/01/2009 2:51 pm

Tên bài viết: Sử dụng UpdateProgress trong ASP.NET 3.5
Tác giả: neverland87
Cấp độ bài viết: Trung bình
Tóm tắt:


Đã từng là một lập trình Windows Forms, chắc hẳn bạn không xa lạ gì với control Progress Bar cho việc hiển thị tiến trình khi thực hiện công việc gì đó. Thì nay trong ASP.NET 3.5, với việc tích hợp công nghệ AJAX, Microsoft đã tạo sẵn cho bạn "control" UpdateProgess để bạn hiển thị tiến trình khi kết nối đến web-server. Để thực hiện thủ thuật của bài này, yêu cầu máy bạn phải cài Visual Studio 2008.
1.Tạo web project mới.

2.Tạo stylesheet mới có nội dung như sau:

Mã: Chọn hết

  1. .progress
  2. {
  3.     border: solid 1px Black;
  4.     width: 200px;
  5.     height: 100px;
  6.     position: absolute;
  7.     left: 50px;
  8.     top: 50px;
  9.     color: Black;
  10.     background-color: #FEFFC3;
  11.     z-index: 100;
  12. }
  13.  
Và import stylesheet này vào trang web qua tag link nằm trong tag <head>....</head> của trang:

Mã: Chọn hết

  1. <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

3.Trên thanh toolbox, trong nhóm AJAX Extensions, bạn kéo thả ScriptManager qua vùng soạn thảo code của trang web, sẽ được nội dung thế này:

Mã: Chọn hết

  1. <body>
  2.     <form id="form1" runat="server">
  3.     <div>
  4.         <asp:ScriptManager ID="ScriptManager1" runat="server">
  5.         </asp:ScriptManager>        
  6.        
  7.     </div>
  8.     </form>
  9. </body>

Tại sao phải có ScriptManager nhỉ? Mới tiếp cận AJAX trong ASP.NET, bạn hiểu nôm na nó như là nơi lưu trữ các đoạn code javascript Ajax mà Microsoft đã xây dựng sẵn cho bạn (sướng!! mình chẳng biết gì về javascript hết ;)) ).

4.Trên thanh toolbox, trong nhóm AJAX Extensions, bạn kéo thả UpdatePanel qua vùng soạn thảo code của trang web, và đặt các control cơ bản vào trong cặp tag <ContentTemplate> của UpdatePanel này:

Mã: Chọn hết

  1. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  2.             <ContentTemplate>
  3.                 <asp:Label ID="lblTime" runat="server" Text="Label" Font-Bold="True"></asp:Label>
  4.                 <br />
  5.                 <br />
  6.                 <asp:Button ID="cmdRefreshTime" runat="server" onclick="cmdRefreshTime_Click"
  7.                     Text="Start the Refresh Time" />
  8.             </ContentTemplate>
  9. </asp:UpdatePanel>

UpdatePanel là gì nhỉ? Đơn giản nó là nơi để chứa 1 vùng nhỏ của (vùng nhỏ này được đặt trong cặp tag đóng mở <ContentTemplate> ấy). khi bạn postback về phía server, thỉ chỉ có vùng nhỏ này được postback mà thôi (thay vì postback toàn bộ trang web - ui, AJAX là thế >:) )

5.Tương tự, bạn kéo thả UpdateProgress qua vùng soạn thảo mã web, và bắt đầu trang trí giao diện cho cái "progress bar" này trong cặp tag đóng-mở <ProgressTemplate>:

Mã: Chọn hết

  1. <asp:UpdateProgress ID="UpdateProgress1" runat="server">
  2.             <ProgressTemplate>
  3.                 <div class="progress">
  4.                     <table width="100%">
  5.                         <tr>
  6.                             <td align="center"><i><b>Xin chờ một chút...</b></i></td>
  7.                         </tr>
  8.                         <tr>
  9.                             <td align="center">
  10.                                 <img src="ajax-loading.gif" /></td>
  11.                         </tr>
  12.                     </table>
  13.                 </div>
  14.             </ProgressTemplate>
  15. </asp:UpdateProgress>
  16.  


6.Viết code cho tình huống Click của button cmdRefreshTime như sau:

Mã: Chọn hết

  1. protected void cmdRefreshTime_Click(object sender, EventArgs e)
  2.     {
  3.         System.Threading.Thread.Sleep(TimeSpan.FromSeconds(10));
  4.         lblTime.Text = DateTime.Now.ToLongTimeString();
  5.     }


Cuối cùng, nhấn F5 để chạy, bạn click vào button, trong khoảng thời gian chờ 10 giây, sẽ có 1 vùng cửa sổ hiện lên, và sau khi hết 10 giây này, cửa số đó sẽ tự biến mất:
pic01.png
pic01.png (6.51 KiB) Đã xem 3819 lần


Để bạn tiện theo dõi, mình post code phần giao diện lên:

Mã: Chọn hết

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>Untitled Page</title>
  8.     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11.     <form id="form1" runat="server">
  12.     <div>
  13.         <asp:ScriptManager ID="ScriptManager1" runat="server">
  14.         </asp:ScriptManager>        
  15.         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  16.             <ContentTemplate>
  17.                 <asp:Label ID="lblTime" runat="server" Text="Label" Font-Bold="True"></asp:Label>
  18.                 <br />
  19.                 <br />
  20.                 <asp:Button ID="cmdRefreshTime" runat="server" onclick="cmdRefreshTime_Click"
  21.                     Text="Start the Refresh Time" />
  22.             </ContentTemplate>
  23.         </asp:UpdatePanel>
  24.         <asp:UpdateProgress ID="UpdateProgress1" runat="server">
  25.             <ProgressTemplate>
  26.                 <div class="progress">
  27.                     <table width="100%">
  28.                         <tr>
  29.                             <td align="center"><i><b>Xin chờ một chút...</b></i></td>
  30.                         </tr>
  31.                         <tr>
  32.                             <td align="center">
  33.                                 <img src="ajax-loading.gif" /></td>
  34.                         </tr>
  35.                     </table>
  36.                 </div>
  37.             </ProgressTemplate>
  38.         </asp:UpdateProgress>
  39.     </div>
  40.     </form>
  41. </body>
  42. </html>


SIMPLY THE BEST - ĐƠN GIẢN LÀ TỐT NHẤT

Quay về “[ASP.NET] Bài viết giới thiệu, hướng dẫn”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.0 khách