Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 4 - Thiết kế form có dạng như sau cho trang Default.aspx: - Bản control thành phần btnOriginal Button Chuyển dữ liệu từ TextBox
Trang 1Trong Lab 07 này, sẽ đề cập đến các vấn đề về Event và PostBack của một trang ASPX Dựa vào đó các Developer có thể điều khiển được trạng thái của một trang ASPX
Trường Đại Học Khoa Học Tự Nhiên
Khoa Công Nghệ Thông Tin
Bộ môn Công Nghệ Phần Mềm
Môn: Công nghệ Web ASP.Net
Trang 2Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 2
o Nến Project lại thành một file <MSSV>_Lab07_PostBack.ziphoặc
<MSSV>_Lab07_PostBack.rar
- Thời gian làm bài: 03 ngày
2 Nội dung cơ bản
- PreviousPagelà một đối tượng chỉ một trang ASPX trước đó đã PostBack đến
trang ASPX hiện tại Ví dụ: Trang A PostBack đến trang B thì ở trang B đối tượng
PreviousPage chính là trang A
- IsPostBack là một cờ được dùng để xác định trạng thái của một trang ASPX có tự
động gọi lại chính nó hay không? IsPostBack có 2 giá trị:
o True: trang ASPX đã thực hiện một gọi một hàm lên hệ thống và sau đó gọi lại trang ASPX đó
- IsCrossPagePostBack là một cờ (hay còn gọi là property) được dùng để xác định
trạng thái Loadlại của một trang A khi được một trang B khác gọi Load lại Ví dụ:
từ trang A postback đến trang B thì trang B sẽ nạp lại trang A vào trong bộ nhớ của Server Và tại đây cờ IsCrossPagePostBack của trang A sẽ được set giá trị True (ở đây xet IsCrossPagePostBacklà property của trang A)
o True: Trang A đã PostBack qua trang B và đã được trang B gọi load lại vào
bộ nhớ để tương tác lấy dữ liệu ra
- Khi xét đến IsCrossPagePostBackthường là IsCrossPagePostBackđối tượng PreviousPage Và IsCrossPagePostBackcủa trang hiện tại luôn là False
- IsCallBack là một cờ hoạt động cho biết một đối tượng Ajax tự động Load dữ liệu lại trang hiện tại (chỉ Load một phần dữ liệu trên một control nào đó, không Load lại hết toàn trang)
- Bảng chi thông tin chi tiết về trạng thái của các loại cờ trên
Trang 3Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 3
Original request o IsPostBack = false
o PreviousPage = null (Nothingtrong Visual Basic)
o IsCallback = false
o PreviousPage = null (Nothingtrong Visual
Basic)
o IsCallback = false
Cross-page posting o IsPostBack = false
o PreviousPagetham chiếu tới trang nguồn
o IsCrossPagePostBack = true
o IsCallback = false
Server transfer o IsPostBack = false
o PreviousPagetham chiếu tới trang nguồn
o IsCrossPagePostBack= false với IsCrossPagePostBack này là của trang được
tham chiếu tới trongPreviousPage
o IsCallback = false
o PreviousPage = null (Nothingtrong Visual Basic)
o IsCallback = true
3 Bài tập thực hành
3.1 Tạo website application
- Tạo một project Web Application có cấu truc website như sau:
Trang 4Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 4
- Thiết kế form có dạng như sau cho trang Default.aspx:
- Bản control thành phần
btnOriginal Button Chuyển dữ liệu từ TextBox
xuống các Label
Target1.aspx
Trang 5Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 5
Target2.aspx
btnServerTransfer Button PostBack sang trang
ServerPage.aspx
lblResultStudentID Label Chứa giá trị trả về của
txtStudentID
txtName
lblResultEmail Label Chứa giá trị trả về của
txtEmail
- Đặt thuộc tính PostBackURL cho các Button theo các bước sau
o Click vào nut … của PostBackURL để chọn trang ASPX cần PostBack đến
o Chọn trang cần PostBack đến
Trang 6Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 6
o Danh sách PostBack của các Button như sau:
btnTargetPage1 ~/Target_1.aspx
btnTargetPage2 ~/Target_2.aspx
3.2 Ứng dụng IsPostBack
- Dùng cơ IsPostBackđể kiểm tra trạng thái của trang Default.aspxcó được phải lần đầu tiên được load lên hay không Nếu không phải thì sẽ lấy các giá trị của các
textboxgán cho các label
- Định nghĩa sự kiện Page_Loadcủa trang Default.aspx như sau:
{
publicpartialclass _Default : System.Web.UI Page
{
protectedvoid Page_Load( object sender, EventArgs e)
{
{
SaveData();
}
}
privatevoid SaveData()
Trang 7Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 7
{
lblResultStudentID.Text = txtStudentID.Text;
lblResultName.Text = txtName.Text;
lblResultEmail.Text = txtEmail.Text;
}
}
}
- Khi deploy lên browser sẽ nhận được kết quả như sau:
3.3 Ứng dụng IsCrossPagePostBack
3.3.1 Ứng dụng PreviousPage
- Dùng đối tượng PreviousPageđể kiểm trang một trang có PostBack dữ liệu qua
trang sau hay không
- Thiết kế trang Target_1.aspxnhư hình sau:
Trang 8Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 8
- Trong đó các thành phần Label sẽ giống như trang Default.aspx
- Định nghĩa sự kiện Page_Loadcho trang Target_1.aspxnày như sau:
{
publicpartialclass Target_1 : System.Web.UI Page
{
protectedvoid Page_Load( object sender, EventArgs e)
{
{
SaverData();
}
}
privatevoid SaverData()
{
}
}
}
- Dùng phương thức FindControl của đối tượng PreviousPageđể tương tác vào một control của trang ASPX trước đó
- Deploy lên Browser sẽ có kết quả như sau:
Trang 9Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 9
3.3.2 Ứng dụng IsCrossPagePostBack
- Do Control trong trang ASPX trước có thuộc tính dạng protected nên ở trang sau
sẽ không truy xuất trực tiếp được qua đối tượng PreviousPage Do vậy Cần phải
định nghĩa một phương thức public để xuất các giá trị trong các Control đó ra bên ngoài
- Trong file Default.aspx.cssẽ định nghĩa các phương thức hay property đó như sau:
public String StudentID
{
get { return txtStudentID.Text; }
}
public String Name
{
get { return txtName.Text; }
}
public String Email
{
Trang 10Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 10
SaveData();
}
}
privatevoid SaveData()
{
lblResultStudentID.Text = txtStudentID.Text;
lblResultName.Text = txtName.Text;
lblResultEmail.Text = txtEmail.Text;
}
public String StudentID
{
get { return txtStudentID.Text; }
}
public String Name
{
get { return txtName.Text; }
}
public String Email
{
get { return txtEmail.Text; }
}
}
}
- Thiết kế trang Target_2.aspxnhư sau:
Trang 11Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 11
- Trong đó các thành phần Label sẽ giống như trang Default.aspx
- Ngoài ra còn cần phải chỉ rõ PreviousPagecủa trang Target_2.aspxnày là trang Default.aspxbằng cách chuyển qua phần source HTML của trang Target_2.aspxvà thêm đoạn code HTML như sau:
Trang 12Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 12
- Định nghĩa sự kiện Page_Loadcho trang Target_2.aspxnày như sau:
{
publicpartialclass Target_2 : System.Web.UI Page
{
protectedvoid Page_Load( object sender, EventArgs e)
{
{
SaveData();
}
}
privatevoid SaveData()
{
lblResultStudentID.Text = PreviousPage.StudentID;
lblResultName.Text = PreviousPage.Name;
lblResultEmail.Text = PreviousPage.Email;
}
Trang 13Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 13
}
}
- Deploy lên Browser sẽ có kết quả như sau:
3.3.3 Ứng dụng CrossPagePostBack trong trường hợp Server Transfer
- Định nghĩa sự kiện Click cho button btnServerTransfer
protectedvoid btnServerTransfer_Click( object sender, EventArgs e)
{
}
- Thiết kế trang ServerTransfer.aspxnhư sau:
Trang 14Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 14
- Trong đó các thành phần Label sẽ giống như trang Default.aspx
- Ngoài ra còn cần phải chỉ rõ PreviousPagecủa trang ServerTransfer.aspxnày là
trang Default.aspxbằng cách chuyển qua phần source HTML của trang ServerTransfer.aspxvà thêm đoạn code HTML như sau:
Trang 15Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 15
- Định nghĩa sự kiện Page_Loadcho trang ServerTransfer.aspxnày như sau:
{
publicpartialclass ServerTransfer : System.Web.UI Page
{
protectedvoid Page_Load( object sender, EventArgs e)
{
{
SaveData();
}
}
Trang 16Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 16
4 Bài tập
- Thiết kế một trang đăng ký một tài khoảng Gmail mới bằng các control ASP.Net
Trang 17Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 17
- Sau khi người dùng điền đầy đủ các thông tin cần thiết sẽ hiển thị trang thông báo Đăng ký thành công (sử dụng các đối tượng PreviousPages, IsCrossPagePostBack)