Bài giảng Phát triển web nâng cao Bài 3 Server control
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (903.96 KB, 54 trang )
Bài 3:
SERVER CONTROL
3.1. Html Server control
3.2. Web Server control
3.3. Client-Side Callback
3.1 HTML Server Control
•
•
•
•
•
Khái niệm
Cách tạo
Thứ bậc
Các sự kiện
Xử lý dữ liệu
Khái niệm
• HTML control là các đoạn mã dùng tạo các điều khiển
trên giao diện
• HTML control thường chỉ được sử lý ngay tại Web
Browser (<h>, <a>, <input> …)
• Các HTML control có thể được xử lý ngay tại phía server
bằng cách chuyển chúng thành các HTML server control
Ví dụ
<html xmlns=" /><head runat="server">
<title>Các điều khiển giao diện</title>
<script type="text/javascript">
function Tinh() {
var x, y;
x = parseInt(document.getElementById("txtA").value);
y = parseInt(document.getElementById("txtB").value);
document.getElementById("txtTong").value = x + y;
}
</script>
</head>
<body>
<form id="form_chinh" >
Nhập số A:<input type="text" id="txtA" />
Nhập số B:<input type="text" id="txtB" />
<input type="button" onclick="Tinh();" name="btnTinh" value="Tổng" />
Tổng là:<input type="text" id="txtTong" />
</form>
</body>
</html>
Cách tạo
• Cú pháp:
<TagName runat=“server”></TagName>
• Ví dụ:
<input type=“text” name=“txtA” runat=“server”/>
•
Tất cả HTML Server Control phải được đặt trong tag <form> với
thuộc tính runat = “server”
<form id="form1" runat="server">
……
</form>
• Hệ thống thứ bậc của HTML Server Controls
System.Object
System.Web.UI.Control
HtmlControl
HtmlImage <img>
HtmlContainerControl
HtmlInputFile
<form>
<span>,
HtmlGenericControl <div>, ...
HtmlForm
HtmlInputControl
<input type=file>
HtmlInputHidden
<input type=hidden>
HtmlSelect
<select>
HtmlInputImage
<input type=image>
HtmlTable
<table>
HtmlTableCell
<td>,<th>
<input type=text>
HtmlTableRow
<tr>
<input type=button>
HtmlTextArea
<textarea>
HtmlInputRadioButton <input type=radio>
HtmlInputText
HtmlInputButton
HtmlInputCheckBox
HtmlAnchor
<a>
HtmlButton
<button>
Các sự kiện
• Sự kiện:
– onServerClick
– onServerChange
– onStartSelect,…
• Cú pháp:
<tagName event=“Function_Process”></tagName>
Xử lý dữ liệu từ HTML Server
• Cú pháp:
controlfield_id.Value
• Ví dụ:
<html xmlns=" /><head runat="server">
<title>Các điều khiển giao diện</title>
<script runat="server">
public void btnsend_Serverclick(object sender, System.EventArgs e)
{ Response.Write("Hello " + txtA.Value); }
</script>
</head>
<body>
<form id="form2" runat="server">
Nhập ten:<input type="text" id="txtA" runat="server" />
onserverclick="btnsend_Serverclick" />
</form>
</body>
</html>
Xử lý dữ liệu từ HTML Server
• Lưu ý: Đối với DIV, SPAN thì phải dùng thuộc tính .innerHTML để xử lý
• Ví dụ:
<html xmlns=" /><head runat="server">
<title>Các điều khiển giao diện</title>
public void btnsend2_Serverclick(object sender, System.EventArgs e)
{ MySpan.InnerHtml="Xin chao " + txtB.Value; }
</script>
</head>
<body>
<form id="form2" runat="server">
Nhập ten 2:<input type="text" id="txtB" runat="server" />
onserverclick="btnsend2_Serverclick" />
<b><span id="MySpan" runat="server"></span></b>
</form>
</body>
</html>
Thẻ Span & Div
• Thẻ <span> :
– Là một thẻ trung hịa, nó khơng thêm hay bớt bất cứ
một thứ gì vào một tài liệu HTML cả
– Dùng để nhóm một khối phần tử
• Thẻ <div> :
– Cũng là một thẻ trung hịa
– Dùng để nhóm một hoặc nhiều khối phần tử
Ví dụ
<body>
<form id="form_chinh" >
Khơng có gì q hơn <span style="font-weight:bold">độc lập </span>tự do
<ul>
<div style="font-style:italic; color:Blue" >
<li>Hà Nội</li>
<li>Đà Nẳng</li>
<li>TP Hồ Chí Minh</li>
</div>
<li>Quảng Nam</li>
<li>Quảng Ngãi</li>
<li>Bình Định</li>
</div>
</ul>
</form>
</body>
3.2 Web server control
•
•
•
•
•
Khái niệm
Cách tạo
Thứ bậc
Các Control cơ bản
Các Control đặt biệt
Khái niệm
• Web server control là những tag đặc biệt của ASP.NET
• Các control này được xử lý trên Server và địi hỏi phải có
thuộc tính runat= “server”
• Web server control tồn tại bên trong không gian tên
System.Web.UI.WebControls
Cách tạo
• Cú pháp:
<asp:ControlName id= “ControlID” runat=“sever” />
• Ví dụ:
<asp:Label ID=“lblMsg" runat="server"> </asp:Label>
Hệ thống thứ bậc của Web Server Control
System.Object
System.Web.UI.Control
Repeater
Xml
WebControl
AdRotator
LinkButton
Image
BaseDataList
ListControl
ImageButton
DataGrid
DataList
Button
Calendar
CheckBox
RadioButton
HyperLink
TextBox
RadioButtonList
CheckBoxList
DropDownList
ListBox
Panel
Table
TableCell
TableHeaderCell
TableRow
Label
BaseValidator
BaseCompareValidator
CompareValidator
RangeValidator
CustomValidator
RegularExpressionValidator
RequiredFieldValidator
ValidationSummary
Các Control cơ bản
•
•
•
•
•
•
•
•
•
•
Label
Textbox
Button
CheckBox
Radio
Image
Hyperlink
List Controls group
Table
BulletedList
Label
• Dùng hiển thị văn bản trên trình duyệt
• Thuộc tính:
– ID: tên cho label
– Khác: Tự nghiên cứu
• Ví dụ:
TextBox
•
•
Dùng để nhập liệu hoặc hiển thị văn bản chỉ đọc
Thuộc tính :
– AutoPostBack: có 2 giá trị True và False khi một hành
động trên trang web bẩy một sự kiện
– TextMode: SingleLine, MultiLine, Pass
– Value: Gán giá trị
– ReadOnly: Dữ liệu khơng thay đổi
– Khác: Tự nghiên cứu
• Sự kiện: Tự nghiên cứu
Button
• Thường sử dụng để submit form
• Phân loại:
– Button
– LinkButton
– ImageButton
• Sự kiện
– Onclick()
– OnserverClick()
Button
CheckBox
•
•
Các thuộc tính:
o
Type
o
Id
o Text
o Checked
o Item[n].Selected
o
SelectedItem
o
SelectedValue
o
SelectedIndex
Sự kiện:
–
–
Onclick()
Onserverclick ()
"checkbox"
tên checkbox
Nhãn
<tên id>.Checked = True/False
<tên id>.Item[n].Selected=True/False
<tên id>. SelectedItem
<tên id>. SelectedValue
<tên id>. SelectedIndex
CheckBox
<asp:CheckBox ID="CheckBox1" runat="server" Text="ghdf" />
<body>
<form id="form1" runat="server">
Bạn chọn màu
<input type="checkbox" id="maudo" runat="server" /> Đỏ
<input type="checkbox" id="mauxanh" runat="server" /> Xanh
onserverclick="btnSubmit_Click" />
</form>
<div id="lbltext" runat ="server" > </div>
</body>
<asp:CheckBoxList ID="chkchon" runat="server" >
<asp:ListItem Text="Photo tài liệu - 2.000 đ" />
<asp:ListItem Text="Đĩa CD tài liệu - 7.000 đ" />
</asp:CheckBoxList>
protected void btnSubmit_Click(object sender, EventArgs e)
{
string maudachon = " ";
if (maudo.Checked)
{ maudachon = "Đỏ "; }
if (mauxanh.Checked)
{ maudachon = "Xanh "; }
if ((maudo.Checked) && (mauxanh.Checked))
{ maudachon = "Đỏ Xanh "; }
if (Page.IsPostBack)
{ lbltext.InnerHtml = “Bạn chọn màu: " + maudachon; }
}
RadioButton
•
Thuộc tính:
o
o
o
o
o
o
o
Type
Id
"RadioButton"
tên RadioButton
Checked
SelectedItem
SelectedValue
SelectedIndex
Text
Nhãn
• Sự kiện
– onClick()
– onCheckedChanged()
id>.Checked = True/False
id>. SelectedItem
id>. SelectedValue
id>. SelectedIndex
<asp:RadioButtonList ID="rabgt" runat="server">
<asp:ListItem Text="Nam" />
<asp:ListItem Text="Nữ" />
</asp:RadioButtonList>
