ASP.NET web controls
-
Upload
cong-thanh-nguyen -
Category
Technology
-
view
683 -
download
0
Transcript of ASP.NET web controls
![Page 1: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/1.jpg)
ASP.NET SERVER CONTROLS
Lập trình Web Lập trình Web
1 Lập trình Web
![Page 2: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/2.jpg)
ASP.NET Controls
Intrinsic
List
Rich
Validation
ASP.NET ControlsASP.NET Controls
![Page 3: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/3.jpg)
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.
![Page 4: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/4.jpg)
Web control là đối tượng – Web control là đối tượng – Ví dụVí dụ
![Page 5: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/5.jpg)
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
![Page 6: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/6.jpg)
<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.
![Page 7: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/7.jpg)
<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
![Page 8: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/8.jpg)
Gửi dữ liệu về server
Liên kết tới trang khác
Control Transfer - Intrinsic Control Transfer - Intrinsic ControlControl
![Page 9: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/9.jpg)
Control TransferControl Transfer
![Page 10: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/10.jpg)
<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
![Page 11: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/11.jpg)
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"/>
![Page 12: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/12.jpg)
<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
![Page 13: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/13.jpg)
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
![Page 14: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/14.jpg)
<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
![Page 15: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/15.jpg)
Dùng để quảng cáo Cung cấp đầy đủ tính năng của một Lịch
Rich ControlsRich Controls
![Page 16: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/16.jpg)
<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
![Page 17: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/17.jpg)
AdRotator – OutputAdRotator – Output
![Page 18: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/18.jpg)
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"/>
![Page 19: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/19.jpg)
Calendar ControlCalendar Control
Thường dùng để cho user nhập ngày tháng.Có các sự kiện:
Date ChangesMonth Changes
![Page 20: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/20.jpg)
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>
![Page 21: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/21.jpg)
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>   
<asp:label id="lblMessage" runat = "server"/><br>
![Page 22: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/22.jpg)
Calendar Control – Ví dụ (tiếp..)Calendar Control – Ví dụ (tiếp..)
<br>   <asp:label id="lblCur_m" runat = "server"/> <br><br>   <asp:label id="lblPrev_m" runat = "server"/>
</td> </tr> </table> </form> </body></html>
![Page 23: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/23.jpg)
Calendar Control - OutputCalendar Control - Output
![Page 24: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/24.jpg)
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
![Page 25: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/25.jpg)
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
![Page 26: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/26.jpg)
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
![Page 27: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/27.jpg)
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
![Page 28: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/28.jpg)
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
![Page 29: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/29.jpg)
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
![Page 30: ASP.NET web controls](https://reader036.fdocuments.net/reader036/viewer/2022062503/5880b1dc1a28abf32c8b680f/html5/thumbnails/30.jpg)
Thực HànhThực Hành
Lập trình Web 30