Bài 4: Thiết kê và lập trình web với ASP.NET - Làm việc với Control

if ListBox1.SelectedItem != null // Display the selected item.

Trang 1

L p trình và Thi t k Web 2

Bài 4

Làm

Làm vi c vi c v i v i Control Control

Làm

Làm vi c vi c v i v i Control Control

Ths Tr n Th Bích H nh

Khoa CNTT Khoa CNTT – – H.KHTN

N i d

N i dung

 Validation Controls

2

L p trình và Thi t k Web 2 – Bài 4: Làm vi c v i Control

Server Controls

 Là nh ng control mà Web server (IIS) có th “hi u Là nh ng control mà Web server (IIS) có th hi u đ c” đ c

T á th tí h (P ti )

– T p các thu c tính (Properties)

– Các s ki n (Events)

– Các ph ng th c x lý s ki n (Methods)

 Dùng g đ th hi n giao di n web g

Ví

Ví d d Ví

Ví d d

Trang 2

Cá l l i i S S C C t l t l

Các

Các lo i lo i Server Controls Server Controls

5

N i d

N i dung

6

HTML Server Controls

runat=“server”

 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

<input type="text" id="Text1"

runat="server"

runat server

onserverchange="Text1_ServerChange" />

protected void Text1_ServerChange(object sender, EventArgs e)

{

Response.Write(p (Text1.Value););

}

N i d

N i dung

Trang 3

ASP NET S C t l

ASP.NET Server Controls

 T T ng thích trình duy t ng thích trình duy t

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<i t "T tB 1" t "t t" id "T tB 1" />

c Render thành

<input name="TextBox1" type="text" id="TextBox1" />

9

Khi Khi à à d HTML S HTML S t l ??? t l ???

Khi Khi nào nào s s d ng d ng HTML Server control ??? HTML Server control ???

 Nâng c p t Nâng c p t ASP ASP

 Toàn quy n đi u khi n trên tag HTML

 Không có ASP.NET server control t ng ng

10

ASP NET Server Controls & HTML Controls

Hi n th Text Label Literal TextBox Label, Text Field, Text Area,

Hi n th Text Label, Literal, TextBox

Password Field

List DropDownList, ListBox, DataList,

Th c hi n l nh Button LinkButton ImageButton Button, Reset Button, Submit

Th c hi n l nh Button, LinkButton, ImageButton

Button

t giá tr CheckBox, CheckBoxList,

RadioButton, RadioButtonList, Checkbox, Radio Button

ASP NET Server Controls & HTML Controls

Trang 4

Simple control

Label, Literal

Label, Literal HTML tag HTML tag

 Label

<asp:Label id="labMsg" runat="server" text="hello"/>

c render thành

<span id="labMsg">hello</span>

 Literal

<asp:Literal id="litMsg" runat="server" text="hello"/>

c render thành

Hello

13

Simple control

Buttons Buttons HTML tag HTML tag

 Button

– <asp:Button id="Button1" runat="server" Text="Button">

</asp:Button>

 LinkButton

– <asp:LinkButton id="LinkButton1" runat="server">

</asp:LinkButton>

 ImageButton

<asp:ImageButton id "I B tt 1“ t " ">

– <asp:ImageButton id="ImageButton1“ runat="server">

</asp:ImageButton>

14

Simple control

Buttons

Buttons HTML tag HTML tag

Text = “Click Me”

Text = “Link to click”

ImageUrl = “URL”

Simple control

TextBox TextBox HTML tag HTML tag

 TextBox

 <asp:TextBox id="TextBox1" runat="server">

</asp:TextBox>

Text L y/ t d li u choTextBox

p

y TextMode SingleLine, MultiLine (scrollable), Ho c Password

Enabled Enable/Disable TextBox Enabled Enable/Disable TextBox Visible Show/Hide TextBox ReadOnly Ng n không cho ng i dùng thay đ i d li u trong TextBox AutoPostBack

Khi đ c thi t l p là True, m i khi ng i dùng thay đ i d li u TextChanged trong TextBox s kích ho t s ki n post-back v AutoPostBack TextChanged trong TextBox s kích ho t s ki n post back v

server

Trang 5

Simple control

TextBox

TextBox HTML tag HTML tag

17

List Control

ListBox, DropDownList, Table

ListBox Hi n th danh sách d li u read-only đ n gi n, s d ng

scroll

Hi th d h á h d li d l đ i d DropDownList Hi n th danh sách d li u read-only đ n gi n, s d ng c a

s s xu ng

Hi n th thông tin d i d ng dòng và c t Table control cho Table

Hi n th thông tin d i d ng dòng và c t Table control cho phép xây d ng các b ngđ ng b ng mã l nh s d ng các thu c tính t p h p TableRows và TableCells

18

Li t C t l HTML t

List Control: HTML tag

 ListBox

<asp:ListBox id="ListBox1" runat="server"></asp:ListBox>

– <asp:ListBox id="ListBox1" runat="server"></asp:ListBox>

 DropDownList

– <asp:DropDownList id="DropDownList1" runat="server">

– <asp:DropDownList id= DropDownList1 runat= server >

</asp:DropDownList>

 Table

– <asp:Table id="Table1" runat="server" Width="100px"

Height="70px"> </asp:Table>

List Controls

C

Ch nh s a Thu c tính lúc Thi t k

Trang 6

List Control

Thêm các m c d li u vào th i đi m ch y ng d ng

 ListBox và DropDownList:

–S d ng ph ng th cAddvà danh sáchItemsc a control

–Ví d :

protected void btnShow_Click(object sender, EventArgs e)

{

ListBox1.Items.Add(txtSource.Text) ;

DropDownList1.Items.Add(txtSource.Text);

}

21

List Control

L y m c d li u đ c ch n

 Dùng thu c tính SelectedItemđ l y m c d li u đ c ch n hi n t 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: " +

Li tB 1 S l t dIt T t ListBox1.SelectedItem.Text ; else

Label1.Text = "No item is selected.“;

} }

22

N i d

N i dung

Validation controls

 Validation control ki m tra tínhđúng đ n c a d li u do client

nh p vào tr c khi trangđ c g i v cho server

RequiredFieldValidator Ki m tra n u d li u trong control khác giá tr cho

tr c (m cđ nh là r ng)

CompareValidator Ki m tra n u m c d li u nh p trong control gi ng

v i control khác ho c so sánh v i m t giá tr c th RangeValidator Ki m tra n u m c d li u nh p trong control n m RangeValidator

trong kho ng 2 giá tr RegularExpressionValidator Ki m tra n u m c d li u nh p trong control th a 1 công th c đ nh d ng ch đ nhg g

CustomValidator

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 2

ho c c 2 ValidationSummary Hi n th t t c các l i ki m tra x y ra trong trang

Trang 7

S d V lid ti C t l

S d ng Validation Control

– Kéo th 1 validate control vào Web form

– Thi t l p các thu c tính cho validate control:

• ControlToValidate là 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 đ hi n th t t c

các l i x y ra trong trang

M c dù vi c ki m tra x y ra client, nh ng nó ch th c hi n khi có 1 s

ki n post-back x y ra!

post bac y a

25

Ví d

 t thu c tính t t u c t ErrorMessage o essage cho Validate control c o a date co t o

26

Ví d

 S d ng ValidationSummary

Ví d

 S d ng ValidationSummary control v i

ShowMessage=True

Trang 8

R i d Fi ld

R i d Fi ld V lid t V lid t

Required Field

Required Field Validator Validator

ControlToValidate Control dùngđ th c hi n ki m tra

InitialValue Giá tr dùngđ so sánh M c đ nh là r ng

M u s : <asp:TextBox ID="txtMauSo" runat="server“></asp:TextBox>

M u s : <asp:TextBox ID txtMauSo runat server ></asp:TextBox>

<asp:RequiredFieldValidator ID= "reqMauSo" runat="server"

ControlToValidate="txtMauSo"

InitialValue="0"

Text="Passwords must match" />

29

Compare Compare Validator Validator

ControlToValidate Control dùngđ th c hi n ki m tra ControlToCompare Control dùngđ so sánh

Operator Toán t so sánh: Equal, GreaterThan, GreaterThanEqual,

LessThan, LessThanEqual, NotEqual, ho c DataTypeCheck

ValueToCompare Giá tr h ng s đ so sánh ControlToValidate v i Operator Type Ki m tra ki u d li u c a ControlToValidate: String, Integer,

Double, Date, Currency, , y

30

Ví

Ví d d Ki tt M t M t kh kh à à Xá Xá h tt kh kh

Ví

Ví d d Ki m Ki m tra tra M t M t kh u kh u và và Xác Xác nh n nh n m t m t kh u kh u

Enter Password: <asp:TextBox ID="txtPass1" runat="server"

TextMode="password"></asp:TextBox></br> p / p /

Reenter Password: <asp:TextBox ID="txtPass2" runat="server"

TextMode="password"></asp:TextBox>

<asp:CompareValidator ID="compPass" runat="server"

ControlToValidate="txtPass2"

Operator="Equal" p q

ControlToCompare="txtPass1"

Text="Passwords must match" />

Ví

Ví d d Ki m Ki m tra tra d d li u li u là là s s nh nh h n h n ho c ho c b ng b ng 18 18

Age: <asp:TextBox ID="txtAge" runat="server"></asp:TextBox> ge asp e t o t t ge u at se e /asp e t o

<asp:CompareValidator ID="compAge" runat="server"

ControlToValidate="txtAge"

ValueToCompare="18"

O t "L Th E l“

Operator="LessThanEqual“

Type="Integer"

Text="You are too old to view this site" />

Trang 9

Ví d d Ki tt d lili là là ki ki à à thá thá

Ví

Ví d d Ki m Ki m tra tra d d li u li u là là ki u ki u ngày ngày tháng tháng

Sales Date: <asp:TextBox ID="txtDate"

runat="server"></asp:TextBox>

<asp:CompareValidator ID="compDate" runat="server"

ControlToValidate="txtDate"

Operator="DataTypeCheck"

Type="Date"

Text="Enter a valid date" />

33

Range Range Validator Validator

ControlToValidate Control dùngđ th c hi n ki m tra MinimumValue Giá tr c n d i

MaximumValue Giá tr c n trên

E t b b t 1 d 20 <b />

Type Ki m tra ki u d li u c a ControlToValidate: String, Integer,

Double, Date, Currency

Enter a number between 1 and 20:<br />

<asp:TextBox ID="txtNumber" runat="server"></asp:TextBox>

<asp:RangeValidator ID="rangeNum" runat="server"

ControlToValidate="txtNumber"

MinimumValue="1"

MaximumValue="20"

Type="Integer"

T t "Pl t b b t 1 d 20" />

34

Text="Please enter number between 1 and 20" />

Regular Expression

Regular Expression Validator Validator

Email <asp:TextBox ID=“txtEmail" runat="server"></asp:TextBox> a asp e t o t t a u at se e /asp e t o

<asp:RegularExpressionValidator ID=“valEmail" runat="server“

ControlToValidate=“txtEmail”

V lid ti E i "\ +([ + ']\ +)*@\ +([ ]\ +)*\ \ +([ ]\ +)*“

ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*“

ErrorMessage=“Enter a valid Email“

/>

Regular Expression Regular Expression Validator Validator

^ … $ D u hi u b tđ u và k t thúc m t Expression

\n Có ch a Ký t xu ng dòng

Có ch a Ký t b t k khác \n Có ch a Ký t b t k khác \n [qwerty] Có ch a Ký t b t k trong ngo c vuông

[^qwerty] Không ch a ký t nào trong ngo c vuông [a-z] Có ch a ký t trong kho ng t a đ n z

\w Có ch a m t t b t k (word) T ng t [a-zA-Z0-0]

\W Có ch a m t chu i b t k không ph i là m t t (nonword)

Trang 10

R l E i

Regular Expression

Regular Expression Validator Validator

\s Có ch a ký t kho ng tr ng

\S Không ch a ký t kho ng tr ng

{n} Ch đ nh có đúng chính xác n l n

{n,} Ch đ nh có nhi u h n n l n

37

{n,m} Ch đ nh có t n đ n m l n

CustomValidator

 T vi t mã l nh ki m tra ch y trên server ho c client

 Trên Server – t mã l nh ki m tra trong hàm x lý s ki n ServerValidate

Ch đ nh đo n script ki m tra cho thu c tính

– Ch đ nh đo n script ki m tra cho thu c tính

ClientValidationFunction c a CustomValidator

38

Ví d : T Ki m tra trên Server

protected void MyValidate(object source,

ServerValidateEventArgs args) {

args IsValid = false;

args.IsValid = false;

if (TextBox1.Text == "abc") args.IsValid = true;

}

Ví d : T ki m tra trên Client

< script p language g g ="javascript"> j p

function ClientValidate(e, args) {

args.IsValid = false;

if (args.Value == "abc")

args.IsValid = true;

}

</ script >

Trang 11

N i d

N i dung

41

Web User Controls

control

 File user-control có ph n m r ng là ( *.ascx )

42

T o Web User Control

T o Web User Control (tt)

Trang 12

T Th tí h h W b U C t l

T o Thu c tính cho Web User Control

public string Username {

get {

return txtUsername.Text;

}

set {

txtUsername.Text = value;

}

45

S d ng Web User Control

46

T ng

T ng k t k t

Định dạng
Số trang	12
Dung lượng	778,24 KB