P4. iu khin trnh ch ASP.

NET

Ni dung Gii thiu Cc thuc tnh chung Cc iu khin thng dng Label Literal TextBox Button LinkButton ImageButton

HyperLink DropDownList ListBox CheckBox CheckBoxList RadioButton RadioButtonList Image Table

1. Gii thiu ASP.NET cung cp hai loi iu khin trnh ch l: HTML Server Control v ASP.NET Server Control HTML Server Control l cc th HTML c thuc tnh runat=server. VD: <input id="Button1" type="button" value="button" runat=server /> ASP.NET Server Control l nhng iu khin trnh ch c nhiu thuc tnh v tnh nng mnh m hn HTML Server Control. ASP.NET Server Control t ng pht sinh ra cc tag HTML theo tng loi trnh duyt.

ASP.NET Server control vs HTML control

P4. iu khin trnh ch ASP.NET

Khc bit trong HTML tag Server control: <asp:controlname id="some_id" runat="server"/> HTML control: HTML tag Vd:
<asp:TextBox id="txtText" runat="server /> <INPUT type="text" id="textfield1"> <asp:Button id="btnShow" runat="server" Text="Show /> <INPUT type="button" value="Show">

Server Control & HTML Control

Server Control & HTML Control

1. Gii thiu ASP.NET Server Control c khai bo bt u bng <asp:> v kt thc bng </asp> Vd: <asp:Label ID=Label1 Runat=server Text=Hello World> </asp:Label> ASP.NET Server Control Cng c th khai bo khng cn th ng. <asp:Label ID=Label1 Runat=server Text=Hello World />

P4. iu khin trnh ch ASP.NET

2. Cc thuc tnh (Properties) chung AccessKey Gn mt k t kt hp vi phm Alt truy cp nhanh n iu khin trn ca s trnh duyt. Lu : Trnh s dng cc k t m trnh duyt dng. V d:
<form id="form1" runat="server"> <p> <asp:Label ID="Label1" Runat="server" AccessKey="N" AssociatedControlID="Textbox1">User<u>n</u>ame</asp:Label> <asp:Textbox ID="TextBox1" Runat="server"></asp:Textbox></p> <p> <asp:Label ID="Label2" Runat="server" AccessKey="P" AssociatedControlID="Textbox2"><u>P</u>assword</asp:Label> <asp:Textbox ID="TextBox2" Runat="server"></asp:Textbox></p> <p> <asp:Button ID="Button1" Runat="server" Text="Submit" /> </p> </form>

2. Cc thuc tnh (Properties) chung

Attributes Cho php khai bo thuc tnh, s kin cho iu khin. Ch truy cp thuc tnh ny phn m (C# | VB) Vd: Khai bo thuc tnh color cho iu khin Label v s kin onclick cng vi hm Javascript nh sau:
protectedsubPage_Load(object,e) Me.Label1.Attributes.Add("style","color:Red") Me.Label1.Attributes.Add("onclick","alert(WelcometoASP.NET');") EndSub BackColor: Quy nh mu nn ca iu khin

BorderColor: Mu ng vin ca iu khin

2. Cc thuc tnh (Properties) chung

BorderStyle: Kiu ng vin iu khin BorderWidth: rng ng vin CssClass: Tn lp (CSS) p dng cho iu khin Enabled: Trng thi ca iu khin Visible: n/hin ca iu khin Font: Quy nh font ch hin th cho iu khin FontClolor: Mu ch Width: Chiu rng iu khin Height: Chiu cao ca iu khin TabIndex: Th t tab ca iu khin Tooltip: Xut hin text khi r chut trn iu khin ID: Nhn dng Control (tn object dng vit code)

Click phi chut vo contrl chnh cc thuc tnh

Properties hiu

12

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng - Label Hin th chui ti v tr label trn trang Thuc tnh: Text: Chui hin th c th c thit lp bi thuc tnh Text
<asp:Label id="Label1" Text="Hello World!" runat="server"/>

3. iu khin thng dng - Label Vd: (4.3) Dng Label cung cp cc phm nng
<form id="form1" runat="server"> <asp:Label ID="Label1" Runat="server" AccessKey="N" AssociatedControlID="Textbox1">User<u>n</u>ame</asp:Label> <asp:Textbox ID="TextBox1" Runat="server"> </asp:Textbox> <asp:Label ID="Label2" Runat="server" AccessKey="P" AssociatedControlID="Textbox2"><u>P</u>assword</asp:Label> <asp:Textbox ID="TextBox2" Runat="server"></asp:Textbox> <asp:Button ID="Button1" Runat="server" Text="Submit" /> </form>

Cng c th thit lp chui hin th bi code

Lable1.Text=Hello ASP.NET 2.0;

3. iu khin thng dng - Literal Ging Label nhng hin th chui khng c th <Span> khi tr v trnh duyt. Khng th p dng style VD:
<asp:Literal ID=Literal1 Text=<b>I am a literal control</b> runat=server />

3. iu khin thng dng - TextBox Cho php ngi dng nhp liu v gi ln web server Thuc tnh: TextMode= Password : nhp mt khu MultiLine: nhp nhiu dng, khi quy nh kch thc bi Columns v Rows. MaxLength: Gii hn s k t ti a ReadOnly: Cho/khng cho thay i gi tr trong TextBox Enabled:(=False) V hiu ha iu khin, khng cho thay i gi tr

=> I am a literal control

<asp:Literal ID=Literal1 Mode=Encode Text=<b>I am a literal control</b>" runat=server />

=> <b>I am a literal control</b>

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng - TextBox

S kin: -TextChanged: Xy ra khi ni dung trong iu khin b thay i, s kin c by khi con tr ri iu khin Phng thc - Focus(): t con tr vo iu khin TextBox
protected Sub Page_Load(sender, e) TextBox1.Focus() End Sub

3. iu khin thng dng - TextBox VD: 4_TextBox.aspx

<form id="form1" runat="server"> TextBox chun <br /> <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True/> <asp:Label ID="Label1" runat="server /><br /> TextMode="Password<br /> <asp:TextBox ID="TextBox2" runat="server" TextMode="Password/> <br />TextMode="MultiLine"<br /> <asp:TextBox ID="TextBox3" runat="server" Columns="20" Rows="5" TextMode="MultiLine /><br /> AutoCompleteType="Email"<br /> <asp:TextBox ID="TextBox4" runat="server AutoCompleteType="Email /> <asp:Button ID="Button1" runat="server" Text="Send" /> </form>

-AutoPostBack(): T ng kch hot s kin TextChanged khi ngi dng a con tr ra khi iu khin. -AutoCompleteType(): Lit k cc thng tin nhp trc y ca iu khin chn nhanh.

25Mar10

18

3. iu khin thng dng - TextBox

4_TextBox.aspx.cs
protected Sub Page_Load(sender, e) TextBox1.Focus() End Sub protected Sub TextBox1_TextChanged(sender, e) Label1.Text = "Bn thay i ni dung trong TextBox: " & TextBox1.Text End Sub

3. iu khin thng dng - Button To nt bm gi thng tin t form ln web server Thuc tnh: OnClientClick: Gn hm Javascript thc thi pha Client cho s kin Click. (C dng ng trnh duyt) S kin: Click(): S kin Click thc thi pha Server Vd: (4.5) To nt bm thc thi pha Client v pha Server

25Mar10

20

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng- Button

<head runat="server"> <script language="javascript" type="text/javascript"> function Calculate(){ form1.TextBox3.value=form1.TextBox1.value*form1.TextBox2.value; } </script></head> <body> <form id="form1" runat="server"> Quantity:<asp:TextBox ID="TextBox1" runat="server"/><br /> Price:<asp:TextBox ID="TextBox2" runat="server /><br /> Amount:<asp:TextBox ID="TextBox3" runat="server /><br /> <asp:Button ID="Button1" runat="server" Text="Calculate1" OnClientClick="Calculate(); return false;" /> <asp:Button ID="Button2" runat="server" Text="Calculate2" /> </form> </body>

3. iu khin thng dng - LinkButton Dng gi thng tin ca trang ln server. LinkButton l nt bm dng lin kt. VD:
<%@ Page Language=VB> <script runat="server"> protected Sub LinkButton1_Click(sender, e) Label1.Text = "You clicked the link button" End Sub </script> <body> <h3><font face="Verdana">LinkButton Example</font></h3> <form id="form1" runat="server"> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Click me</asp:LinkButton> <asp:Label ID="Label1" runat="server"></asp:Label> </form></body></html>

protected Sub Button2_Click(sender, e) TextBox3.Text = Cint(TextBox1.Text)*Cint(TextBox2.Text).ToString() End Sub

21

22

3. iu khin thng dng - ImageButton L nt bm dng hnh nh. VD: M to ImageButton

<asp:ImageButton ID=ImageButton1 Runat=server OnClick=ImageButton1_Click ImageUrl=MyButton.jpg />

3. iu khin thng dng - ImageButton VD: Hiu ng MouseOver trn ImageButton

M VB
protected Sub ImageButton1_Click(object sender, System.Web.UI.WebControls.ImageClickEventArgs e) // Code here End Sub

25Mar10

23

25Mar10

24

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng - ImageButton VD: Hiu ng MouseOver trn ImageButton

<%@ Page Language=VB> <script language="javascript" type="text/javascript"> function MouseEvents(me, Path) { me.src = Path; } </script> <html><body> <form id="form1" runat="server"> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/button_1.png" /> <asp:Button ID=btnClose" runat="server" Text=ng OnClientClick="window.close();" /> </form></body></html> 25Mar10

3. iu khin thng dng - ImageButton VD: Hiu ng MouseOver trn ImageButton

ProtectedSubImageButton1_Load(sender,e)_ HandlesImageButton1.Load ImageButton1.Attributes.Add("onmouseover", "MouseEvents(this,'images/button_2.png')") ImageButton1.Attributes.Add("onmouseout", "MouseEvents(this,'images/button_1.png')") EndSub

25

25Mar10

26

Chnh sa thuc tnh lc thit k cho Button

3. Thc hin chuyn trang Mc nh khi click Button, LinkButton, ImageButton n s thc hin cng vic ngay trn trang v trang ca chng ta s Load li mt ln nhng bn c th s dng thuc tnh PostBackUrl chuyn sang mt trang khc.
<asp:Label ID="lblSearch" runat="server" Text="Search:" /> <asp:TextBox ID="txtSearch" runat="server" /> <asp:Button ID="btnSearch" Text="GO!" runat="server" PostBackUrl="ButtonSearchResult.aspx" />
27 28

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng - HyperLink Dng lin kt, dng nh hng trnh duyt n mt trang khc. Thuc tnh: Text: chui hin th ca lin kt NavigateUrl: ging thuc tnh href ca th <a> ImageUrl: Hin th hnh nh thay cho Text Vd: M to HyperLink
<asp:HyperLink ID=HyperLink1 Runat=server Text=Go to Google NavigateUrl=http://goole.com> </asp:HyperLink>
29

3. iu khin thng dng - DropDownList To danh sch, ch cho chn mt phn t Thuc tnh Items: Click vo nt () to cc phn t

M pht sinh nh sau:

<asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Value="TH">Tin hc</asp:ListItem> <asp:ListItem Value="NN">Ngoi Ng</asp:ListItem> <asp:ListItem Value="VH">Vn hc</asp:ListItem> <asp:ListItem Value="PL">Php lut</asp:ListItem> </asp:DropDownList>
30

3. iu khin thng dng- DropDownList (tt)

DataSourceID: Chn ngun d liu cho iu khin (AccessDataSource, SqlDataSource, ObjectDataSource, XmlDataSource, SiteMapDataSource) DataTextField: Tn trng d liu cha vn bn hin th trong danh sch DataValueField: Tn trng d liu cha gi tr s c chn ca cc phn t trong danh sch. AutoPostBack: Mc nh khi chn mt phn t trong danh sch, iu khin khng submit v server. t ng submit khi thay i la chn phn t trong danh sch, ta gn gi tr cho thuc tnh ny bng true SelectedValue: Gi tr ca phn t c chn (*) SelectedIndex: Ch s ca phn t c chn (*) SelectedItem: Phn t c chn (*) (*): S dng trong m lp trnh
31

3. iu khin thng dng- DropDownList (tt) S kin: SelectedIndexChanged: S kin xy ra khi thay i mc chn trong danh sch. (Lu : thuc tnh AutoPostBack phi gn bng True) VD: (4.8)
protected Sub DropDownList1_SelectedIndexChanged(sender,e) Label1.Text = "M Ch chn: " & DropDownList1.SelectedValue.ToString() End Sub

32

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng - ListBox

To danh sch, cho php chn nhiu phn t Thuc tnh: Items, DataSourceID, DataTextField, DataValueField, SelectedIndex, SelectedValue, SelectedItem, AutoPostBack: ging DropDownList SelectionMode: Single: Ch chn c mt phn t Multiple: Cho php chn cng lc nhiu phn t Rows: S dng hin th ca danh sch S kin: SelectedIndexChanged: Xy ra khi thay i vic chn la trn iu khin (dng kt hp AutoPostBack=true)
25Mar10 33

3. Thm d liu vo ListBox v DropDownList lc chy chng trnh (Code)

ListBox v DropDownList: S dng phng thc Add vo danh sch Items ca control - Vd: protected Sub btnShow_Click(object sender, EventArgs e) ListBox1.Items.Add(txtSource.Text) DropDownList1.Items.Add(txtSource.Text) End Sub

25Mar10

34

3. Dng thuc tnh SelectedItem ly mc d liu c chn hin ti trong List

3. iu khin thng dng - CheckBox

To check box n trn form, nhn gi tr true hoc false Thuc tnh: Checked: Xc nh check box c c chn khng
if (CheckBox1.Checked = true) then Label1.Text = "Check1 is checked!" else Label1.Text = "Check1 is not checked! End if

protected Sub Page_Load(sender, e) Test if there is a selected item. if (ListBox1.SelectedItem =null) then Display the selected item. Label1.Text = "The selected item is: " & ListBox1.SelectedItem.Text else Label1.Text = "No item is selected. End If End Sub
25Mar10 35

AutoPostBack: T ng submit v server S kin: CheckedChanged: Xy ra khi thay i gi tr Checked ca check box (dng kt hp vi AutoPostBack=true)

36

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng - CheckBoxList

To danh sch cc check box trn form, cho php nh du chn nhiu phn t. Thuc tnh: Thu t Items, DataSourceID, DataTextField, DataValueField, SelectedIndex, SelectedValue, SelectedItem, AutoPostBack: ging DropDownList RepeateColums: S ct trnh by cc CheckBox RepeateDirection: Hng trnh by CheckBox Horizontal: Chiu ngang Vertical: Chiu ng S kin: SelectedIndexChanged: Xy ra khi thay i vic nh du chn trn iu khin (dng kt hp AutoPostBack=true)
25Mar10 37

3. iu khin thng dng- RadioButton

To nt chn hnh trn, thng c ti thiu 2 nt, ch chn mt.
Thuc tnh: Checked: Xc nh RadioButton c c chn khng AutoPostBack: T ng submit v server GroupName: Tn nhm cc RadioButton thuc v S kin: CheckedChanged: Xy ra khi thay i gi tr Checked ca RadioButton (dng kt hp vi AutoPostBack=true)
VD: (4.12)
protected Sub RadioButton_CheckedChanged(object sender, EventArgs e)

if (RadioButton1.Checked) then Label1.Text = "Bn chn :" & RadioButton1.Text else Label1.Text = "Bn chn :" & RadioButton2.Text end if End Sub
38

3. iu khin thng dng - RadioButtonList

To danh sch cc RadioButton, ch cho php nh du chn mt phn t. Thuc tnh: Thu t Items, DataSourceID, DataTextField, DataValueField, SelectedIndex, SelectedValue, SelectedItem, AutoPostBack: ging DropDownList RepeateColums: S ct trnh by cc RadioButton RepeateDirection: Hng trnh by RadioButton Horizontal: Chiu ngang Vertical: Chiu ng S kin: ki SelectedIndexChanged: Xy ra khi thay i vic nh du chn trn iu khin (dng kt hp AutoPostBack=true)
25Mar10 39

3. iu khin thng dng - Image Hin th hnh nh trn trang web Thuc tnh: Thu tnh ImageUrl: ng dn ca file hnh ImageAlign: cn chnh hnh nh
<asp:Image ID="Image1" Runat="server" ImageUrl="~/MyImage1.gif" /> <br /> <asp:Button ID="Button1" Runat="server" Text="Change Image" OnClick="Button1_Click" />

protected Sub Button1_Click(sender, e) Image1.ImageUrl = ~/MyImage2.gif End Sub

25Mar10

40

P4. iu khin trnh ch ASP.NET

3. iu khin thng dng - Table

To bng trn trang web
<asp:Table ID=Table1 Runat=server> <asp:TableRow> <asp:TableCell>Bill</asp:TableCell> <asp:TableCell>Evjen</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>Devin</asp:TableCell> <asp:TableCell>Rader</asp:TableCell> </asp:TableRow> </asp:Table>

Thuc tnh: Rows: To dng trong bng Cells: To trong dng