Bài giảng Phát triển web nâng cao Bài 3 Server control

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 , , … • Các HTML control có thể được xử lý ngay t

Trang 3

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 serverbằng cách chuyển chúng thành các HTML server control

Trang 4

Nhập số A:<input type="text" id="txtA" /> <br />

Nhập số B:<input type="text" id="txtB" /> <br />

</form>

</body>

</html>

Trang 5

Cách tạo

• Cú pháp:

<TagName runat=“server” ></TagName>

• Ví dụ:

• Tất cả HTML Server Control phải được đặt trong tag <form> với thuộc tính runat = “server”

……

</form>

Trang 6

• Hệ thống thứ bậc của HTML Server Controls

System.Object System.Web.UI.Control

HtmlControl HtmlImage

HtmlInputControl

HtmlInputFile HtmlInputHidden HtmlInputImage HtmlInputRadioButton

HtmlInputText HtmlInputButton HtmlInputCheckBox

HtmlContainerControl

HtmlForm HtmlGenericControl

HtmlSelect HtmlTable HtmlTableCell HtmlTableRow HtmlTextArea HtmlAnchor HtmlButton

Trang 8

public void btnsend_Serverclick(object sender, System.EventArgs e)

{ Response.Write("Hello " + txtA.Value); }

</script>

</head>

<body>

Nhập ten:<input type="text" id="txtA" runat="server" /> <br />

<input type="submit" value="Send" id="btnsend" runat="server"

onserverclick="btnsend_Serverclick" />

</form>

</body>

</html>

Trang 9

<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>

Nhập ten 2:<input type="text" id="txtB" runat="server" /> <br />

</form>

</body>

</html>

Trang 10

Thẻ Span & Div

Trang 12

3.2 Web server control

Trang 13

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

Trang 15

Hệ thống thứ bậc của Web Server Control

System.Object System.Web.UI.Control

WebControl AdRotator

BaseValidator BaseCompareValidator

CustomValidator RangeValidator

RegularExpressionValidator RequiredFieldValidator

LinkButton ListControl RadioButtonList CheckBoxList DropDownList ListBox Panel Table TableCell TableHeaderCell TableRow

TextBox

ValidationSummary

Repeater

CompareValidator Xml

Trang 18

• Dùng để nhập liệu hoặc hiển thị văn bản chỉ đọc

• Thuộc tính :

động trên trang web bẩy một sự kiện

Trang 21

<asp:ImageButton ImageUrl="~/hinh1.gif" onclick="btntinh_Click"

runat="server" Height="74px" Width="82px" />

Trang 22

o Checked <tên id>.Checked = True/False

o SelectedItem <tên id> SelectedItem

o SelectedValue <tên id> SelectedValue

o SelectedIndex <tên id> SelectedIndex

• Sự kiện:

– Onclick()

– Onserverclick ()

Trang 23

<asp:CheckBox ID="CheckBox1" runat="server" Text="ghdf" />

<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>

Trang 24

protected void btnSubmit_Click(object sender, EventArgs e) {

Trang 25

o Checked <tên id>.Checked = True/False

o SelectedItem <tên id> SelectedItem

o SelectedValue <tên id> SelectedValue

o SelectedIndex <tên id> SelectedIndex

Trang 26

• Type: Image

• ImageUrl : Địa chỉ của hình cần hiển thị

• AlternateText: Dòng văn bản hiển thị khi hình không

có sẳn

• ImageAlign: Canh vị trí tương đối của hình so với

văn bản trên trang

• Height: Chiều cao

• Width: Chiều rộng

• ToolTip: Thông báo khi rà mouse

Xem thêm ImageButton

PostBackUrl

Trang 27

• ImageUrl: Đường dẫn đến hình cần hiển thị (nếu dùng

thuộc tính này thì hyperlink có tác dụng giống nhưImagebutton)

• Text: Chuỗi văn bản chỉ mục liên kết hiển thị trên trình

duyệt

• Target: Chỉ cửa sổ hiển thị trang đích

Trang 28

<asp: ListControlName Id =“IdName” runat =“Server”>

<asp: ListItem Value =”value”

Text =“text”></asp:ListItem>

</asp:ListControlName>

Trang 29

ListBox DropDownList CheckBoxList RadioButtonList

<asp:ListBox ID="ListBox1" runat="server">

<asp:ListItem>Quảng Ngãi</asp:ListItem>

<asp:ListItem>Đà Nẳng</asp:ListItem>

</asp:ListBox>

Item: có thể được tạo theo cách Coding hoặc Design

Items.Count : trả về số phần tử trong listControls

Items.Add(ListItem) : thêm phần tử vào listControls

Items.Remove(ListItem) : xoá phần tử khỏi ListControl

Items.Clear() : Xoá tất cả các phần tử.

Items[ i ].Selected : trả về true hoặc false.

Trang 30

• SelectedIndex: trả về chỉ số của phần tử được chọn

• SelectedItem: trả về phần tử được chọn

• SelectedValue: trả về giá trị được chọn

• Sự kiện: SelectedIndexChaged

Thuộc tính và sự kiện

Trang 31

Dữ liệu cho ListControl

• DataSource: thiết lập giá trị từ DataSource như

DataTable,DataSet,Array,Collection,DataView

• DataTextField: thiết lập phần tử text từ DataSource

• DataValueField: thiết lập giá trị phần tử từ

DataSource

• DataBind(): binding data vào ListControl

Trang 32

Table

• 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 Table Rows và Table Cells

• Tạo Table : Disgin hoặc Code

ASP ControlHTML HTMLControl

TableHeaderCell <th>

Trang 33

ASP ControlHTML

<asp:Table ID="Table1" runat="server" Height="223px" Width="411px" GridLines="Both">

<asp:TableRow Width="8px">

<asp:TableHeaderCell Width="12px">Cột 1</asp:TableHeaderCell>

<asp:TableHeaderCell>Cột 2</asp:TableHeaderCell>

<asp:TableHeaderCell>Cột 3</asp:TableHeaderCell>

</asp:TableRow>

<asp:TableRow ID="b" runat="server">

<asp:TableCell runat="server">c1</asp:TableCell>

Trang 35

<asp:BulletedList runat="server"

BulletStyle="Numbered" DisplayMode="Text" >

<asp:ListItem Text="Mở đầu" />

<asp:ListItem Text="Thân bài" />

<asp:ListItem Text="Kết luận" />

</asp:BulletedList>

Trang 37

Panel

• Được dùng như ContainerControl đối với các control

khác

• Thi hành nhiều chức năng: Kiểm soát các control chứa

trong Panel Control

• Được dẫn xuất từ lớp Webcontrol

<asp:Panel ID="Panel1" runat="server" BackColor="#99FF66" BackImageUrl="~/hinh1.gif" BorderStyle="Groove" Height="339px" Width="620px">

</asp:Panel>

Trang 38

FileUpload

• Dùng thực hiện upload file lên server

• Các thuộc tính:

– FileName : Tên file được upload lên

– Hasfile: True/False tồn tại file không

– FileBytes : Mảng bytes chứa nội dung file upload

– PostedFile.Filename : Đường dẫn đầy đủ của file

– PostedFile.ContentType : Loại File (.doc, mdb, …)

– PostedFile.ContentLength : Kích thước của File.

• Các phưong thức:

– SaveAs : Lưu file upload vào 1 thư mục bất kỳ

– MapPath(): Trả về đường dẫn ảo của web server – PathGetExtension(): Trả về pahàn mở rộng của file

Trang 39

Ví dụ

lblfile.Text = FileUpload1 PostedFile FileName ToString();

lbltype.Text = FileUpload1.PostedFile ContentType ToString();

lblsize.Text = FileUpload1.PostedFile ContentLength ToString();

string filename;

filename = FileUpload1.PostedFile.FileName.ToString();

FileUpload1.PostedFile SaveAs (Server.MapPath("")+"\\bai2.3"+filename);

Nên viết Code Bihind

Trang 40

– FirstDayOfWeek: Quy định ngày đầu tuần

– SelectedDate: Lấy về hoặc thiết đặt cho ngày lựa chọn – <id>.SelectedDate.< ToString() / ToShortDateString() / ToLongDateString() >;

– <id>.SelectedDate.< Day / Month / Year >.ToString();

Trang 42

• Ý nghĩa: Dùng quảng cáo trên trang web

• Thuộc tính:

– ImageUrl: URL của hình ảnh cần được hiển thị

– NavigateUrl: URL của trang web phải chuyển đếncontrol khi có sự kiện click

– AlternateText: Dòng văn bản hiển thị khi hình không cósẳn

– Keyword: loại quảng cáo

– AdvertisementFile: file.xml

– Height

– Width

Trang 43

<asp:AdRotator ID="AdRotator1" runat="server"

AdvertisementFile="~/XMLFile.xml" Height="20" Width="30" />

Trang 46

Range Validator

• Ý nghĩa:

– Kiểm tra giới hạn nhập liệu

– Giá trị nhập phải nằm trong khoảng giới hạn:

• giới hạn này có thể được đưa vào lúc thiết kế

• hoặc so sánh với các control khác trên trang web

Trang 47

• Ý nghĩa:

– Kiểm tra dữ liệu nhập với khuôn biểu thức mẫu

(RegularExpression) đã được định nghĩa trước

– Visual Studio NET cung cấp các khuôn biểu thức mẫu

Trang 49

ControlToValidate= " Id của control cần kiểm tra "

ControlToCompare= " Id của control kiểm tra "

Type="Integer"

Operator="Equal"

ValueToCompare= "giá trị" />

Trang 50

• Ý nghĩa: Kiểm tra tính hợp lệ dữ liệu của một control

theo một yêu cầu, một ràng buộc nào đó

• Cú pháp:

<asp:CustomValidator ID="CustomValidator1" runat="server"

ErrorMessage="errormessage"

ClientValidationFunction : thuộc tính này nó chứa một tên

hàm, mà hàm này được lập trình ở client (javascript )

Trang 53

4

5

Trang 54

3.3 Client-Side Callback

• Sinh viên tự nghiên cứu

Định dạng
Số trang	54
Dung lượng	903,96 KB