Bài 3: SERVER CONTROL 3.1. Html Server control 3.2. Web 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=" <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

<tagName event=“Function_Process”></tagName>
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" /> <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=" <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> </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

<asp:ControlName id= “ControlID” runat=“sever” />
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

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: Type "checkbox" Id tên checkbox Text Nhãn
Checked <tên id>.Checked = True/False Item[n].Selected <tên id>.Item[n].Selected=True/False SelectedItem <tên id>. SelectedItem SelectedValue <tên id>. SelectedValue SelectedIndex <tên id>. SelectedIndex Sự kiện: Onclick() Onserverclick ()

CheckBox <asp:CheckBox ID="CheckBox1" runat="server" Text="ghdf" /> <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> <input type="submit" id="btnSubmit" value="Submit " runat="server" 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 đ" /> <asp:ListItem Text="Đĩa CD tài liệu đ" /> </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: Type "RadioButton" Id tên RadioButton
Text Nhãn Checked <tên id>.Checked = True/False SelectedItem <tên id>. SelectedItem SelectedValue <tên id>. SelectedValue 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 ImageButton PostBackUrl

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 <asp:ListControlName Id=“IdName” runat=“Server”>
DropDownList ListBox CheckBoxList RadioButtonList <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.

Thuộc tính và sự kiện 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

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 ASP ControlHTML HTMLControl Table <table> TableRow
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 ID="c" runat="server"> <asp:TableCell runat="server"></asp:TableCell> </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> <td class="style3"> </td> <td class="style2"> <td> </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=" " 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> <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; } }

<asp:ValidationSummary runat="server" ID="validchung"/>
Ý 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ị Cần demo cụ thể thì sinh viên mới làm được

Tạo ứng dụng Viết code cho các <asp:WizardStep ...>
2 1 3 Viết code cho các <asp:WizardStep ...> Viết code cho sự kiện Onfinishbuttonclick 5 4

3.3. Client-Side Callback Sinh viên tự nghiên cứu

Bài 3: SERVER CONTROL 3.1. Html Server control 3.2. Web Server control

Similar presentations

Presentation on theme: "Bài 3: SERVER CONTROL 3.1. Html Server control 3.2. Web Server control"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Bài 3: SERVER CONTROL 3.1. Html Server control 3.2. Web Server control

Similar presentations

Presentation on theme: "Bài 3: SERVER CONTROL 3.1. Html Server control 3.2. Web Server control"— Presentation transcript:

Similar presentations

About project

Feedback