L p trình Thi t k Web – Bài 4: Làm vi c v i Control N id dung L p trình Thi t k Web HTML Server Controls ASP.NET Server Controls Validation Controls V lid ti C t l Bài Web User Controls Làm vi c v i Control Ths Ths Tr n Th Bích H nh Khoa CNTT – H.KHTN © 2009 Khoa Cơng ngh thơng tin L p trình Thi t k Web – Bài 4: Làm vi c v i Control © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control Server Controls S C t l Ví d Là nh ng control mà Web server (IIS) có th “hi u hi c c” M i server control bao g m – T p th c tí h (P thu tính (Properties) ti ) – Các s ki n (Events) – Các ph Dùng g ng th c x lý s ki n (Methods) th hi n giao di n web g © 2009 Khoa CNTT - HKHTN © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control L p trình Thi t k Web – Bài 4: Làm vi c v i Control Các l Cá lo i S Server C t l Controls N id dung HTML Server Controls HTML Server Controls ASP.NET Server Controls ASP.NET Server Controls Validation Controls Validation Controls V lid ti C t l Web User Controls Web User Controls © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control HTML S Server C t l Controls N id dung HTML Server Controls Là nh ng tag HTML runat=“server” c b sung thu c tính ASP.NET Server Controls Validation Controls V lid ti C t l Có th l p trình g n k t x lý s ki n, truy xu t thu c tính c a HTML Server Controls protected void Text1_ServerChange(object sender, EventArgs e) { p ( ); Response.Write(Text1.Value); } © 2009 Khoa CNTT - HKHTN © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control L p trình Thi t k Web – Bài 4: Làm vi c v i Control ASP.NET Server C t l ASP NET S Controls Là nh ng tag Khi s d ng HTML Server control ??? S t l S d ng HTML control khi: c bi t c a riêng ASP.NET Nâng c p t ASP H tr nhi u thu c tính x lý Tồn quy n i u n tag HTML c x lý server v i thu c tính runat = “server” Khơng có ASP.NET server control t Có th dùng th hi n thành ph n ph c t p T ng ng ng thích trình t ID= TextBox1 runat= server > c Render thành Hello 13 © 2009 Khoa CNTT - 14 HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control Simple control Simple control Buttons - HTML tag TextBox - HTML tag TextBox p Thu c tính Text = “Click Me” S d ng Text SingleLine, MultiLine (scrollable), Ho c Password Enabled Enable/Disable TextBox Visible Show/Hide TextBox ReadOnly ImageUrl = “URL” y/ L y TextMode Text = “Link to click” t d li u choTextBox Ng n không cho ng i dùng thay i d li u TextBox Khi c thi t l p True, m i ng i dùng thay i d li u AutoPostBack TextChanged TextBox s kích ho t s ki n post-back v post back server 15 © 2009 Khoa CNTT - HKHTN 16 © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control L p trình Thi t k Web – Bài 4: Làm vi c v i Control Simple control TextBox - HTML tag List Control ListBox, DropDownList, Table Control S d ng ListBox HKHTN 18 L p trình Thi t k Web – Bài 4: Làm vi c v i Control Hi n th danh sách d li u read-only d h h d l s s xu ng n gi n, s d ng c a i Table © 2009 Khoa CNTT - n gi n, s d ng DropDownList 17 Hi n th danh sách d li u read-only scroll Hi n th thơng tin d i d ng dịng c t Table control cho t phép xây d ng b ng ng b ng mã l nh s d ng thu c tính t p h p TableRows TableCells © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control List Controls List Control: Li t C t l HTML t tag Ch C nh s a Thu c tính lúc Thi t k ListBox – DropDownList – id= DropDownList1 runat= server > Table – 19 © 2009 Khoa CNTT - HKHTN 20 © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control L p trình Thi t k Web – Bài 4: Làm vi c v i Control List Control Thêm m c d li u vào th i i m ch y ng d ng List Control L y m c d li u ListBox DropDownList: – S d ng ph ng th c Add danh sách Items c a control – Ví d : c ch n Dùng thu c tính SelectedItem List l y m c d li u c ch n hi n t i p protected void Page_Load(object sender, EventArgs e) g ( j , g ) { protected void btnShow_Click(object sender, EventArgs e) // Test if there is a selected item { if (ListBox1.SelectedItem != null) ! ListBox1.Items.Add(txtSource.Text); DropDownList1.Items.Add(txtSource.Text); // Display the selected item Label1.Text = "The selected item is: " + } ListBox1.SelectedItem.Text; Li tB S l t dIt T t else Label1.Text = "No item is selected.“; } } 21 © 2009 Khoa CNTT - HKHTN 22 L p trình Thi t k Web – Bài 4: Làm vi c v i Control © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control Validation V lid ti controls t l N id dung HTML Server Controls Validation control ki m tra tính úng n c a d li u client nh p vào tr c trang c g i v cho server ASP.NET Server Controls Validation control Validation Controls V lid ti C t l S d ng RequiredFieldValidator CompareValidator 24 Ki m tra tính úng n c a d li u nh p vào control s d ng client-side script ho c a server-side code, ho c c ValidationSummary HKHTN Ki m tra n u m c d li u nh p control th a công th c nh d ng ch nh g g CustomValidator © 2009 Khoa CNTT - Ki m tra n u m c d li u nh p control n m kho ng giá tr RegularExpressionValidator 23 Ki m tra n u m c d li u nh p control gi ng h l i v i control khác ho c so sánh v i m t giá tr c th RangeValidator Web User Controls Ki m tra n u d li u control khác giá tr cho tr c (m c nh r ng) Hi n th t t c l i ki m tra x y trang © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control L p trình Thi t k Web – Bài 4: Làm vi c v i Control S d ng Validation C t l V lid ti Control Ví d t thu c tính ErrorMessage cho Validate co t o t u t o essage c o a date control Các b c: – Kéo th validate control vào Web form – Thi t l p thu c tính cho validate control: • • • ControlToValidate control b n mu n ki m tra ErrorMessage : Thông báo l i Text : Hi n th c a validate control – S d ng ValidationSummary control l i x y trang hi n th t t c M c dù vi c ki m tra x y client, nh ng ch th c hi n có s ki n post-back x y ra! post bac a 25 © 2009 Khoa CNTT - HKHTN 26 L p trình Thi t k Web – Bài 4: Làm vi c v i Control Ví d HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control Ví d S d ng ValidationSummary 27 © 2009 Khoa CNTT - © 2009 Khoa CNTT - HKHTN S d ng ValidationSummary control v i ShowMessage=True 28 © 2009 Khoa CNTT - HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control L p trình Thi t k Web – Bài 4: Làm vi c v i Control Required Fi ld V lid t R i d Field Validator C Compare V lid t Validator Thu c tính Ý ngh a ControlToValidate Control dùng InitialValue Giá tr dùng Thu c tính th c hi n ki m tra Ý ngh a 29 © 2009 Khoa CNTT - HKHTN 30 L p trình Thi t k Web – Bài 4: Làm vi c v i Control Ví d - Ki m t M t kh u Xá nh n m t kh u tra Xác h so sánh Toán t so sánh: Equal, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, NotEqual, ho c DataTypeCheck Giá tr h ng s i Type Control dùng ValueToCompare l M u s : d 34 © 2009 Khoa CNTT - L p trình Thi t k Web – Bài 4: Làm vi c v i Control Regular E R l Expression V lid t i Validator th c hi n ki m tra HKHTN L p trình Thi t k Web – Bài 4: Làm vi c v i Control Regular E R l Expression Validator i V lid t Ký hi u Ý ngh a ^…$ D u hi u b t u k t thúc m t Expression \t Có ch a Ký t Tab \n Có ch a Ký t b t k khác \n