ASP.NET SERVER CONTROLS

Lập trình Web Lập trình Web

1 Lập trình Web

ASP.NET Controls

Intrinsic

List

Rich

Validation

ASP.NET ControlsASP.NET Controls

Web Control là các đối tượng Web Control là các đối tượng (Object)(Object)Như các objects, web controls có method, thuộc tính

và có thể xử lý xự kiện.

Có thể gọi phương thức hay gán thuộc tính của một web control.

Có thể viết code phía server cho một web control để trả lời cho một xự kiện sinh ra ở phía client.

Web control là đối tượng – Web control là đối tượng – Ví dụVí dụ

Kết quả trước khi nhấn nút

Kết quả sau khi nhấn nút

Web control là đối tượng – Web control là đối tượng – OutputOutput

<input type= “checkbox”><input type= “radio”>

<asp:CheckBox><asp:RadioButton>

<asp:TextBox rows=“1”><asp:TextBox rows=“10”>

<input type= “text”>< textarea>

Intrinsic Controls (điều Intrinsic Controls (điều kiển nội tại)kiển nội tại)Giống HTML control, dùng để thay thế các HTML

control.

<asp:textbox id="name" runat="server"/>

<asp:textbox id="add" textmode="multiline" rows=“10" columns="10" runat="server"/>

<asp:textbox id="pwd" textmode="password" runat="server"/>

Text Entry - Intrinsic Text Entry - Intrinsic ControlControl

Gửi dữ liệu về server

Liên kết tới trang khác

Control Transfer - Intrinsic Control Transfer - Intrinsic ControlControl

Control TransferControl Transfer

<asp:checkbox id="chkbx1" Text="Select Me" runat="server"/>

<asp:CheckBoxList id="CheckBoxList1" runat="server"><asp:ListItem Value="Maths">Maths</asp:ListItem>

<asp:ListItem Value="Science">Science</asp:ListItem><asp:ListItem Value="English">English</asp:ListItem><asp:ListItem

Value="Computers">Computers</asp:ListItem></asp:CheckBoxList>

Intrinsic Control: Lựa chọnIntrinsic Control: Lựa chọn

Intrinsic Control: SelectionIntrinsic Control: Selection

<asp:radiobutton id ="radbt1" Text =" Radio Button no 1" groupname="radio" runat="server"/><asp:radiobutton id ="radbt2" Text =" Radio Button no 2" groupname="radio" runat="server"/><asp:radiobutton id ="radbt3" Text =" Radio Button no 3“groupname="radio" runat="server"/>

<asp:listbox id="lstbx1" SelectionMode=”Single” runat="server"/>

<asp:dropdownlist id= "dropdnlst1" runat="server" />

<asp:RadioButtonList id="RadioButtonList1" runat="server"><asp:ListItem Value="Red">Red</asp:ListItem><asp:ListItem Value="Blue">Blue</asp:ListItem><asp:ListItem Value="Green">Green</asp:ListItem><asp:ListItem Value="Yellow">Yellow</asp:ListItem></asp:RadioButtonList>

Intrinsic Control: Điều Intrinsic Control: Điều khiển lựa chọnkhiển lựa chọn

ArrayList arrlist= new ArrayList();arrlist.Add ("Four");arrlist.Add ("Five");arrlist.Add ("Six");ddl.DataSource =arrlist;

void Page_Load (Object Src, EventArgs E){ddl.Items.Add("<10");ddl.Items.Add("10-20");ddl.Items.Add("20-30");ddl.Items.Add("30-40");ddl.Items.Add("40-50");ddl.Items.Add(">50");}

<asp:listbox id="lbs" runat="server"><asp:ListItem> One </asp:ListItem> <asp:ListItem> Two </asp:ListItem> <asp:ListItem> Three </asp:ListItem> </asp:listbox><asp:dropdownlist id= "ddl" runat="server" ><asp:ListItem> One </asp:ListItem> <asp:ListItem> Two </asp:ListItem> <asp:ListItem> Three </asp:ListItem> </asp:dropdownlist>

Các điều khiển lựa chọn – Các điều khiển lựa chọn – Các Method thêm dữ liệuCác Method thêm dữ liệu

<asp:panel id="panel1" Visible="False" runat="server" > <asp:textbox id="OldPwd" textmode="password" runat="server"/> <asp:textbox id="NewPwd" textmode="password“ runat="server"/></asp:panel>

Container controls có thể chứa các control khác.

Mục đích chính khi dùng container là để gom nhóm các control lại với nhau để có thể cùng ẩn hoặc cùng hiện lên.

Container: Các điều khiển Container: Các điều khiển chứachứa

Dùng để quảng cáo Cung cấp đầy đủ tính năng của một Lịch

Rich ControlsRich Controls

<Advertisements> <Ad> <ImageUrl> </ImageUrl> <TargetUrl> </TargetUrl>

<AlternateText> </AlternateText>

<Keyword> </Keyword>

<Impressions> </Impressions> </Ad> </Advertisements>

Đường dẫn file hình

Địa chỉ web site

Text hiển thị khi đưa chuột lên

Key word

Độ ưu tiên xuất hiện

AdRotatorAdRotator

AdRotator – OutputAdRotator – Output

Calendar ControlCalendar Control

Cung cấp các tính năng của lịch.

Ví dụ - <asp:calendar id="calender1" runat="server" backcolor="white" forecolor="black" borderwidth="2" Bordercolor="black" showgridlines="true"/>

Calendar ControlCalendar Control

Thường dùng để cho user nhập ngày tháng.Có các sự kiện:

Date ChangesMonth Changes

Calendar Control – Ví dụ<html> <script language="C#" runat ="server" > void date_changed(Object sender,EventArgs e) { lblMessage.Text= "The date(s) you have selected is: From " + calendar1.SelectedDates[0].ToShortDateString() + " to " + calendar1.SelectedDates[calendar1.SelectedDates.Count - 1].ToShortDateString(); } void month_changed(Object sender,MonthChangedEventArgs e) { lblCur_m.Text= "The current month you selected is: " + e.NewDate.ToString("Y"); lblPrev_m.Text= "The previous month you selected is: " + e.PreviousDate.ToString("Y"); } </script>

Calendar Control – Ví dụ (tiếp)Calendar Control – Ví dụ (tiếp)

<body> <form runat="server"> <table> <tr> <td>

<asp:calendar id="calendar1" runat="server" OnSelectionChanged="date_changed" OnVisibleMonthChanged="month_changed" SelectionMode="DayWeekMonth" borderwidth="3" Bordercolor="red" showgridlines="true">

<SelectedDayStyle BackColor="Yellow" ForeColor="Red"> </SelectedDayStyle>

</asp:Calendar> </td> <td>&nbsp &nbsp

<asp:label id="lblMessage" runat = "server"/><br>

Calendar Control – Ví dụ (tiếp..)Calendar Control – Ví dụ (tiếp..)

<br>&nbsp &nbsp<asp:label id="lblCur_m" runat = "server"/> <br><br>&nbsp &nbsp<asp:label id="lblPrev_m" runat = "server"/>

</td> </tr> </table> </form> </body></html>

Calendar Control - OutputCalendar Control - Output

Làm việc với văn bảnLàm việc với văn bảnCác cách hiển thị văn bản:

Dùng lệnh Response.WriteSử dụng điều khiển LabelSử dụng điều khiển TextBoxSử dụng điều khiển Literal

Để chỉnh sửa văn bản:Sử dụng kiểu TextBox

Các thuộc tính quan trọng của TextBox:Text, TextMode, ReadOnly, AutoPostBack

Lập trình Web 24

Làm việc với danh sáchLàm việc với danh sáchSử dụng các điều khiển ListBox, DropDownList và Table

để hiển thị danh sách.Sử dụng các điều khiển DataGrid, DataList và Repeater

để hiển thị dữ liệu trong cơ sở dữ liệu.Sử dụng thuộc tính Items để thêm hay xóa các phần tử

trong danh sách của điều khiển.Sử dụng thuộc tính Selected Item để truy cập phần tử

được chọn trong danh sách

Lập trình Web 25

Thực hiện lệnhThực hiện lệnhCác điều khiển Button, LinkButton và ImageButton tạo

ra sự kiện post-back (Button_Click) để thực hiện các lện trên server.

Sử dụng các điều khiển này để kết thúc một giai đoạn tương tác với người dùng (dùng để kết thúc nhập liệu)

Lập trình Web 26

Làm việc với giá trị luận lýLàm việc với giá trị luận lýSử dụng các điều khiển RadioButton, RadioButtonList,

CheckBox, hay CheckBoxList để nhận các giá trị luận lý từ phía người dùng.

RadioButtonList và CheckBoxList sử dụng tương tự như ListBox.

Sử dụng thuộc tính Checked để nhận giá trị của CheckBox hay RadioButton.

Sử dụng thuộc tính GroupName để nhóm các đối tượng RadioButton.

Lập trình Web 27

Làm việc với ngày thángLàm việc với ngày thángSử dụng điều khiển Calendar để hiển thị và nhập giá trị

ngày tháng.Sự kiện chính là SelectionChanged. Đây là sự kiện post-

backThuộc tính chính là SelectedDate và SelectedDates

Lập trình Web 28

Nhóm các điều khiển (Container)Nhóm các điều khiển (Container)Có thể nhóm các điều khiển lại để điều khiển việc hiển

thị chúng như một khối thống nhất.Để nhóm các điều khiển trên web form ta dùng điều

khiển Panel.Đặt các điều khiển lên Panel giống như đặt lên web form

Lập trình Web 29

Thực HànhThực Hành

Lập trình Web 30