Tài liệu LÀM VIỆC VỚI CONTROL docx

Bài giảng môn học
Thi
Thi
ế
ế
t
t
k
k
ế
ế
&
&
L
L
ậ
ậ
p
p
tr
tr
ì
ì
nh
nh
WEB 2
WEB 2
L
L
À
À

M VI
M VI
Ệ
Ệ
C V
C V
Ớ
Ớ
I CONTROL
I CONTROL
Khoa Công nghệ thông tin
Trường ĐạihọcKhoahọcTự nhiên
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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 <form> vớithuộc tính run at = “server”
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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.
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
ASP.NET Server control vs HTML control
Tính năng ASP.NET Server control HTML control
Server event
Kích hoạt đượcmộtsố sự kiệncụ thể
trên Server
Chỉ có thể kích hoạtcácsự
kiệnmức trang trên server
(post-back)
Quảnlýtrạng
thái
Dữ liệunhập vào control đượclưugiữ
lạisaumỗi request
Dữ liệu không đượclưugiữ lại,
phảitự lưuvàđiềnvàosử

dụng script
Tương thích
Tự động nhậndiệnloại trình duyệtvà
tạohiểnthị cho phù hợp
Không tự động nhậndiệntrình
duyệt
Các thuộc
tính
.NET Framework cung cấpmộttập
các thuộctínhchomỗi control, cho
phép thay đổiphầnhiểnthị và hành vi
thông qua mã lệnh
Chỉ có các thuộctínhchuẩn
củaHTML
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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"></asp:TextBox>

– <INPUT type="text" id="textfield1">
– <asp:Button id="btnShow" runat="server"
Text="Show"></asp:Button>
– <INPUT type="button" value="Show">
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
Server Control & HTML Control
Server control HTML control
Hiểnthị
Text
Label, TextBox, Literal
Label, Text Field, Text Area,
Password Field
Hiểnthị
Table
Table, DataGrid Table
List
DropDownList, ListBox, DataList,
Repeater
List Box, Dropdown
Thựchiện
lệnh
Button, LinkButton, ImageButton
Button, Reset Button, Submit
Button
Đặtgiá trị
CheckBox, CheckBoxList, RadioButton,
RadioButtonList
Checkbox, Radio Button
Hiểnthị

Image
Image, ImageButton Image
Liên kết Hyperlink Anchor <a>
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
Server Control & HTML Control
Group control Panel, Placeholder
Flow Layout,
Grid Layout
Ngàytháng Calendar none
Quảng cáo AdRotator none
Đường kẻ
none Horizontal Rule
Lấy tên file từ
client
none File Field
Lưudữ liệutrên
trang
(sử dụng quảnlýtrạng thái) Input Hidden
Kiểmtratính
đúng đắncủa
dữ liệunhập
RequiredFieldValidator, CompareValidator,
RangeValidator, RegularExpressionValidator,
CustomValidator,ValidationSummary
none (sử dụng
client script)
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
Simple control
Label, Buttons, TextBox - HTML tag
 Label
– <asp:Label id="Label1" runat="server">Please input
text</asp:Label>
 Buttons (Button, LinkButton, ImageButton)
– <asp:Button id="Button1" runat="server"
Text="Button"></asp:Button>
– <asp:LinkButton id="LinkButton1"
runat="server">LinkButton</asp:LinkButton>
– <asp:ImageButton id="ImageButton1"
runat="server"></asp:ImageButton>
 TextBox
– <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
Simple control
Chỉnh sửaThuộc tính lúc Thiếtkế
Button

Link Button
Image Button
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
Simple control
Mộtsố thuộc tính quan trọng
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.
AutoPostBack
Khi đượcthiếtlậplà True, mỗi khi ngườidùng thay đổidữ liệu
TextChanged trong TextBox sẽ kích hoạtsự kiện post-back về
server
 Label, Buttons
– ThuộctínhText
 TextBox
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
List Control
ListBox, DropDownList, Table
Control Sử dụng khi
ListBox
Hiểnthị danh sách dữ liệu read-only đơngiản, sử dụng
scroll
DropDownList
Hiểnthị danh sách dữ liệu read-only đơngiản, sử dụng cửa
sổ sổ xuống

Table
Hiểnthị thông tin dướidạng dòng và cột. Table control
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
List Control: HTML tag
 ListBox
– <asp:ListBox id="ListBox1" runat="server"></asp:ListBox>
 DropDownList
– <asp:DropDownList id="DropDownList1"
runat="server"></asp:DropDownList>
 Table
– <asp:Table id="Table1" runat="server" Width="100px"
Height="70px"></asp:Table>
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
List Controls
Chỉnh sửaThuộc tính lúc Thiếtkế
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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);

}
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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.“;
}
}
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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

Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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
CompareValidator
Kiểmtranếumụcdữ liệunhập trong control giống
với control khác
RangeValidator
Kiểmtranếumụcdữ liệunhập trong control nằm
trong khoảng 2 giá trị
RegularExpressionValidator
Kiểmtranếumụcdữ liệunhập trong control thỏa1
công thức định dạng chỉđịnh
CustomValidator
Kiểmtratính đúng đắncủadữ liệunhậpvào control
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
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
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!
Thiếtkế & Lập trình WEB 2 – Làm việcvới Control
© 2007 Khoa CNTT – ĐH KHTN
Ví dụ
•Đặtthuộc tính ErrorMessage cho Validate control
•Sử dụng ValidationSummary•Sử dụng ValidationSummary control với ShowMessage=True