Bài giảng Lập trình Asp.Net - Phần 2: Xây dựng ứng dụng Web Form – ASP.NET - Nguyễn Hà Giang

Xây dựng ứng dụng Web Form – ASP.NETThS. Nguyễn Hà GiangNội dungTổng quan lập trình ứng dụng WebMô hình thực thi ASP.NET pageXây dựng Web FormHTML Control và Web CotrolBổ sung code vào PagePage Event Life CyclePostback event12/3/20202 Tổng quan lập trình UD WebỨng dụng Web là hệ thống phức tạpPhần cứngPhần mềmGiao thứcNgôn ngữGiao diệnWeb Application12/3/20203 HTTP - HTMLNền tảng cho lập trình webHTTP (HyperText Transfer Protocol): giao thức cho phép hai máy tính trao đổi thông tin với nhau qua mạngHTTP được xác định qua URL (Uniform Resource Locators)http:// [:port] [ [? ]]Tên của host hay địa chỉ IPĐường dẫn đến tập tin yêu cầuTham số truy vấn12/3/20204 HTTP - HTML12/3/20205 web default.aspx được lưu trữ trong thư mục /beginner của web server có host là www.abcxyz.com(HyperText Markup Language)Trang web là tập tin văn bản được viết bằng ngôn ngữ HTMLHTML sử dụng các ký hiệu quy ước (tag) để trình bày nội dung văn bản12/3/2020 6Trang chủ ASP.NETNội dung Định dạng+Kết quảClient – Server SideClient SideHTML, 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 SideMã 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.12/3/2020 7Client/Server ArchitectureWWW is based on a client/server architectureGive me file xHere it isA computer elsewhereon the Internet holdinginformationDesktop ClientRemote ServerRequest made using httpYour desktop computergraphics: NNS, Inet98Cơ chế thực thi ASP.NETMô hình thực thi trang ASP.NET12/3/2020 9ASPX EnginePage DLLHTMLRequestResponseCơ chế thực thi ASP.NET12/3/2020 10Cơ chế thực thi ASP.NET12/3/202011 NativecodeC#Which language?VB.NETcompilerC#compilerMSILJITcompilerdefault.aspxCommon Language RuntimeHTMLVB.NETCơ chế thực thi ASP.NET (2)12/3/2020 12Server tìm tập tinXử lý tập tin aspxThay đổi?Biên dịch lạiLưu trữ lại dạng DLLThực thi trang aspxRequestResponseErrorCóKhôngXây dựng Web FormPhần mở rộng là aspxChỉ dẫn @Page xác định ngôn ngữ sử dụngCác đối tượng chứa trong tag Form có thuộc tính runat ="server"Chứa mã client và serverChứa HTML và Server control12/3/2020 13 Xây dựng Web FormWF là dạng mô hình đối tượngTuy đượ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 classLớ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!12/3/2020 14Web Form minh họa12/3/2020 15 ObjectObjectServer ControlĐối tượng được lập trình ở serverCó 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"12/3/2020 16Các loại Server Control12/3/2020 17HTML ControlWeb ControlServer ControlSystem.Web.UI.HtmlControlsSystem.Web.UI.WebControlsServer ControlHTML controlWeb Control12/3/2020 18Add HTML ControlCho 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 HTMLThuộ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.12/3/2020 19Web ControlsTương tự như các form control: TextBox, Button, Calendar, DataGridWeb control phân thành các nhómIntrinsic controlRich controlValidation controlList controlWeb control xuất hiện theo dạng namespace tag – tag với tiền tố 12/3/2020 20 System.Web.UI.WebControlsCách thức Server control làm việcKhi trang web ASP.NET thực thiTạo ra các hành động và phương thức của formThêm id duy nhất và các tên thuộc tính cho formThêm giá trị thuộc tính cho control.Thêm những hidden control vào form để lưu trữ view stateThuộc tính runat=“server” cho phép form duy trì view state của các control trong trang ASP.NETKhi page được submit cho server, page tự động add hidden control tên __VIEWSTATE vào form.Nếu form ở trạng thái modified, __VIEWSTATE được sử dụng để lưu giá trịCho phép page có thể lưu trữ qua nhiều lần request.12/3/2020 21Cách thức Server control làm việcVí dụ tạo form đơn giản cho phép user nhập tên và chọn công việc trong list box12/3/2020 22Giả sử hai thông tin là Nguyen Ha Nam và Software Engineer được submitCách thức Server control làm việcKhi trang ASP.NET trên thực thiTạo ra action và method cho form post back!Add id duy nhất và name cho form, nếu giá trị này chưa xác định trong tag của formMỗi control thì add thuộc tính giá trị với giá trị chứa trong control khi form được submit. Điều này giúp duy trì trạng thái của server controlAdd hidden control tên __VIEWSTATE để lưu trữ trạng thái thay đổi của trang.12/3/2020 23HTML trả về cho client12/3/2020 24 Name: Profession: Software Engineer Software Tester Software Manager Viết code cho ASP.NETTạo trình xử lý sự kiệnGán tên phương thức cho thuộc tính sự kiệnTạo trình xử lý sự kiện trong code page12/3/2020 25public void GreetMe(object sender, EventArgs e){ Button1.Value = "Hello!";}Viết code cho ASP.NET12/3/2020 26RespondViết code cho ASP.NETCode 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.12/3/2020 27Viết code cho ASP.NET12/3/2020 28 Biến khai báo có giá trị: Khai báo biếnSử dụng biếnViết code cho ASP.NET12/3/2020 29 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) { CodeBehindData = "Hello ASP.NET World!"; Label1.Text = CodeBehindData; } }*.aspx*.aspx.csKhai báo public hoặc protected để truy xuất trong aspxXử lý sự kiện PagePage life cycle12/3/2020 30Minh họa các sự kiện khi trang được viewPage.LoadPage.UnloadTextbox1.ServerChangeButton1.ServerClickPage is disposedPage.InitControl eventsChange EventsAction EventsXử lý sự kiện PagePage_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ạoPage_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 ở đâyPage_Unload: pha cuối cùng của page life cycle.12/3/2020 31Xử 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ạtMặ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ện12/3/2020 32Postback FormViewState control duy trì trạng thái của page trong suốt quá trình postbackPage_Load được kích hoạt sau mỗi lần request!Sử dụng thuộc tính IsPostBack để kiểm tra12/3/2020 33protected 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 }}Postback Form12/3/2020 34 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!"; }}DemoReviewThuộ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ì?12/3/2020 35