›
›

Bài giảng Xây dựng ứng dụng Web form - ASP.NET - Nguyễn Hà Giang

pptx 35 trang hapham 50
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Xây dựng ứng dụng Web form - ASP.NET - Nguyễn Hà Giang", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pptxbai_giang_xay_dung_ung_dung_web_form_asp_net_nguyen_ha_giang.pptx

Nội dung text: Bài giảng Xây dựng ứng dụng Web form - ASP.NET - Nguyễn Hà Giang

  1. Xây dựng ứng dụng Web Form – ASP.NET ThS. Nguyễn Hà Giang
  2. Nội dung • Tổng quan lập trình ứng dụng Web • Mô hình thực thi ASP.NET page • Xây dựng Web Form • HTML Control và Web Cotrol • Bổ sung code vào Page • Page Event Life Cycle • Postback event 6/24/2021 2
  3. Tổng quan lập trình UD Web • Ứng dụng Web là hệ thống phức tạp Web Application Giao diện Ngôn ngữ Giao thức Phần mềm Phần cứng 6/24/2021 3
  4. HTTP - HTML • Nền tảng cho lập trình web • HTTP (HyperText Transfer Protocol): giao thức cho phép hai máy tính trao đổi thông tin với nhau qua mạng • HTTP được xác định qua URL (Uniform Resource Locators) Tham số truy vấn http:// [:port] [ [? ]] Tên của host hay địa chỉ IP Đường dẫn đến tập tin yêu cầu 6/24/2021 4
  5. HTTP - HTML Trang web default.aspx được lưu trữ trong thư mục /beginner của web server có host là www.abcxyz.com 6/24/2021 5
  6. (HyperText Markup Language) • Trang web là tập tin văn bản được viết bằng ngôn ngữ HTML • HTML sử dụng các ký hiệu quy ước (tag) để trình bày nội dung văn bản Nội dung Định dạng Kết quả Trang chủ + ASP.NET 6/24/2021 6
  7. Client – Server Side • Client Side – HTML, JavaScript, CSS. – Khi web browser yêu cầu một trang web (dùng kỹ thuật client – side), web server tìm và trả trang web về cho client, client nhận kết quả và hiển thị lên màn hình. • Server Side – Mã lệnh ở server được biên dịch và thi hành, kết quả tự động chuyển sang HTML/JavaScript/CSS và trả về cho client. 6/24/2021 7
  8. Client/Server Architecture WWW is based on a client/server architecture Give me file x Here it is Desktop Remote Client Server Request made graphics: NNS, Inet98 using http Your desktop A computer elsewhere computer on the Internet holding information
  9. Cơ chế thực thi ASP.NET • Mô hình thực thi trang ASP.NET Request ASPX Engine Response HTML Page DLL 6/24/2021 9
  10. Cơ chế thực thi ASP.NET 6/24/2021 10
  11. Cơ chế thực thi ASP.NET default.aspx Which language? C# VB.NET C# VB.NET compiler compiler JIT MSIL compiler Common Language Native Runtime code 6/24/2021 11
  12. Cơ chế thực thi ASP.NET (2) Request Server tìm tập Xử lý tập tin tin aspx Error Có Thay Biên dịch lại đổi? Lưu trữ lại Không dạng DLL Response Thực thi trang aspx 6/24/2021 12
  13. Xây dựng Web Form • Phần mở rộng là aspx • Chỉ dẫn @Page xác định ngôn ngữ sử dụng • Các đối tượng chứa trong tag Form có thuộc tính runat ="server" • Chứa mã client và server • Chứa HTML và Server control 6/24/2021 13
  14. Xây dựng Web Form • WF là dạng mô hình đối tượng • Tuy được tạo từ các thành phần phân biệt, nhưng ASP.NET sẽ biên dịch WF thành một lớp động! • Lớp này dẫn xuất từ ASP.NET Page class • Lớp được mở rộng với control, code và HTML trong file aspx. • Tất cả control trong WF là đối tượng, do đó có thuộc tính, phương thức và sự kiện! 6/24/2021 14
  15. Web Form minh họa Object Object 6/24/2021 15
  16. Server Control • Đối tượng được lập trình ở server • Có thuộc tính runat = "server" • Có các hành vi được xây dựng trước, thuộc tính, phương thức và sự kiện có thể được tham chiếu lúc runtime ở server. • Cho phép tạo server control từ HTML control bằng cách bổ sung runat ="server" 6/24/2021 16
  17. Các loại Server Control Server Control HTML Control Web Control System.Web.UI.HtmlControls System.Web.UI.WebControls 6/24/2021 17
  18. Server Control • HTML control Add • Web Control 6/24/2021 18
  19. HTML Control • Cho phép tận dụng sức mạnh của WF trong khi vẫn duy trì tính quen thuộc và dễ dùng của thành phần HTML • Thuộc tính id là duy nhất, cho phép thao tác nội dung của TextBox ở sự kiện server-side và code khác. 6/24/2021 19
  20. Web Controls • Tương tự như các form control: TextBox, Button, Calendar, DataGrid • Web control phân thành các nhóm – Intrinsic control – Validation control System.Web.UI.WebControls – List control • Web control xuất hiện theo dạng namespace tag – tag với tiền tố 6/24/2021 20
  21. Viết code cho ASP.NET • Tạo trình xử lý sự kiện – Gán tên phương thức cho thuộc tính sự kiện • Tạo trình xử lý sự kiện trong code page public void GreetMe(object sender, EventArgs e) { Button1.Value = "Hello!"; } 6/24/2021 25
  22. Viết code cho ASP.NET Respond 6/24/2021 26
  23. Viết code cho ASP.NET • Code có thể viết trong file *.aspx theo các thẻ sau: – có thể khai báo biến, hàm, lớp trong thể hiện. – : dùng để gọi giá trị từ biến, hàm – : lấy giá trị dùng trong trang ràng buộc dữ liệu. 6/24/2021 27
  24. Viết code cho ASP.NET Khai báo biến Biến khai báo có giá trị: Sử dụng biến 6/24/2021 28
  25. Viết code cho ASP.NET *.aspx Lấy giá trị từ code behind: public partial class WebForm1 : System.Web.UI.Page { protected string CodeBehindData; protected void Page_Load(object sender, EventArgs e) Khai báo public { hoặc protected để CodeBehindData = "Hello ASP.NET World!"; truy xuất trong Label1.Text = CodeBehindData; aspx } } *.aspx.cs 6/24/2021 29
  26. Xử lý sự kiện Page Minh họa các sự kiện khi • Page life cycle trang được view Page.Init Control events Page.Load Change Events Textbox1.ServerChange Action Events Button1.ServerClick Page.Unload Page is disposed 6/24/2021 30
  27. Xử lý sự kiện Page • Page_Init: sau sự kiện này thì page được khởi tạo, sự kiện chịu trách nhiệm cho tất cả hoạt động khởi tạo • Page_Load: xuất hiện tự động mỗi khi form được load, có thể khởi tạo giá trị mặc định cho các server control ở đây • Page_Unload: pha cuối cùng của page life cycle. 6/24/2021 31
  28. Xử lý sự kiện Page (2) • Changed event: sau sự kiện Page_Load, các sự kiện đặc biệt của control được kích hoạt • Mặc định chỉ có sự kiện Click submit form cho server, sự kiện changed được lưu trữ và xử lý khi form được post về server. • Click event: dẫn đến việc post form và sau đó các sự kiện changed được thực hiện 6/24/2021 32
  29. Postback Form • ViewState control duy trì trạng thái của page trong suốt quá trình postback • Page_Load được kích hoạt sau mỗi lần request! – Sử dụng thuộc tính IsPostBack để kiểm tra protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { // thi hành phần khởi tạo } else { // làm điều gì đó cho mỗi lần request } } 6/24/2021 33
  30. Postback Form protected void Page_Load(object sender, EventArgs e) { if ( !Page.IsPostBack) { listbox1.Items.Add("Nguyen Ha Giang"); listbox1.Items.Add("Nguyen Ha Nam"); listbox1.Items.Add("Nguyen Ha Quy Mui"); Submit.Value = "First!"; } else { listbox1.Items.Add("More request!"); Submit.Value = "More!"; } } 6/24/2021 34
  31. Review • Thuộc tính nào được sử dụng để cho biết là Server control? • Làm thế nào để tạo ra trình xử lý sự kiện click của một HTML button control? • HTML control có thể xử lý trên server được không? • Giá trị IsPostback của Page để làm gì? 6/24/2021 35