Asp.net003

P4. Điều khiển trình chủ ASP.NET
Nội dung
Label
Literal
TextBox
Button
LinkButton
ImageButton
HyperLink
DropDownList
ListBox
CheckBox
CheckBoxList
RadioButton
RadioButtonList
Image
Table
Giới thiệu
Các thuộc tính chung
Các điều khiển thông dụng
1. Giới thiệu
ASP.NET cung cấp hai loại điều khiển trình chủ là:
HTML Server Control và ASP.NET Server Control
HTML Server Control là các thẻ HTML có thuộc tính
runat=“server”. VD:
<input id="Button1" type="button"
value="button" runat=“server” />
ASP.NET Server Control là những điều khiển trình
chủ có nhiều thuộc tính và tính năng mạnh mẽ hơn
HTML Server Control.
ASP.NET Server Control tự động phát sinh ra các tag
HTML theo từng loại trình duyệt.
ASP.NET Server control vs HTML control

Khác biệt trong HTML tag
Server control:
<asp:controlname id="some_id" runat="server"/>
HTML control:
HTML tag
Vídụ:
<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. Giới thiệu
ASP.NET Server Control có khai báo bắt đầu bằng
<asp:> và kết thúc bằng </asp>
Vd:
<asp:Label ID=”Label1” Runat=”server”
Text=”Hello World”> </asp:Label>
ASP.NET Server Control Cũng có thể khai báo không
cần thẻ đóng.
<asp:Label ID=”Label1” Runat=”server”
Text=”Hello World” />

2. Các thuộc tính (Properties) chung
AccessKey
Gán một ký tự kết hợp với phím Alt để truy cập nhanh
đến điều khiển trên cửa sổ trình duyệt.
Lưu ý: Tránh sử dụng các ký tự mà trình duyệt đã
dùng.
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>
Attributes
Cho phép khai báo thuộc tính, sự kiện cho điều khiển.
Chỉ truy cập thuộc tính này ở phần mã (C# | VB)
Vd: Khai báo thuộc tính color cho điều khiển Label và sự
kiện onclick cùng với hàm Javascript như sau:
BackColor: Quy định màu nền của điều khiển
BorderColor: Màu đường viền của điều khiển
protected sub Page_Load(object, e)
Me.Label1.Attributes.Add("style", "color:Red")
Me.Label1.Attributes.Add("onclick", "alert(‘Welcome to ASP.NET');")
End Sub
BorderStyle: Kiểu đường viền điều khiển
BorderWidth: Độ rộng đường viền
CssClass: Tên lớp (CSS) áp dụng cho điều khiển
Enabled: Trạng thái của điều khiển
Visible: Ẩn/hiện của điều khiển
Font: Quy định font chữ hiển thị cho điều khiển
FontClolor: Màu chữ
Width: Chiều rộng điều khiển
Height: Chiều cao của điều khiển
TabIndex: Thứ tự tab của điều khiển
Tooltip: Xuất hiện text khi rà chuột trên điều khiển
ID: Nhận dạng Control (tên object dùng viết code)
12
Click phải chuột vào contrl Properties hiệu
chỉnh các thuộc tính

3. Điều khiển thông dụng - Label
Hiển thị chuỗi tại vị trí label trên trang
Thuộc tính:
Text: Chuỗi hiển thị có thể được thiết lập bởi thuộc
tính Text
Cũng có thể thiết lập chuỗi hiển thị bởi code
<asp:Label id="Label1" Text="Hello World!"
runat="server"/>
Lable1.Text=“Hello ASP.NET 2.0”;
Vd: (4.3) Dùng Label để cung cấp các phím nóng
<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>
3. Điều khiển thông dụng - Label
Giống Label nhưng hiển thị chuỗi không có thẻ
<Span> khi trả về trình duyệt. Không thể áp dụng
style
VD:
=> I am a literal control
=> <b>I am a literal control</b>
<asp:Literal ID=Literal1 Text=“<b>I am a
literal control</b>” runat=server />
<asp:Literal ID=Literal1 Mode=“Encode”
Text=“<b>I am a literal control</b>"
runat=server />
3. Điều khiển thông dụng - Literal 3. Điều khiển thông dụng - TextBox
Cho phép người dùng nhập liệu và gửi lên web server
Thuộc tính:
TextMode=
“Password” : nhập mật khẩu
“MultiLine”: nhập nhiều dòng, khi đó quy định kích thước
bởi Columns và Rows.
MaxLength: Giới hạn số ký tự tối đa
ReadOnly: Cho/không cho thay đổi giá trị trong TextBox
Enabled:(=False) Vô hiệu hóa điều khiển, không cho thay đổi
giá trị

3. Điều khiển thông dụng - TextBox
Sự kiện:
-TextChanged: Xảy ra khi nội dung trong điều khiển bị thay
đổi, sự kiện được bẫy khi con trỏ rời điều khiển
Phương thức
- Focus(): Đặt con trỏ vào điều khiển TextBox
-AutoPostBack(): Tự động kích hoạt sự kiện TextChanged khi
người dùng đưa con trỏ ra khỏi điều khiển.
-AutoCompleteType(): Liệt kê các thông tin đã nhập trước đây
của điều khiển để chọn nhanh.
protected Sub Page_Load(sender, e)
TextBox1.Focus()
End Sub
VD: 4_TextBox.aspx
TextBox chuẩn <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>
25‐Mar‐10
18
TextBox1.Focus()
End Sub
protected Sub TextBox1_TextChanged(sender, e)
Label1.Text = "Bạn đã thay đổi nội dung trong TextBox:
" & TextBox1.Text
End Sub
4_TextBox.aspx.cs
3. Điều khiển thông dụng - Button
Tạo nút bấm để gửi thông tin từ form lên web server
Thuộc tính:
OnClientClick: Gán hàm Javascript để thực thi phía
Client cho sự kiện Click. (Có dùng để đóng trình
duyệt)
Sự kiện:
Click(): Sự kiện Click thực thi phía Server
Vd: (4.5) Tạo nút bấm thực thi phía Client và phía
Server
25‐Mar‐10
20

3. Điều khiển thông dụng- Button
<head runat="server">
<script language="javascript" type="text/javascript">
function Calculate(){
form1.TextBox3.value=form1.TextBox1.value*form1.TextBox2.value; }
</script></head>
<body>
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>
protected Sub Button2_Click(sender, e)
TextBox3.Text =
Cint(TextBox1.Text)*Cint(TextBox2.Text).ToString()
End Sub
21
3. Điều khiển thông dụng - LinkButton
Dùng để gửi thông tin của trang lên server.
LinkButton là nút bấm dạng liên kết.
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>
<asp:LinkButton ID="LinkButton1" runat="server"
OnClick="LinkButton1_Click">Click me</asp:LinkButton>
<asp:Label ID="Label1" runat="server"></asp:Label>
</form></body></html>
22
3. Điều khiển thông dụng - ImageButton
Là nút bấm dạng hình ảnh.
VD: Mã tạo ImageButton
Mã VB
<asp:ImageButton ID=”ImageButton1” Runat=”server”
OnClick=”ImageButton1_Click” ImageUrl=”MyButton.jpg”
/>
protected Sub ImageButton1_Click(object sender,
System.Web.UI.WebControls.ImageClickEventArgs e)
// Code here
End Sub
25‐Mar‐10
23
VD: Hiệu ứng MouseOver trên ImageButton
25‐Mar‐10
24

25‐Mar‐10
25
<%@ Page Language=“VB”>
<script language="javascript" type="text/javascript">
function MouseEvents(me, Path)
{
me.src = Path;
}
</script>
<html><body>
<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>
25‐Mar‐10
26
Protected Sub ImageButton1_Load(sender, e) _
Handles ImageButton1.Load
ImageButton1.Attributes.Add("onmouseover",
"MouseEvents(this,'images/button_2.png')")
ImageButton1.Attributes.Add("onmouseout",
"MouseEvents(this,'images/button_1.png')")
End Sub
27
Chỉnh sửa thuộc tính lúc thiết kế cho Button 3. Thực hiện chuyển trang
Mặc định khi click Button, LinkButton, ImageButton nó
sẽ thực hiện công việc ngay trên trang và trang của
chúng ta sẽ Load lại một lần nhưng bạn có thể sử dụng
thuộc tính PostBackUrl để chuyển sang một trang khác.
<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" />
28

3. Điều khiển thông dụng - HyperLink
Dạng liên kết, dùng định hướng trình duyệt đến một
trang khác.
Thuộc tính:
Text: chuỗi hiển thị của liên kết
NavigateUrl: giống thuộc tính href của thẻ <a>
ImageUrl: Hiển thị hình ảnh thay cho Text
Vd: Mã tạo HyperLink
<asp:HyperLink ID=”HyperLink1” Runat=”server”
Text=”Go to Google”
NavigateUrl=”http://goole.com”>
</asp:HyperLink>
29
3. Điều khiển thông dụng - DropDownList
Tạo danh sách, chỉ cho chọn một phần tử
Thuộc tính
Items: Click vào nút (…) để tạo các phần tử
Mã phát sinh như sau:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="TH">Tin học</asp:ListItem>
<asp:ListItem Value="NN">Ngoại Ngữ</asp:ListItem>
<asp:ListItem Value="VH">Văn học</asp:ListItem>
<asp:ListItem Value="PL">Pháp luật</asp:ListItem>
</asp:DropDownList>
30
3. Điều khiển thông dụng- DropDownList (tt)
DataSourceID: Chọn nguồn dữ liệu cho điều khiển
(AccessDataSource, SqlDataSource, ObjectDataSource,
XmlDataSource, SiteMapDataSource)
DataTextField: Tên trường dữ liệu chứa văn bản hiển thị
trong danh sách
DataValueField: Tên trường dữ liệu chứa giá trị sẽ được
chọn của các phần tử trong danh sách.
AutoPostBack: Mặc định khi chọn một phần tử trong danh
sách, điều khiển không submit về server. Để tự động submit
khi thay đổi lựa chọn phần tử trong danh sách, ta gán giá trị
cho thuộc tính này bằng true
SelectedValue: Giá trị của phần tử được chọn (*)
SelectedIndex: Chỉ số của phần tử được chọn (*)
SelectedItem: Phần tử được chọn (*)
(*): Sử dụng trong mã lập trình
31
3. Điều khiển thông dụng- DropDownList (tt)
Sự kiện:
SelectedIndexChanged: Sự kiện xãy ra khi thay đổi
mục chọn trong danh sách. (Lưu ý: thuộc tính
AutoPostBack phải gán bằng True)
VD: (4.8)
protected Sub DropDownList1_SelectedIndexChanged(sender,e)
Label1.Text = "Mã Chủ đề đã chọn: " &
DropDownList1.SelectedValue.ToString()
End Sub
32

3. Điều khiển thông dụng - ListBox
Tạo danh sách, cho phép chọn nhiều phần tử
Thuộc tính:
Items, DataSourceID, DataTextField, DataValueField,
SelectedIndex, SelectedValue, SelectedItem,
AutoPostBack: giống DropDownList
SelectionMode:
Single: Chỉ chọn được một phần tử
Multiple: Cho phép chọn cùng lúc nhiều phần tử
Rows: Số dòng hiển thị của danh sách
Sự kiện:
SelectedIndexChanged: Xãy ra khi thay đổi việc chọn lựa
trên điều khiển (dùng kết hợp AutoPostBack=true)
25‐Mar‐10
33
3. Thêm dữ liệu vào ListBox và DropDownList
lúc chạy chương trình (Code)
ListBox và DropDownList:
–Sử dụng phương thức Add vào danh sách Items của control
- Vídụ:
protected Sub btnShow_Click(object sender, EventArgs e)
ListBox1.Items.Add(txtSource.Text)
DropDownList1.Items.Add(txtSource.Text)
End Sub
25‐Mar‐10
34
3. Dùng thuộc tính SelectedItem để lấy mục dữ liệu được
chọn hiện tại trong List
’ 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
25‐Mar‐10
35
3. Điều khiển thông dụng - CheckBox
Tạo check box đơn trên form, nhận giá trị true hoặc false
Thuộc tính:
Checked: Xác định check box có được chọn không
AutoPostBack: Tự động submit về server
Sự kiện:
CheckedChanged: Xãy ra khi thay đổi giá trị Checked của
check box (dùng kết hợp với AutoPostBack=true)
if (CheckBox1.Checked = true) then
Label1.Text = "Check1 is checked!"
else
Label1.Text = "Check1 is not checked!“
End if
36

3. Điều khiển thông dụng - CheckBoxList
Tạo danh sách các check box trên form, cho phép đánh dấu
chọn nhiều phần tử.
ThuThuộộc tc tíính:nh:
SelectedIndex, SelectedValue, SelectedItem, AutoPostBack:
giống DropDownList
RepeateColums: Số cột trình bày các CheckBox
RepeateDirection: Hướng trình bày CheckBox
Horizontal: Chiều ngang
Vertical: Chiều đứng
Sự kiện:
SelectedIndexChanged: Xãy ra khi thay đổi việc đánh dấu
chọn trên điều khiển (dùng kết hợp AutoPostBack=true)
25‐Mar‐10
37
3. Điều khiển thông dụng- RadioButton
Tạo nút chọn hình tròn, thường có tối thiểu 2 nút, chỉ chọn một.
Thuộc tính:
Checked: Xác định RadioButton có được chọn không
AutoPostBack: Tự động submit về server
GroupName: Tên nhóm các RadioButton thuộc về
Sự kiện:
CheckedChanged: Xãy ra khi thay đổi giá trị Checked của
RadioButton (dùng kết hợp với AutoPostBack=true)
VD: (4.12)
protected Sub RadioButton_CheckedChanged(object sender, EventArgs e)
if (RadioButton1.Checked) then
Label1.Text = "Bạn đã chọn :" & RadioButton1.Text
else
Label1.Text = "Bạn đã chọn :" & RadioButton2.Text
end if
End Sub
38
3. Điều khiển thông dụng - RadioButtonList
Tạo danh sách các RadioButton, chỉ cho phép đánh dấu
chọn một phần tử.
ThuThuộộc tc tíính:nh:
SelectedIndex, SelectedValue, SelectedItem,
AutoPostBack: giống DropDownList
RepeateColums: Số cột trình bày các RadioButton
RepeateDirection: Hướng trình bày RadioButton
Horizontal: Chiều ngang
Vertical: Chiều đứng
SSựự kikiệện:n:
SelectedIndexChanged: Xãy ra khi thay đổi việc đánh
dấu chọn trên điều khiển (dùng kết hợp
AutoPostBack=true)
25‐Mar‐10
39
3. Điều khiển thông dụng - Image
Hiển thị hình ảnh trên trang web
ThuThuộộc tc tíínhnh:
ImageUrl: Đường dẫn của file hình
ImageAlign: căn chỉnh hình ả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
25‐Mar‐10
40

3. Điều khiển thông dụng - Table
Tạo bảng trên trang web
Thuộc tính:
Rows: Tạo dòng trong bảng
Cells: Tạo ô trong dòng
<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>

Asp.net003

Recommended

Recommended

More Related Content

Similar to Asp.net003

Similar to Asp.net003 (20)

Recently uploaded

Recently uploaded (20)

Asp.net003