Bài giảng Thiết kế và lập trình Web 2: Làm việc với Control

Bài giảng môn học LLÀÀMM VIVIỆỆCC VVỚỚII CONTROLCONTROL Khoa Công nghệ thông tin Trường ĐạihọcKhoahọcTự nhiên ThiThiếếtt kkếế && LLậậpp trtrììnhnh WEBWEB 22 Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Nội dung ƒ Server Control ƒ ASP.NET Server control vs HTML control ƒ Simple control – Label, Button (Button, LinkButton, ImageButton), TextBox – List Control (ListBox, DropDownList, Table,DataGrid, DataList, Repeater ) ƒ Validation control ƒ Mộtsố control khác © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Nội dung ƒ Server Control ƒ ASP.NET Server control vs HTML control ƒ Simple control – Label, Button (Button, LinkButton, ImageButton), TextBox – List Control (ListBox, DropDownList, Table,DataGrid, DataList, Repeater ) ƒ Validation control ƒ Mộtsố control khác © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Server Control ƒ Server control là những control mà Web server (IIS) có thể “hiểu được”. ƒ Các loại server control – HTML Server Control – ASP.NET Server Control ƒ Dùng để thể hiệngiaodiệnweb © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control HTML Server Control ƒ HTML Server control là những tag HTML tạora ƒ Duy trì tương thích với các tag HTML cũ. ƒ Thêm vào thuộc tính run at = “server” ƒ Tấtcả HTML Server Control phải được đặt trong tag vớithuộc tính run at = “server” © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control ASP.NET Server Control ƒ ASP.NET Server Control là những tag đặcbiệtcủa riêng ASP.NET. ƒ Các control này cũng sẽđượcxử lý trên server, và đòi hỏiphảicóthuộc tính runat = “server” ƒ Không tương ứng với HTML tag nào. ƒ Có thể dùng thể hiệncácthànhphầnphứctạp. © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Nội dung ƒ Server Control ƒ ASP.NET Server control vs HTML control ƒ Simple control – Label, Button (Button, LinkButton, ImageButton), TextBox – List Control (ListBox, DropDownList, Table,DataGrid, DataList, Repeater ) ƒ Validation control ƒ Mộtsố control khác © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control ASP.NET Server control vs HTML control Tính năng ASP.NET Server control HTML control Chỉ có thể kích hoạtcácsự Kích hoạt đượcmộtsố sự kiệncụ thể Server event kiệnmức trang trên server trên Server (post-back) Dữ liệu không đượclưugiữ lại, Quảnlýtrạng Dữ liệunhập vào control đượclưugiữ phảitự lưuvàđiềnvàosử thái lạisaumỗi request dụng script Tự động nhậndiệnloại trình duyệtvà Không tự động nhậndiệntrình Tương thích tạohiểnthị cho phù hợp duyệt .NET Framework cung cấpmộttập Các thuộc các thuộctínhchomỗi control, cho Chỉ có các thuộctínhchuẩn tính phép thay đổiphầnhiểnthị và hành vi củaHTML thông qua mã lệnh © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Tạisaosử dụng HTML control ??? Sử dụng HTML control khi: ƒ Nâng cấp từ ASP ƒ Không phảitấtcả các control đềucầncácsự kiện server-side hoặcquảnlýtrạng thái © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Khác biệt trong HTML tag ƒ Server control: – ƒ HTML control: – HTML tag ƒ Ví dụ: – – – <asp:Button id="btnShow" runat="server" Text="Show"> – © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Server Control & HTML Control Server control HTML control Hiểnthị Label, Text Field, Text Area, Label, TextBox, Literal Text Password Field Hiểnthị Table, DataGrid Table Table DropDownList, ListBox, DataList, List List Box, Dropdown Repeater Thựchiện Button, Reset Button, Submit Button, LinkButton, ImageButton lệnh Button CheckBox, CheckBoxList, RadioButton, Đặtgiá trị Checkbox, Radio Button RadioButtonList Hiểnthị Image, ImageButton Image Image Liên kết Hyperlink Anchor © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Server Control & HTML Control Flow Layout, Group control Panel, Placeholder Grid Layout Ngàytháng Calendar none Quảng cáo AdRotator none Đường kẻ none Horizontal Rule Lấy tên file từ none File Field client Lưudữ liệutrên (sử dụng quảnlýtrạng thái) Input Hidden trang Kiểmtratính RequiredFieldValidator, CompareValidator, none (sử dụng đúng đắncủa RangeValidator, RegularExpressionValidator, client script) dữ liệunhập CustomValidator,ValidationSummary © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Nội dung ƒ Server Control ƒ ASP.NET Server control vs HTML control ƒ Simple control – Label, Button (Button, LinkButton, ImageButton), TextBox – List Control (ListBox, DropDownList, Table,DataGrid, DataList, Repeater ) ƒ Validation control ƒ Mộtsố control khác © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Simple control Label, Buttons, TextBox - HTML tag ƒ Label – Please input text ƒ Buttons (Button, LinkButton, ImageButton) – <asp:Button id="Button1" runat="server" Text="Button"> – <asp:LinkButton id="LinkButton1" runat="server">LinkButton – <asp:ImageButton id="ImageButton1" runat="server"> ƒ TextBox – © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Simple control Chỉnh sửaThuộc tính lúc Thiếtkế Button Image Button Link Button © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Simple control Mộtsố thuộc tính quan trọng ƒ Label, Buttons – ThuộctínhText ƒ TextBox Thuộctính Sử dụng đề Text Lấy/Đặtdữ liệu choTextBox. TextMode SingleLine, MultiLine (scrollable), Hoặc Password. Enabled Enable/Disable TextBox Visible Show/Hide TextBox ReadOnly Ngăn không cho ngườidùng thay đổidữ liệu trong TextBox. Khi đượcthiếtlậplà True, mỗi khi ngườidùng thay đổidữ liệu AutoPostBack TextChanged trong TextBox sẽ kích hoạtsự kiện post-back về server © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control List Control ListBox, DropDownList, Table Control Sử dụng khi Hiểnthị danh sách dữ liệu read-only đơngiản, sử dụng ListBox scroll Hiểnthị danh sách dữ liệu read-only đơngiản, sử dụng cửa DropDownList sổ sổ xuống Hiểnthị thông tin dướidạng dòng và cột. Table control Table cho phépxâydựng cácbảng động bằng mã lệnh sử dụng cácthuộctính tậphợpTableRowsvà TableCells © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control List Control: HTML tag ƒ ListBox – ƒ DropDownList – <asp:DropDownList id="DropDownList1" runat="server"> ƒ Table – <asp:Table id="Table1" runat="server" Width="100px" Height="70px"> © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control List Controls Chỉnh sửaThuộc tính lúc Thiếtkế © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control List Control Thêm các mụcdữ liệuvàothời điểmchạy ứng dụng ƒ ListBox và DropDownList: – Sử dụng phương thức Add và danh sách Items của control – Ví dụ: protected void btnShow_Click(object sender, EventArgs e) { ListBox1.Items.Add(txtSource.Text); DropDownList1.Items.Add(txtSource.Text); } © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control List Control Lấymụcdữ liệu đượcchọn ƒ Dùng thuộc tính SelectedItem để lấymụcdữ liệu đượcchọn hiệntại trong List protected void Page_Load(object sender, EventArgs e) { // Test if there is a selected item. if (ListBox1.SelectedItem == null) // Display the selected item. Label1.Text = "The selected item is: " + ListBox1.SelectedItem.Text; else Label1.Text = "No item is selected.“; } } © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Nội dung ƒ Server Control ƒ ASP.NET Server control vs HTML control ƒ Simple control – Label, Button (Button, LinkButton, ImageButton), TextBox – List Control (ListBox, DropDownList, Table,DataGrid, DataList, Repeater ) ƒ Validation control ƒ Mộtsố control khác © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Validation control ƒ Validation control kiểmtratínhđúng đắncủadữ liệudo client nhậpvàotrướckhitrangđượcgửivề cho server Validation control Sử dụng khi RequiredFieldValidator Kiểmtranếudữ liệu trong control khácrỗng Kiểmtranếumụcdữ liệunhập trong control giống CompareValidator với control khác Kiểmtranếumụcdữ liệunhập trong control nằm RangeValidator trong khoảng 2 giá trị Kiểmtranếumụcdữ liệunhập trong control thỏa1 RegularExpressionValidator công thức định dạng chỉđịnh Kiểmtratính đúng đắncủadữ liệunhậpvào control CustomValidator sử dụng client-side script hoặc a server-side code, hoặccả 2 ValidationSummary Hiểnthị tấtcả cáclỗikiểmtraxảy ra trong trang © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Sử dụng Validation Control ƒ Các bước: – Kéo thả 1 validate control vào Web form – Thiếtlậpcácthuộc tính cho validate control: • ControlToValidate là control bạnmuốnkiểmtra • ErrorMessage : Thông báo lỗi • Text : Hiểnthị của validate control – Sử dụng ValidationSummary control để hiềnthị tấtcả các lỗixảy ra trong trang Mặcdùviệckiểmtraxảyraở client, nhưng nó chỉ thựchiện khi có 1 sự kiện post-back xảyra! © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Ví dụ •Đặtthuộc tính ErrorMessage cho Validate control •Sử •Sdụngử d ValidationSummaryụng ValidationSummary control với ShowMessage=True © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Hủybỏ việcKiểmtra ƒ Để cho người dùng tự hủybỏ việckiểmtranếumuốn ƒ Các bước: – Tạomột HTML Button control <INPUT id="butCancel" onclick="Page_ValidationActive=false;“ type="submit" value="Cancel"> • Hủysự kiện validation: onclick="Page_ValidationActive=false; • Và gửi trang về cho server – Kiểmtralạidữ liệu ở trên server • Kiểmtrathuộc tính Page.IsValid trong hàm xử lý sự kiện Page_Load © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Page.IsValid ƒ Thuộc tính Page.IsValid kiểm tra xem các form đã thỏa các Validation Control hay không. ƒ Trả về true nếutấtcảđều được test thành công ƒ Trả về false, trong trường hợpngượclại. protected void Page_Load(object sender, EventArgs e) { // Validate in case user cancelled validation. if (Page.IsPostBack == true) // Check if page is valid Page.Validate(); else // User cancelled operation, return home Response.Redirect("default.aspx"); } © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control CustomValidator ƒ Sử dụng CustomValidator control ƒ Tự viếtmãlệnh kiểmtrachạy trên server hoặc client ƒ Trên Server – Đặtmãlệnh kiểm tra trong hàm xử lý sự kiện ServerValidate ƒ Hoặc Trên Client – Chỉđịnh đoạn script kiểmtrachothuộc tính ClientValidationFunction của CustomValidator © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Ví dụ: Tự Kiểm tra trên Server protected void MyValidate(object source, ServerValidateEventArgs args) { args.IsValid = false; if (TextBox1.Text == "abc") args.IsValid = true; } © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Ví dụ: Tự kiểm tra trên Client function ClientValidate(e, args) { args.IsValid = false; if (args.Value == "abc") args.IsValid = true; } © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Nội dung ƒ Server Control ƒ ASP.NET Server control vs HTML control ƒ Simple control – Label, Button (Button, LinkButton, ImageButton), TextBox – List Control (ListBox, DropDownList, Table,DataGrid, DataList, Repeater ) ƒ Validation control ƒ Mộtsố control khác © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Mộtsố control khác ƒ Lấyvàthiếtlậpgiátrị – RadioButton, RadioButtonList, CheckBox, CheckBoxList ƒ Gom nhóm – Panel ƒ Hiểnthị Hình ảnh và Quảng cáo – Background, Foreground, Image, AdRotator ƒ Lấy thông tin Ngày tháng – Calendar ƒ LấyTậptin từ Client – File Field HTML control © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Mộtsố control khác RadioButton, CheckBox ƒ HTML tag – – ƒ Sử dụng thuộc tính Checked để lấygiátrị thiếtlập protected void btnShow_Click(object sender, EventArgs e) { if (CheckBox1.Checked == True) Response.Write("Checkbox1 is CHECKED“); } • Tấtcả RadioButton phải có cùng một GroupName © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Mộtsố control khác Panel ƒ Kéo thả control Panel vào Web form. ƒ Kéo các control khác lên trên Panel để gom nhóm © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Mộtsố control khác Hình ảnh và Quảng cáo ƒ Hình nền – Sử dụng thuộc tính Background của Web form – Sử dụng thuộc tính BackImageUrl của Panel control ƒ Hình ảnh – Sử dụng Image control ƒ Button bằng hình ảnh – Sử dụng ImageButton control ƒ Quảng cáo – Sử dụng AdRotator control © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Mộtsố control khác Calendar ƒ Sử dụng Calendar control để lấy thông tin về Ngày tháng ƒ Để lấyhoặcthiếtlậpgiátrị ngày tháng trên Calendar control, sử dụng hàm xử lý sự kiện SelectionChanged và thuộc tính SelectedDate hoặc SelectedDates © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Làm việcvới Control Mộtsố control khác File Field HTML control ƒ Sử dụng File Field HTML control để upload file từ client lên server ƒ File Field HTML control = Text Field HTML control + Submit Button HTML control ƒ Nhấn vào Browse button sẽ hiểnthị cửasổ cho phép chọn đường dẫn đến các file muốn upload trên máy client © 2007 Khoa CNTT – ĐH KHTN