Bài giảng Lập trình Net với C# - Chương 6: Lập trình WebForm với C#

Bài giảng Lập trình Net với C# - Chương 6: Lập trình WebForm với C# giới thiệu ASP.Net; tạo Web Forms, các Control Server của ASP.Net, các Control Validation. Mời các bạn tham khảo bài giảng để bổ sung thêm kiến thức về lĩnh vực này.

7/5/16 LẬP TRÌNH WEBFORM VỚI C# PHAN TRỌNG TIẾN BM Công nghệ phần mềm Khoa Công nghệ thông tin, VNUA Email: phantien84@gmail.com Website: http://timoday.edu.vn 7/5/16 WebForm với C# Nội dung I.  II.  III.  IV.  7/5/16 Giới thiệu ASP.Net Tạo Web Forms Các Control Server ASP.Net Các Control Validation WebForm với C# 7/5/16 I Giới thiệu ASP.Net q  ASP.Net khơng giống phiên ASP ASP.Net có đặc điểm : q Hỗ trợ nhiều ngôn ngữ lập trình q Có điều khiển q Hỗ trợ XML q Nhiều khả bảo mật: chứng thực người sử dụng q Hiệu thực thi code cao q  Các phiên q ASP 1.0 năm 1996 q Rồi phiên ASP 2.0 3.0 q ASP.Net cung cấp cách tiếp cận khác để phát triển ứng dụng Web 7/5/16 WebForm với C# Giới thiệu ASP.Net q  ASP.Net cách mạng phát triển ứng dụng Web q  ASP.Net dựa sở Net Framework q  Net Framework chạy CLR q  CLR có ưu điểm: q Tự động quản lý nhớ q Hỗ trợ nhiều ngôn ngữ q Bảo đảm việc chứng thực người sử dụng q Dễ cấu hình q Dễ triển khai 7/5/16 WebForm với C# 7/5/16 Các lợi ích mà ASP.Net cung cấp q  Hỗ trợ nhiều ngơn ngữ lập trình q  Phát triển qua nhiều ngơn ngữ q  Phần giao diện phần code tách riêng biệt q  Chứng thực người sử dụng q  Kiến trúc xử lý server q  Cải tiến chức gỡ rối lần vết q  Cấu hình ứng dụng với nhiều điều khiển q  Dễ triển khai q  Cải tiến tính caching caching mức trang, caching mức đoạn, caching API Dùng tính caching ASP.Net tăng tốc độ hiệu cho trang Web bạn 7/5/16 WebForm với C# Các mô hình lập trình ASP.Net q  Net Framework Software development Kit (SDK) sử dụng để phát triển ứng dụng Web Nó chạy Net Framework SDK với IIS 7/5/16 WebForm với C# 7/5/16 Hai mô hình lập trình ASP.Net q  Web Forms q Cho phép bạn tạo trang Web động q Cũng dùng control để tạo UI components q  Web Services q Mô hình lập trình cho phép bạn thi hành số chức server q Web Services đóng vai trị quan trọng tích hợp ứng dụng khác khơng giới hạn cơng nghệ q Web Services giúp bạn thay đổi liệu client-server kiến trúc server-server q Web Services dùng chuẩn HTTP XML để trao đổi liệu 7/5/16 WebForm với C# Các yêu cầu ASP.Net q  ASP.Net phần Net Framework SDK, download http://msdn.Microsoft.com/downloads q  Cần cài Internet Explorer q  Các hệ điều hành hỗ trợ Net q Windows 8, XP … 7/5/16 WebForm với C# 7/5/16 II Tạo Web Forms q  ASP.Net cho phép bạn tạo trang web động nhanh q  Các đặc điểm Web Form: q Dùng Net Framework chạy Web Server để tạo trang web động q Dùng đặc điểm CLR an tồn có kế thừa q Thiết kế lập trình sử dụng Tool Rapid Application Development(RAD) VS.Net q Khơng phụ thuộc vào client q Tương thích với trình duyệt web thiết bị mobile 7/5/16 WebForm với C# Các thành phần Web Form q  Giao diện người sử dụng q Diễn tả nội dung tới người sử dụng Nó bao gồm file gồm code HTML code XML Control Server q Được lưu trữ file với đuôi mở rộng aspx q  Logic lập trình (code) q Làm việc tương tác với người sử dụng với trang web form q Bất kỳ ngơn ngữ lập trình Net (Vb.Net,C# ) dùng để viết code logic cho trang Web q Hai mơ hình viết code: code-inline code-behind q Code-inline: code nhúng trực tiếp vào trang ASP.Net q Code-behind: code nằm file riêng, trang ASP.Net tham chiếu tới 7/5/16 WebForm với C# 10 7/5/16 Thiết kế Web Forms q  B1: Start VS.Net vào File\New\Web Site … để mở hộp thoại New Project q  B2: Chọn Template ASP.NET Web Site q  B3: Chọn nơi đặt Website Location q  B4: Chọn ngôn ngữ cho trang ASP.Net Language q  B5: Kích OK để hồn thành việc 7/5/16 WebForm với C# 11 Thiết kế Web Forms 7/5/16 WebForm với C# 12 7/5/16 Cửa sổ VS.Net 7/5/16 13 WebForm với C# ASP.Net tự tạo file Tên file Mục đích Web.Config Thơng tin cấu hình ứng dụng Default.aspx Các điều khiển kiện mức ứng dụng App_Data Thư mục chứa liệu 14 7/5/16 Thiết kế Web Forms q  Trang aspx cho phép bạn đặt Control Toolbox trực tiếp lên Form cách kéo thả q  Mặc định trang hiển thị chế độ lưới (grid layout) cho phép bạn đặt control Form vị trí Bạn chuyển sang chế độ Flow layout cho phép bạn đánh trực tiếp lên form 7/5/16 WebForm với C# 15 Thiết kế Web Forms q  Cách thay đổi: Trên form thiết kế, ấn phím F4, cửa sổ Property chọn Bạn tìm đến thuộc tính Layout để thay đổi hai chế độ q  Khi thiết kế chế độ Design, code HTML phát sinh tự động Bạn xem code HTML cách ấn nút Source cuối trang q  Bạn viết code trang HTML 7/5/16 WebForm với C# 16 7/5/16 Thiết kế Web Forms q  Một file code – behind tồn với trang không hiển thị cửa sổ Solution Explorer Để thị click vào icon Show All File cửa sổ Solution Explorer ấn F7 để xem code trang q  Bạn cần tìm hiểu đoạn code tự động phát sinh thiết kế form có trước bạn sửa nó: 7/5/16 WebForm với C# 17 Thiết kế Web Forms q  Trong chế độ hiển thị HTML void btnAccept_Click(object sender, EventArgs e) { //Code ban viet o day } 7/5/16 WebForm với C# 41 Các thuộc tính, phương thức, kiện hay sử dụng WebControl Property/Method/Event Mô tả AccessKey property Get Set shortcut để truy cập tới control BackColor property Get Set màu BorderColor property Get Set Border màu đường viền BorderStyle property Get Set kiểu đường viền Controls property Trả đối tượng lớp ControlCollection DataBind method Gắn data từ nguồn liệu tới server control 42 21 7/5/16 Các thuộc tính, phương thức, kiện hay sử dụng webcontrols Property/Method/Event Mô tả DataBinding event Phát sinh control chuẩn bị tương tác với DataSource Enabled property Chấp nhận gt Bool định control tương tác EnableViewState property Chấp nhận gt Bool định control có trì trạng thái hiển thị Font property Get Set Font ForeColor property Get Set màu chữ Height property Get Set chiều cao control 43 Các thuộc tính, phương thức, kiện hay sử dụng webcontrols Property/Method/Event Mô tả ID property TabIndex property Get Set nhận biết control Get Set TabIndex ToolTip property Get Set ToolTip Visible property Chỉ định control hiển thị không hiển thị giao diện Get Set độ rộng Width property 44 22 7/5/16 Các control validation q  Dữ liệu người sử dụng phải validation trước insert vào CSDL q  ASP.Net, việc validate dùng control validation -> bạn không cần phải viết code validation q Ví dụ: bạn muốn validation liệu nhập vào textbox bạn add control validation kết hợp với control bạn cần validate 7/5/16 WebForm với C# 45 Các control validate gì? q  ASP.Net cung cấp control validate, tất kế thừa từ lớp sở BaseValidator q RequiredFieldValidator: kiểm tra control rỗng hay khơng q CompareValidator: so sánh giá trị control có khớp hay không q RangeValidator: kiểm tra giá trị control khoảng text hay khoảng số q RegularExpressionValidator: kiểm tra giá trị control khớp biểu thức biểu thức qui q CustomValidator: thi hành validate người dùng tự định nghĩa q ValidationSummary: hiển thị tất lỗi nhóm 7/5/16 WebForm với C# 46 23 7/5/16 Các control validation 7/5/16 WebForm với C# 47 Cách làm để validation: bước q  Add control validation Kết hợp với control cần validation Đặt thuộc tính ControlToValidate control q  Gắn control validation control cần valiadate Các control validation gắn vào control cần validation tương ứng giá trị nhập vào control q  Các control validation hợp lệ giá trị thỏa mãn yêu cầu control q  Khi kết thúc validation, giá trị trả qua thuộc tính IsValid True False Sau validation thành công, trang web gửi liệu lên server 7/5/16 WebForm với C# 48 24 7/5/16 Cách dùng Validate control q  Cách dùng control validation kiểm tra server Một cách khác bạn validation client việc dùng script (vd javascript) q  Validation client giảm thời gian quay vòng cải thiện hiệu Các lỗi hiển thị người sử liệu không hợp lệ 7/5/16 49 WebForm với C# Thiết kế DemoWeb Control Text ID Button Accept btnAccept Label Message lblMessage Text box Confirm Password txtConfirm Text box Customer ID txtCusID Text box Number Of CDs txtNumCDs Text box Password txtPassword Text box Telephone Number txtTelNumber Text box Username txtUserName 50 25 7/5/16 RequiredFieldValidator q  Dùng kiểm tra giá trị control có hợp lệ hay khơng Bảng thuộc tính Property ID Value rfvUserName ControlToValidate txtUserName ErrMessage Nhập vào Username Display Dynamic 7/5/16 WebForm với C# 51 Code protected void btnAccept_Click(object sender, EventArgs e) { If (Page.IsValid = true) { //Specify a message to be displayed on the label lblMessage.Text = "Welcome " + txtUserName.Text; //Make the label visible lblMessage.Visible = True; } } 7/5/16 WebForm với C# 52 26 7/5/16 CompareValidator q  Dùng để so sánh giá trị nhập control với control khác giá trị có sẵn q  Các tốn tử: Equal, NotEqual, GreaterThan LessThan cho phép so sánh kiểu: String, Integer, Double, Date Currency 7/5/16 WebForm với C# 53 Bảng thuộc tính CompareValidator Thuộc tính Mơ tả ControlToValidate Control kiểm tra ControlToCompare Control so sánh Display Kiểu hiển thị ErrorMessage Thông báo lỗi Operator Type ValueToCompare 54 27 7/5/16 Code HTML