bài 3: server control

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="http://www.w3.org/1999/xhtml"><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" /> <br /> Nhập số B:<input type="text" id="txtB" /> <br /> <input type="button" onclick="Tinh();" name="btnTinh" value="Tổng" /><br /> Tổng là:<input type="text" id="txtTong" /><br /></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

HtmlInputControl

HtmlInputFile

HtmlInputHidden

HtmlInputImage

HtmlInputRadioButton

HtmlInputText

HtmlInputButton

HtmlInputCheckBox

HtmlContainerControl

HtmlForm

HtmlGenericControl

HtmlSelect

HtmlTable

HtmlTableCell

HtmlTableRow

HtmlTextArea

HtmlAnchor

HtmlButton

<table>

<form>

<input type=button>

<tr>

<td>,<th>

<input type=text>

<textarea>

<input type=image>

<input type=file>

<input type=hidden>

<input type=radio>

<input type=checkbox>

<select>

<a>

<span>,<div>, ...

<button>

<img>

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="http://www.w3.org/1999/xhtml"><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" /> <br /> <input type="submit" value="Send" id="btnsend" 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="http://www.w3.org/1999/xhtml"><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" /> <br /> <input type="submit" value="Send 2" id="btnsend2" runat="server" onserverclick="btnsend2_Serverclick" /> <br /> <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ì quý 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> <div style="background-color:Lime; width: 100px; height:auto; left:auto; top: auto;

color:Red"> <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

Syst em. Obj ect

Syst em. Web. UI . Cont r ol

WebCont r ol

AdRot at or

BaseDat aLi st

Dat aGr i d

Dat aLi st

But t on

Cal endar

CheckBox

Radi oBut t on

Hyper Li nk

I mage

I mageBut t on

Label

BaseVal i dat or

BaseCompar eVal i dat or

Cust omVal i dat or

RangeVal i dat or

Regul ar Expr essi onVal i dat or

Requi r edFi el dVal i dat or

Li nkBut t on

Li st Cont r ol

Radi oBut t onLi st

CheckBoxLi st

Dr opDownLi st

Li st Box

Panel

Tabl e

Tabl eCel l

Tabl eHeader Cel l

Tabl eRowText Box

Val i dat i onSummar y

Repeat er

Compar eVal i dat or

Xml

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

<asp:Button Text="Tính tổng" ID="btntinh" runat="server" onclick="btntinh_Click" /> <br /><asp:LinkButton Text="Click ở đây" ToolTip="Gọi phương thức tính tổng" onclick="btntinh_Click" runat="server"/> <br /><asp:ImageButton ImageUrl="~/hinh1.gif" onclick="btntinh_Click" runat="server" Height="74px" Width="82px" />

CheckBox

• Các thuộc tính:o Type "checkbox" o Id tên checkboxo Text Nhãno Checked <tên id>.Checked = True/Falseo Item[n].Selected <tên id>.Item[n].Selected=True/Falseo SelectedItem <tên id>. SelectedItem o SelectedValue <tên id>. SelectedValueo SelectedIndex <tên id>. SelectedIndex

• Sự kiện:– Onclick()– Onserverclick ()

CheckBox

<body> <form id="form1" runat="server"> <p>Bạn chọn màu</p> <p> <input type="checkbox" id="maudo" runat="server" /> Đỏ<br /> <input type="checkbox" id="mauxanh" runat="server" /> Xanh<br /> </p> <p> <input type="submit" id="btnSubmit" value="Submit " runat="server"

onserverclick="btnSubmit_Click" /> </p> </form> <div id="lbltext" runat ="server" > </div> </body>

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

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 Type "RadioButton" o Id tên RadioButtono Text Nhãno Checked <tên id>.Checked = True/Falseo SelectedItem <tên id>. SelectedItem o SelectedValue <tên id>. SelectedValueo SelectedIndex <tên id>. SelectedIndex

• Sự kiện– onClick()– onCheckedChanged()

<asp:RadioButtonList ID="rabgt" runat="server"> <asp:ListItem Text="Nam" /> <asp:ListItem Text="Nữ" /></asp:RadioButtonList>

image

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

HyperLink

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

• NavigateUrl: Địa chỉ URL cần link đến• 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

ListControl

• DropDownList• ListBox• CheckBoxList• RadioButtonList

<asp:ListControlName Id=“IdName” runat=“Server”> <asp:ListItem Value=”value” Text=“text”></asp:ListItem></asp:ListControlName>

<asp:ListControlName Id=“IdName” runat=“Server”> <asp:ListItem Value=”value” Text=“text”></asp:ListItem></asp:ListControlName>

ListControl

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.

• 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

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

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

Table <table>

TableRow <tr>

TableHeaderCell <th>

TableCell <td>

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> <asp:TableCell runat="server">c2</asp:TableCell> </asp:TableRow> <asp:TableRow ID="c" runat="server"> <asp:TableCell runat="server"></asp:TableCell> <asp:TableCell runat="server"></asp:TableCell> </asp:TableRow></asp:Table>

HTMLControl<table id="Table2" style="width:41%;" > <tr> <th>cột 1</th> <th>Cột 2</th> <th>Cột 3</th> </tr> <tr> <td class="style3"> </td> <td class="style2"> </td> <td> </td> </tr> <tr> <td class="style3"> </td> <td class="style2"> </td> <td> </td> </tr></table>

BulletedList

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

Các Control đặt biệt

• Panel• FileUpload• Calendar• AdRotator• Validation• Wizard

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>

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

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

Calendar

• Cú pháp:<asp:Calendar ID="calendar1" runat="server"

FirstDayOfWeek="Monday" SelectedDate="2011-09-26"

onselectionchanged="layngay"></asp:Calendar>

• Các thuộc tính:– DayNameFormat: Định dạng– 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();

AdRotator

• Ý 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 đến

control 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

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/XMLFile.xml" Height="20" Width="30" />

<?xml version="1.0" encoding="utf-8" ?><Advertisements> <Ad> <ImageUrl>Image/hinh1.gif</ImageUrl> <NavigateUrl>http://www.microsoft.com</NavigateUrl> <AlternateText>Alt Text</AlternateText> </Ad></Advertisements>

Validation

• RequiredFieldValidator• Range Validator• RegularExpressionValidator• CompareValidator• CustomValidator• ValidationSummary

RequiredFieldValidator

• Ý nghĩa: Yêu cầu người dùng phải nhập liệu• Cú pháp:

<asp:RequiredFieldValidator runat="server" ErrorMessage="Bạn phải nhập dữ liệu"

ControlToValidate="txtsoa" Display="Dynamic"

EnableClientScript =– true thì hiểu các script ở phía client– false thì không

Initialvalue = Giá trị khởi tạo />

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

• Cú pháp:

<asp:RangeValidator id="RangeValidator1" runat="server“

errorMessage = "Content_Message"

controlToValidate = " input_Control"

display="static“ type = “Integer"

minimumValue = minValue

maximumValue = maxValue />

RegularExpressionValidator

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

• Cú pháp:<asp:RegularExpressionValidator runat="server"

ErrorMessage="thông báo" ControlToValidate="Id của control cần kiểm tra "

Display="Dynamic" ValidationExpression="biểu thức định dạng" />

• Xác định file ảnh: "^([0-9a-zA-Z_\-~ :\\])+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.gif|.GIF|.png"

• Xác định số: "^\d+$" hoặc "^\d{n}"

• Ký tự là số: "[0-9]+"

• Lưu ý: *, ?

CompareValidator

• Ý nghĩa: So sánh dữ liệu nhập với một trị hoặc hằng cho trước hoặc một giá trị trong dữ liệu

• Cú pháp:<asp:CompareValidator runat="server"

ErrorMessage="errormessage" 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ị" />

CustomValidator• Ý 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" ControlToValidate="tên ID cần kiểm tra"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)onservervalidate="CustomValidator1_ServerValidate" />protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { if (args.Value.Length>5) { args.IsValid = true; } else { args.IsValid = false; } }

ValidationSummary

• Ý nghĩa: – Cho phép bạn liệt kê tất cả các các lỗi kiểm tra trên trang từ

những điều khiển validator vào một vị trí. – Điều khiển này đặc biệt tiện ích với Form có độ rộng lớn

• Cú pháp:<asp:ValidationSummary runat="server" ID="validchung"/>

• Thuộc tính:– DisplayMode: Cho phép bạn chỉ rõ định dạng hiển thị lỗi, nó

có thể là các giá trị như BulletList, List, và SingleParagraph– HeaderText: Cho phép bạn hiển thị tiêu đề tóm tắt cho các lỗi– ShowMessageBox: Cho hiện thị một popup thông báo– ShowSummary: Cho phép bạn ẩn ValidationSummary trên

trang.

Wizard

• Ý nghĩa: Tạo các bước để dẫn dắt người dùng qua �một dãy màn hình nhằm thu thập thông tin

• Các thuộc tính quan trọng:– WizardStep– StepType : Start; Step; Finish; Complete

• Các sự kiện:– Onfinishbuttonclick: Xảy ra khi nút Finish được

Click– OnActiveStepChanged: Xảy ra khi thay đổi các

bước hiển thị

Tạo ứng dụng

• Viết code cho các <asp:WizardStep ...>

• Viết code cho sự kiện Onfinishbuttonclick

13

2

4

5

3.3. Client-Side Callback

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

bài 3: server control

Documents