WEB SERVER CONTROL

Tài liệu hướng dẫn giảng dạy Bài WEB SERVER CONTROL Tóm tắt Lý thuyết tiết - Thực hành 10 tiết Mục tiêu Các mục Sử dụng thành thạo điều khiển HTML Control HTML & ASP.Net Web Control HTML Control Làm việc với đối tượng ViewState HTML Server Control ASP.Net Web Control Asp.Net Page Điều khiển Bài tập 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9, 2.10 Bài làm thêm: 2.11, 2.12, 2.13 Điều khiển kiểm tra liệu Một số điều khiển khác Đối tượng ViewState Học phần - Lập trình ứng dụng web với ASP.NET Trang 32/174 Tài liệu hướng dẫn giảng dạy I HTML Control Điều khiển HTML (tag HTML) trang ASP.Net xem chuỗi văn bình thường Để sử dụng lập trình phía Server, ta gán thuộc tính runat="Server" cho điều khiển HTML Những điều khiển HTML (tag HTML) có thuộc tính runat="Server" gọi HTML Server Control Các điều khiển HTML công cụ Để chuyển điều khiển HTML thành điều khiển HTML Server, ta chọn Run As Server Control từ thực đơn ngữ cảnh Chuyển điều khiển HTML thành điều khiển HTML Server Ví dụ: Các điều khiển HTML: Label, Textbox, Button Học phần - Lập trình ứng dụng web với ASP.NET Trang 33/174 Tài liệu hướng dẫn giảng dạy Xử lý kiện: Private Sub butTong_ServerClick(…) … txtTong.Value = Val(txtA.Value) + Val(txtB.Value) End Sub Khi thi hành ứng dụng Ví dụ: Upload file với điều khiển HTML File Field Trong ví dụ sau, thực Upload tập tin lên server, cụ thể hơn, tập tin vừa Upload lưu thư mục Upload Chú ý: Để chép tập tin lên thư mục Upload, bạn cần phải cấp quyền cho phép ghi thư mục Upload Điều khiển HTML File Field: fileTap_tin lblThong_bao Màn hình chế độ thiết kế Xử lý kiện: Private Sub butUpload_ServerClick(…, e … ) … Dim sTap_tin As String Dim sTen_file As String sTap_tin = fileTap_tin.PostedFile.FileName 'Phân tích đường dẫn tập tin để lấy tên tập tin sTen_file = sTap_tin.Substring(sTap_tin.LastIndexOf("\") + 1, sTap_tin.Length - sTap_tin.LastIndexOf("\") + 1)) 'Thực chép tập tin lên thư mục Upload fileTap_tin.PostedFile.SaveAs(Server.MapPath("Upload\") & sTen_file) lblThong_bao.InnerHtml = "Thông báo: Bạn upload file thành cơng" End Sub Học phần - Lập trình ứng dụng web với ASP.NET Trang 34/174 Tài liệu hướng dẫn giảng dạy II ASP.Net Web Control II.1 Asp.Net Page Đây thành phần giao diện, nơi chứa điều khiển, sử dụng để thể nội dung trang web đến người dùng II.1.1 Sự kiện Page_Init() Page_Load() Page_PreRender() Page_Unload() Chuỗi kiện đối tượng Page a Init Sự kiện Page_Init xảy trang web yêu cầu Private Sub Page_Init(…) Handles MyBase.Init 'Do not modify it using the code editor InitializeComponent() End Sub b Load Sự kiện nơi mà bạn đặt phần lớn xử lý, giá trị khởi động ban đầu cho trang web Sự kiện xảy trang web yêu cầu Private Sub Page_Load(…) Handles MyBase.Load 'Put user code to initialize the page here End Sub c PreRender Sự kiện xảy trang Web chuẩn bị trả cho Client Private Sub Page_PreRender(ByVal sender As Object, …) Handles MyBase.PreRender End Sub Học phần - Lập trình ứng dụng web với ASP.NET Trang 35/174 Tài liệu hướng dẫn giảng dạy d Unload Sự kiện đối lập với kiện Page_Init Nếu kiện Page_Init xảy trang Web yêu cầu, đây, Page_Unload xự kiện sau cùng, xảy sau tất kiện khác Private Sub Page_Unload(ByVal sender As Object, …) Handles MyBase.Unload End Sub II.1.2 Thuộc tính a IsPostBack Đây thuộc tính kiểu luận lý Giá trị thuộc tính cho biết trạng thái trang Web Load, lần Load đầu tiên, giá trị thuộc tính = False Thuộc tính thường sử dụng kiện Page_Load để kiểm tra trạng thái trang Web Private Sub Page_Load(…) Handles MyBase.Load 'Put user code to initialize the page here If Not IsPostBack Then lblPostBack.Text = "Đây lần yêu cầu đầu tiên" Else lblPostBack.Text = "Đây lần yêu cầu sau." End If End Sub b SmartNavigation Trong trường hợp nội dung trang Web vượt kích thước hiển thị hình bạn đọc phần trang Web, ReLoad lại, hình hiển thị phần đầu trang Web Nếu giá trị thuộc tính True, trình duyệt Web giữ nguyên vị trí mà bạn đọc sau Reload Đây thuộc tính kiểu luận lý Giá trị mặc định False II.2 Điều khiển Dưới lý bạn nên sử dụng ASP.Net Web Control: Đơn giản, tương tự điều khiển Windows Form Đồng nhất: Các điều khiển Web server có thuộc tính giống dụng dễ tìm hiểu sử Hiệu quả: Các điều khiển Web Server tự động phát sinh tag HTML theo loại Browser Bảng liệt kê thuộc tính chung Web control Thuộc tính Kiểu Ý nghĩa (ID) Chuỗi Qui định tên điều khiển Tên điều khiển AccessKey String Qui định ký tự để di chuyển nhanh đến điều khiển - ký tự xử lý phím nóng Attributes AttributeCollection Tập hợp thuộc tính điều khiển HTML BackColor Color Qui định màu điều khiển Học phần - Lập trình ứng dụng web với ASP.NET Trang 36/174 Tài liệu hướng dẫn giảng dạy BorderColor Color Qui định màu đường viền điều khiển BorderStyle BorderStyle Qui định kiểu đường viền điều khiển BorderWidth Unit Qui định độ rộng đường viền CssClass String Qui định hình thức hiển thị điều khiển qua tên CSS Enabled Boolean Qui định điều khiển có hiển thị hay khơng Giá trị mặc định thuộc tính True – phép hiển thị Font FontInfo Qui định Font hiển thị cho điều khiển ForeColor Color Qui định màu chữ hiển thị điều khiển Height Unit Qui định chiều cao điều khiển ToolTip String Dòng chữ hiển thị rê chuột vào điều khiển Width Unit Qui định độ rộng điều khiển II.2.1 Label Label thường sử dụng để hiển thị trình bày nội dung trang web Nội dung hiển thị label xác định thơng qua thuộc tính Text Thuộc tính Text nhận hiển thị nội dung với tag HTML Ví dụ: lblA.Text = "Đây chuỗi văn thường" lblB.Text = "Còn chuỗi văn in đậm" II.2.2 HyperLink Điều khiển sử dụng để tạo liên kết siêu văn Các thuộc tính ImageURL: Qui định hình hiển thị điều khiển Text: Chuỗi văn hiển thị điều khiển Trong trường hợp thuộc tính ImageURL Text thiết lập, thuộc tính ImageURL ưu tiên, thuộc tính Text hiển thị Tooltip NavigateUrl: Đường dẫn cần liên kết đến Target: Xác định cửa sổ hiển thị cho mối liên kết _blank: Hiển thị trang liên kết cửa sổ _self: Hiển thị trang liên kết cửa sổ chứa liên kết _parent: Hiển thị trang liên kết frame cha Ví dụ: hplASP_net.Text = "Trang chủ ASP.Net" hplASP_net.ImageUrl = "Hinh\Asp_net.jpg" Học phần - Lập trình ứng dụng web với ASP.NET Trang 37/174 Tài liệu hướng dẫn giảng dạy hplASP_net.NavigateUrl = "http://www.asp.net" hplASP_net.Target = "_blank" Kết hiển trị trang Web II.2.3 TextBox TextBox điều khiển dùng để nhập hiển thị liệu TextBox thường sử dụng nhiều với ứng dụng windows form Các thuộc tính Text: Nội dung chứa Textbox TextMode: Qui định chức Textbox, có giá trị sau: SingleLine: Hiển thị nhập liệu dòng văn MultiLine: Hiển thị nhập liệu nhiều dòng văn Password: Hiển thị dấu * thay cho ký tự có Textbox Rows: Trong trường hợp thuộc tính TextMode = MultiLine, thuộc tính Rows qui định số dịng văn hiển thị Maxlength: Qui định số ký tự tối đa nhập vào cho TextBox Wrap: Thuộc tính qui định việc hiển thị văn có phép tự động xuống dịng kích thước ngang của điều khiển khơng đủ để hiển thị dịng nội dung văn Giá trị mặc định thuộc tính True - tự động xuống dịng Ví dụ: AutoPostBack: Thuộc tính qui định điều khiển có phép tự động PostBack Server nội dung Textbox bị thay đổi hay không Giá trị mặc định thuộc tính False khơng tự động Postback II.2.4 Image Điều khiển dùng để hiển thị hình ảnh lên trang Web Thuộc tính ImageURL: Đường dẫn đến tập tin hình ảnh cần hiển thị AlternateText: Chuỗi văn hiển thị tập tin thiết lập thuộc tính ImageURL khơng tồn ImageAlign: Vị trí hiển thị hình nội dung văn Học phần - Lập trình ứng dụng web với ASP.NET Trang 38/174 Tài liệu hướng dẫn giảng dạy NotSet Left Middle TextTop Right II.2.5 Button, ImageButton, LinkButton Các điều khiển Button, ImageButton, LinkButton mặc định nút Submit Button, nhấn vào PostBack Server Khi thiết lập giá tri thuộc tính CommandName cho điều khiển này, gọi tên chung cho điều khiển Command Button Các thuộc tính chung Button, ImageButton, LinkButton Thuộc tính Ý nghĩa Text Chuỗi văn hiển thị điều khiển CommandName Tên lệnh Được sử dụng kiện Command CommandArgument Thông tin bổ sung cho kiện Command CausesValidation Trang web mặc định kiểm tra tính hợp lệ liệu PostBack Các điều khiển Button, ImageButton, LinkButton PostBack Server nhấn kiểm tra tính hợp lệ liệu trang web Muốn trang Web bỏ qua việc kiểm tra liệu nhấn, gán trị cho thuộc tính = False Giá trị mặc định thuộc tính True Học phần - Lập trình ứng dụng web với ASP.NET Trang 39/174 Tài liệu hướng dẫn giảng dạy Chúng ta tìm hiểu thuộc tính CommandName CommandArgument phần sau Ngồi thuộc tính trên, điều khiển ImageButton cịn có thuộc tính ImageURL, ImageAlign AlternateText điều khiển Image Button, LinkButton ImageButton II.2.6 Listbox DropdownList ListBox DropdownList điều khiển hiển thị danh sách lựa chọn mà người dùng chọn nhiều (chỉ dành cho ListBox) Các mục lựa chọn thêm vào danh sách thơng qua lệnh cửa sổ thuộc tính (Property Windows) a Các thuộc tính AutoPostBack: Thuộc tính qui định điều khiển có phép tự động PostBack Server số mục chọn bị thay đổi Giá trị mặc định thuộc tính False - không tự động Postback Items Đây tập hợp chứa mục chọn điều khiển Ta thêm vào mục chọn vào thời điểm thiết kế thông qua cửa sổ ListItem Collection Editor, thông qua lệnh Rows: Qui định chiều cao ListBox theo số dòng hiển thị SelectionMode: Thuộc tính xác định cách thức chọn mục ListBox SelectionMode phép thay đổi trình thiết kế, vào lúc thực thi chương trình, thuộc tính đọc Single: Chỉ chọn mục có danh sách (mặc định) Multiple: Cho phép chọn nhiều lựa chọn b Xử lý mục chọn Các thuộc tính sau giúp bạn xác định số, giá trị mục chọn Trong trường hợp điều khiển cho phép chọn nhiều, ta duyệt qua Item tập hợp Items, sử dụng thuộc tính Selected đối tượng Item để kiểm tra xem mục có chọn hay khơng (Xem ví dụ trang kế tiếp) SelectedIndex: Cho biết số mục chọn Trong trường hợp chọn nhiều mục, SelectedIndex trả số mục chọn SelectedItem: Cho biết mục chọn Trong trường hợp chọn nhiều mục, SelectedItem trả mục chọn SelectedValue: Cho biết giá trị mục chọn Trong trường hợp chọn nhiều mục, SelectedValue trả giá trị mục chọn c Tìm hiểu tập hợp Items Add: Thêm mục vào cuối danh sách, sử dụng phương thức Items.Add Items.Add() Items.Add() Insert: Thêm mục vào danh sách vị trí đó, sử dụng phương thức Items.Insert Học phần - Lập trình ứng dụng web với ASP.NET Trang 40/174 Tài liệu hướng dẫn giảng dạy Items.Insert(,) Items.Insert(,) Count: Trả số mục (Item) có danh sách Items.Count Contains: Kiểm tra xem Item có tập hợp Items hay chưa, có, phương thức trả giá trị True, ngược lại, trả False Items.Contains() Remove: Xóa đối tượng Item khỏi danh sách Items.Remove() Items.Remove() Trong trường hợp đối tượng Item kiểu chuỗi, ta truyền vào chuỗi để xóa Nếu có nhiều giá trị giống danh sách, có mục chọn bị xóa Trong trường hợp đối tượng Item đối tượng, ta truyền vào biến tham chiếu đến item cần xóa RemoveAt: Xóa item vị trí index khỏi danh sách Items.RemoveAt() Clear: Phương thức Clear tập hợp Items dùng để xóa tất Item có danh sách Cú pháp Items.Clear Ví dụ: Điều khiển danh sách lstKhu_dl: SelectionMode=Multiple, Rows=4 Khi thiết kế Xử lý kiện: Private Sub Page_Load(…) Handles MyBase.Load If Not IsPostBack Then lstKhu_dl.Items.Add("Vịnh Hạ Long") lstKhu_dl.Items.Add("Phan Thiết - Mũi Né") lstKhu_dl.Items.Add("Nha Trang") lstKhu_dl.Items.Add("Đà Lạt") End If End Sub Học phần - Lập trình ứng dụng web với ASP.NET Trang 41/174 Tài liệu hướng dẫn giảng dạy II.3 Điều khiển kiểm tra liệu Trong phần tìm hiểu điều khiển dùng để kiểm tra liệu Dữ liệu nhập Hợp lệ? Client Thơng báo lỗi Khơng Có Server Khơng Hợp lệ? Có Các xử lý Sơ đồ xử lý kiểm tra liệu nhập Client Server Như bạn biết, PostBack Server, trang Web ln kiểm tra tính hợp lệ liệu (nếu có yêu cầu thiết kế) Nếu liệu không hợp lệ (bỏ trống, vi phạm miền giá trị, mật nhập lại không đúng, …), trang web PostBack Server Các thuộc tính chung điều khiển Validation Control Thuộc tính Ý nghĩa ControlToValidate Tên điều khiển cần kiểm tra Đây thuộc tính mà bạn phải xác định sử dụng Validation Control Text Chuỗi thơng báo xuất có lỗi ErrorMessage Chuỗi thông báo xuất điều khiển Validation Summary Giá trị hiển thị vị trí điều khiển không gán giá trị cho thuộc tính Text Display Qui định hình thức hiển thị: None: Khơng hiển thị thơng báo lỗi (vẫn có kiểm tra liệu) Static: Trong trường hợp khơng có vi phạm liệu, điều khiển khơng có hiển thị chiếm vị trí lúc thiết kế Dynamic: Trong trường hợp khơng có vi phạm liệu, điều khiển khơng chiếm dụng vị trí hình EnableClientScript Có cho phép thực kiểm tra phía Client hay khơng Giá trị mặc định True - có kiểm tra Ví dụ: Minh họa thuộc tính Display: Tại ô nhập lại mật khẩu, ta có điều khiển kiểm tra liệu: điều khiển kiểm tra không phép rỗng (rfvNhap_lai), điều khiển kiểm tra xem nhập lại mật có giống với mật nhập hay không rfvNhap_lai.Display = Static Học phần - Lập trình ứng dụng web với ASP.NET Trang 46/174 Tài liệu hướng dẫn giảng dạy rfvNhap_lai Khi lỗi, điều khiển Validation chiếm dụng vị trí trang web Lựa chọn hình thức hiển thị rfvNhap_lai.Display = Dynamic rfvNhap_lai Khi khơng có lỗi, điều khiển Validation khơng chiếm dụng vị trí trang web Lựa chọn hình thức hiển thị II.3.1 Điều khiển Required Field Validator Điều khiển dùng để kiểm tra giá trị điều khiển phải nhập Sử dụng điều khiển để kiểm tra ràng buộc liệu khác rỗng (bắt buộc nhập) Thuộc tính InitialValue: Giá trị khởi động Giá trị bạn nhập vào phải khác với giá trị thuộc tính Giá trị mặc định thuộc tính chuỗi rỗng II.3.2 Điều khiển Compare Validator Điều khiển dùng để so sánh giá trị điều khiển với giá trị điều khiển khác giá trị xác định trước Thơng qua thuộc tính Operator, thực phép so sánh như: =, , >, >=, = LessThan: < LessThanEqual: Date.Today Then lblThong_bao.Text = "Còn " & lSo_ngay & _ ngày đến ngày sinh nhật bạn." ElseIf calLich.SelectedDate = Date.Today Then lblThong_bao.Text = "Hôm ngày sinh nhật bạn" Else lblThong_bao.Text = "Sinh nhật bạn qua " & lSo_ngay & " ngày." End If End Sub Khi thi hành II.5 Đối tượng ViewState Đối tượng ViewState cung cấp để lưu lại thông tin trang web sau web server gởi kết cho Client Mặc định, trang web tạo cho phép sử dụng đối tượng ViewState thông qua thuộc tính EnableViewState (của trang web) = True Gán giá trị cho ViewState: ViewState("Tên trạng thái") = Nhận giá trị từ đối tượng ViewState: = ViewState("Tên trạng thái") Học phần - Lập trình ứng dụng web với ASP.NET Trang 59/174 Tài liệu hướng dẫn giảng dạy Ví dụ: Xử lý kiện: Private Sub Page_Load(…) Handles MyBase.Load If Not IsPostBack Then ViewState("So_lan") = Else ViewState("So_lan") += End If lblTB.Text = "Số lần Postback: " + CStr(ViewState("So_lan")) End Sub Private Sub butDem_Click() Handles butDem.Click lblTB.Text = "Số lần Postback: " + CStr(ViewState("So_lan")) End Sub Về chất, giá trị đối tượng ViewState lưu điều khiển hidden giá trị mã hóa Đối tượng ViewState giúp giảm bớt công sức việc lưu trữ truy xuất thông tin mà sử dụng nhiều điều khiển hidden Chọn chức View | Source từ browser Kinh nghiệm giảng dạy: Cũng giống điều khiển winform, điều khiển webform thành phần thiếu ứng dụng web Giáo viên cần hướng dẫn cho học viên sử dụng điều khiển thơng qua tập thực hành (tài liệu đính kèm) Ngồi tập có tài liệu, giáo viên soạn bổ sung thêm tập khác (mở rộng hơn) phù hợp với khả lớp phụ trách Học phần - Lập trình ứng dụng web với ASP.NET Trang 60/174 ... HTML) có thuộc tính runat= "Server" gọi HTML Server Control Các điều khiển HTML công cụ Để chuyển điều khiển HTML thành điều khiển HTML Server, ta chọn Run As Server Control từ thực đơn ngữ cảnh... sử dụng ASP.Net Web Control: Đơn giản, tương tự điều khiển Windows Form Đồng nhất: Các điều khiển Web server có thuộc tính giống dụng dễ tìm hiểu sử Hiệu quả: Các điều khiển Web Server tự động... lưu lại thông tin trang web sau web server gởi kết cho Client Mặc định, trang web tạo cho phép sử dụng đối tượng ViewState thơng qua thuộc tính EnableViewState (của trang web) = True Gán giá trị