Trong phần này bạn sẽ bắt đầu làm quen với cách sử dụng các control như ScriptManager và UpdatePanel để tạo một trang web ứng dụng Ajax.
1. Bước đầu tiên với ScriptManager và UpdatePanel
Để bắt đầu thực hành với ASP.NET Ajax, bạn hãy khởi động Visual Studio 2008 hoặc phiên bản miễn phí Visual Web Developer 2008 và tạo một website mới
Ghi chú Bạn cũng có thể dung phiên bản Visual Studio 2005 bạn cần cài đặt thêm Microsoft ASP.NET 2.0 AJAX Extension.
Trong dự án này ta sẽ tạo hiện thực chức năng cho phép lấy về thông tin của các nhân viên trong một công ty nào đó dựa vào mã số của nhân viên đó. Để đơn giản hơn, ta chỉ cần lấy về họ tên của nhân viên thay vì toàn bộ thông tin cá nhân có hiệu lực. Trước tiên, ta sẽ tạo một lớp đơn giản với tên EmployeeResources.cs trong thư mục App_Code với mã nguồn như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
using System; public class EmployeeResources { public static string GetEmployeeName(int employeeID) { string[] names = new string[]{“Lê Văn Chức”,“Phạm Hưng Vong”, “Cao Minh Lãm”,“Bùi Thị Thu”,“Lý A Tong”}; if (employeeID < 0 || employeeID >= names.Length) return “Mã nhân viên không tồn tại”; return names[employeeID]; } } |
Lớp EmployeeResources này chỉ chứa duy nhất một phương thức GetEmployeeName() để trả về một họ tên tương ứng với mã nhân viên truyền vào.
Khi bạn tạo một website mới, một trang mặc định tên là Default.aspx sẽ tự động được thêm vào. Hãy xem mã nguồn ban đầu của trang này
Trang Default.aspx ban đầu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default”%> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title>Untitled Page</title> </head> <body> <form id=”form1″ runat=”server”> <div> </div> </form> </body> </html> |
Chúng ta sẽ thử giải quyết bài này theo cách thức thông thường tức là không sử dụng Ajax. Bạn hãy sửa phần mã trong cặp thẻ <body> của trang Default.aspx trên như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<body> <form id=”form1″ runat=”server”> <br /> Mã nhân viên:<br /> <asp:TextBox ID=”txtEmployeeID” runat=”server”></asp:TextBox> <asp:Button ID=”btnFind” runat=”server” Height=”21px” OnClick=”btnFind_Click” Text=”Tìm kiếm” /> <br /> <br /> <div> <asp:Label ID=”lblEmployeeName” runat=”server” /> </div> </form> </body> |
Đoạn mã – Lớp EmployeeResources |
||
Trang này có một textbox để nhập liệu và khi người dùng nhấn nút Tìm kiếm, trang web sẽ hiển thị kết quả xuống label bên dưới tùy theo dữ liệu mà người dùng nhập vào. Tiếp đến bạn cần viết code-behind cho nút bấm Tìm kiếm: |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
protected void btnFind_Click(object sender, EventArgs e) { int empID; if(Int32.TryParse(txtEmployeeID.Text, out empID)) { lblEmployeeName.Text= EmployeeResources.GetEmployeeName(empID); } else lblEmployeeName.Text = “Dữ liệu nhập không hợp lệ”; } |
Khi chạy thử, trang web sẽ hiển thị kết quả tương tự như sau:
Kết quả ví dụ tra thông tin nhân viên phiên bản không dùng Ajax
Ứng dụng chạy không có vấn đề gì: nhập một số bất kì vào textbox, nhấn Tìm kiểm và trang web sẽ hiển thị tên của nhân viên hoặc một câu thông báo. Tuy nhiên mỗi lần như thế trang web sẽ nạp lại từ đầu, nếu giả sử là một trang có nội dung phong phú sẽ tốn khoảng thời gian tương đối lâu.
Chúng ta sẽ bắt đầu chuyển sang phiên bản có sử dụng Ajax đế xem sự khác biệt. Đầu tiên bạn thêm một ScriptManager từ toolbox tại thẻ AJAX Extensions vào trang. Sau đó là một control UpdatePanel để chứa những control cần xử lý khi nút Tìm kiếm được nhấn, mã nguồn tương tự như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<body> <form id=”form1″ runat=”server”> <asp:ScriptManager ID=”ScriptManager1″ runat=”server”> </asp:ScriptManager> <br /> Mã nhân viên:<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”> <ContentTemplate> <asp:TextBox ID=”txtEmployeeID” runat=”server”></asp:TextBox> <asp:Button ID=”btnFind” runat=”server” Height=”21px” OnClick=”btnFind_Click” Text=”Tìm kiếm” /> <br /> <asp:Label ID=”lblEmployeeName” runat=”server” /> </ContentTemplate> </asp:UpdatePanel> </form> <span style="font-style: inherit; font-weight: inherit;"></</span><span style="font-style: inherit; font-weight: inherit;">body</span><span style="font-style: inherit; font-weight: inherit;">></span> |
Mặc định, phần nội dung chứa trong thẻ ContentTemplate của UpdatePanel sẽ được cập nhật động khi một postback không đồng bộ xảy ra. Vì thế những control nào bạn cần xử lý đều phải nằm trong cặp thẻ này.
Giao diện lúc thiết kế của trang như sau, bạn có thể thấy một chút khác biệt nếu sử dụng bản 2005.
Khi chạy thử bạn sẽ nhận được kết quả tương tự như cách làm không sử dụng Ajax, tuy nhiên kết quả sẽ hiển thị ngay mà phải refresh lại toàn bộ trang.
Trong trường hợp bạn quên không thêm một control ScriptManager vào thì trang web sẽ hiển thị thông báo lỗi khi chạy.
2. Sử dụng UpdateProgress control
Trong một số trường hợp, ngay cả khi sử dụng Ajax để cập nhật trang web, tốc độ cập nhật vẫn có thể diễn ra khá chậm và cần một khoảng thời gian chờ đợi từ phía người dùng. Trong trường hợp cần có một phản hồi trực quan đến người dùng để cho thấy là tiến trình đang hoạt động.
Để giải quyết vấn đề này, chúng ta sẽ sử dụng một control tên là UpdateProgress. Nó cung cấp một tín hiệu trực quan khi một postback không đồng bộ xảy ra.
Thêm một control vào dưới cùng của UpdatePanel, đoạn mã như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server” DisplayAfter=”200″> <ProgressTemplate> <br /> <asp:Image ID=”Image1″ runat=”server” ImageUrl=”~/Images/ajax-loader.gif” /> Đang tải dữ liệu… </ProgressTemplate> </asp:UpdateProgress> |
Phần giữa thẻ ProgressTemplate bạn có thể thêm những đoạn text hoặc control để hiển thị tín hiệu. Mặc định sau 500 mili giây sau khi quá trình postback bắt đầu, để thay đổi giá trị này bạn chỉ cần lại gán thuộc tính DisplayAfter (đơn vị mili giây).
<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server” DisplayAfter=”200″>
Tuy nhiên khi chạy thử bạn sẽ khó có dịp nhìn thấy control UpdateProgress hoạt động vì việc cập nhật diễn ra quá nhanh. Vì thế bạn cần trì hoãn việc cập nhật trong một khoảng thời gian nào đó bằng cách sử dụng phương thức Sleep() của lớp Thread trong sự kiện nhấn nút Tìm kiếm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
protected void btnFind_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); int empID; if (Int32.TryParse(txtEmployeeID.Text, out empID)) { lblEmployeeName.Text = EmployeeResources.GetEmployeeName(empID); } else lblEmployeeName.Text = “Dữ liệu nhập không hợp lệ”; } |
Việc sử dụng Sleep() trong 2 giây chỉ để kiểm tra, bạn không nên thêm vào khi tạo một dự án thực tế. Giao diện khi chạy thử ứng dụng:
Chúc các bạn thành công khi áp dụng Ajax vào trong lập trình web!