ASP.NET 2.0 Standard Control Collection

1. ASP.NET 2.0Standard Control Collection 鄧姚文 http://www.ywdeng.idv.tw

2. Standard Control Collection • Namespace 、 Import Directive • Properties in Web Controls • Button、LinkButton、ImageButton • Label、HyperLink、Image 、 ImageMap • TextBox • CheckBox 、CheckBoxList • RadioButton 、 RadioButtonList • ListBox 、 DropDownList • Table、TableRow 、 TableCell • Literal、BulletedList 、 HiddenField

3. Standard Control Collection • Calendar、DayRender 、 SelectionChanged 、VisibleMonthChanged 、月曆文字的變化、刪除日期下面的橫線 • AdRotator • FileUpLoad • Wizard • Panel 、 PlaceHolder • MultiView 、 View • SubstitutionControl、OutputCache directive • Localize、Xml

4. Properties in WebControl **本章最後列出所有controls共有的properties、methods、events，見表3.5。

5. Properties in WebControl

6. Namespace、Import Directive(1/2) 圖3.10 用物件瀏覽器觀察namespaces

7. System System.Web System.Collections.Specialized System.Web.Security System.IO System.Web.UI System.Text.RegularExpressions System.Web.UI.WebControls System.Collections System.Web.Caching System.Configuration System.Web.SessionState System.Text System.Web.UI.HtmlControls Namespace、Import Directive(2/2) 圖3.11 自動import進使用者網頁中的namespaces

8. Button、LinkButton、ImageButton (1/6) Ex: WebPage0302.aspx.cs • Button control 語法: <asp:Button id="此control的ID" Text="按鈕文字" OnClick="副程式名稱" … runat="server" /> Internet Programming Ch.3

9. Button、LinkButton、ImageButton (2/6) LinkButton 語法： <asp:LinkButton id="此control的ID" Text="按鈕文字" OnClick="副程式名稱" … runat="server" /> Internet Programming Ch.3

10. Button、LinkButton、ImageButton (3/6) ImageButton 語法: <asp:ImageButton id="此control的ID" ImageUrl="圖片檔案的URL" ImageAlign="放置圖片的位置" AlternateText="滑鼠停留時顯示的文字" OnClick="副程式名稱" … runat="server" />

11. Button、LinkButton、ImageButton (4/6) 圖3.8 瀏覽WebPage0303.aspx 圖3.9 按第二個鈕後的畫面 Internet Programming Ch.3

12. <script runat="server"> void ChangeBorder(object obj, EventArgs e) { btnButton.BorderStyle = BorderStyle.Dashed; } void Reset(object obj, ImageClickEventArgs e) { btnButton.BorderStyle = BorderStyle.Outset; } </script> <script language="javascript"> function SecondChance() { alert('Chage the border of the above button.'); } </script>

13. <form id="form1" runat="server"> <asp:Button ID="btnButton" PostBackUrl="~/WebPage0304.aspx" Text="瀏覽本頁" runat="server" /><br /> <asp:LinkButton ID="lbtButton" Text="Change Button border" OnClientClick="SecondChance()" OnClick="ChangeBorder" runat="server" /><br /> <asp:ImageButton ID="ibtnButton" AlternateText=" Reset the button border " ImageUrl="WebPage0304.bmp" OnClick="Reset" runat="server" /> </form>

14. Label、HyperLink、Image、ImageMap (1/6) Image control 語法: <asp:Image id="此control的ID" ImageUrl="圖片檔案的URL" ImageAlign="放置圖片的位置" AlternateText="滑鼠停留時顯示的文字" … runat="server" />

15. Label、HyperLink、Image、ImageMap (2/6) HyperLink control 語法 : <asp:HyperLink id="control的ID" ImageUrl="圖片檔案的URL" NavigateUrl="超連結網址URL" Target="目標視窗" Text="超連結文字" … Runat="server" />

16. Label、HyperLink、Image、ImageMap (3/6) Label control 語法: <asp:Label id="此control的ID" Text="標示的文字" AssociatedControlID="與此Label結合的Control" AccessKey="N" … runat="server" /> Internet Programming Ch.3

17. Label、HyperLink、Image、ImageMap (4/6) <asp:Label id="此control的ID" AssociatedControlID="" AccessKey="" … runat="server" > 標示的文字 (若文字很長，可以此方式撰寫) </asp:Label>

18. Label、HyperLink、Image、ImageMap (5/6) <asp:Label ID="lblHeader" Height="25px" Width="100%" BackColor="#99ff99" ForeColor="white" Font-Bold="True" AssoicatedControlID="myTextBox" Text="A Label Example" AccessKey="N" Runat="server"/> <form runat="server"> <asp:TextBox ID="myTextBox" runat="server" /> </form>

19. Label、HyperLink、Image、ImageMap (6/6) • ImageMap control語法: <asp:ImageMap id="此control的ID" ImageUrl = "地圖或圖片檔案的URL" ImageAlign="地圖在網頁中的擺放位置" HotSpotMode="Hot Spot的模式" OnClick="副程式名稱" … runat="server" /> <asp:CircleHotSpot … /> <asp:RectangleHotSpot … /> <asp:PolygonHotSpot … /> </asp:ImageMap > Internet Programming Ch.3

20. ImageMap • ImageAlign • AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, Top Internet Programming Ch.3

21. ImageMap • Hot Spot (熱點) • CircleHotSpot • (X, Y), Radius, NavigateUrl, HotSpotMode, PostBackValue • RectangleHotSpot • Left, Right, Top, Bottom, NavigateUrl, HotSpotMode, PostBackValue • PolygonHotSpot • (X1, Y1), (X2, Y2), …, (Xn, Yn), NavigateUrl, HotSpotMode, PostBackValue

22. ImageMap • HotSpotMode="{Inactive|Navigate|NotSet|PostBack}" • Inactive • 無作用 • Navigate (default 內定) • 瀏覽所指定的網址 • NotSet • default setting • PostBack • return PostBackValue

23. ImageMap <%@ Page Language="C#" %> <script runat="server"> voidShowInfo(object obj, ImageMapEventArgs e){ Response.Write("There is no university in " & e.PostBackValue) ; } </script> <html><body><form runat="server"> <asp:ImageMap ImageUrl="WebPage0307.jpg" OnClick="ShowInfo" runat="server"> <asp:CircleHotSpot X="110" Y="115" Radius="20" NavigateUrl="http://www.google.com" /> <asp:RectangleHotSpot Left="135" Right="155" Top="80" Bottom="150" NavigateUrl="http://www.usc.edu.tw" /> <asp:PolygonHotSpot Coordinates="115,160,135,180,110,210,105,237,108,200" HotSpotMode="PostBack" PostBackValue="TaiDong." /> </asp:ImageMap> </form></body></html> Internet Programming Ch.3

24. ImageMap (a) (b) (c) (d) 圖3.14 瀏覽WebPage0306.aspx Internet Programming Ch.3

25. TextBox Properties、Events

26. TextBox Properties、Events

27. TextBox常用的Properties、Events WebPage0308 <%@ Page Language= "C#" %> <script> voidShow(Object obj, EventArgs e){ lblMessage.text = tbData.text; } </script> <html> <body> <form runat="server"> <asp:TextBox id="tbData"TextMode="MultiLine" Rows="2" Columns="10 " Wrap="True" OnTextChanged="Show" runat="server"/><br> <asp:Button Text="submit" Runat="server" /><br> <asp:Label id="lblMessage" text="Look!" runat="server" /> </form> </body> </html>

28. CheckBox WebPage0309 <%@ Page Language= "C#" %> <script runat="server"> void Partner(object obj, EventArgs e){ if (cbBridge.Checked) cbBridge.text += "我們有相同的興趣"; } void Prohibit (object obj, EventArgs e){ if (cbChineseBridge.Checked == true) cbChineseBridge.text += "回頭是岸"; else cbChineseBridge.text = "麻將"; } </script> <html><body><form runat="server"> 請勾選你的愛好<br> <asp:CheckBoxid="cbBasketBall" Text="籃球" runat="server"/><br> <asp:CheckBoxid="cbMusic" Text="音樂" runat="server" /><br> <asp:CheckBoxid="cbGo" Text="圍棋" runat="server" /><br> <asp:CheckBoxid="cbBridge" Text="橋牌" runat="server" OnCheckedChanged="Partner" /><br> <asp:CheckBoxid="cbChineseBridge"Text="麻將" runat="server" OnCheckedChanged="Prohibit " AutoPostBack="True"/> </form></body></html>

29. CheckBoxList 常用 Properties及Events Internet Programming Ch.3

30. CheckBoxList < %@ Page Language= "C#" %> <script runat ="server"> string strMessage; void Interest(object obj, EventArgs e) { int index; for (index =0 ; cblInterests.Items.Count; index++) if (cblInterests.Items[index].selected) strMessage &= " " + cblInterests.Items[index].text; lblMessage.text = strMessage; lblFirstInterest.text = cblInterests.Items[cblInterests.SelectedIndex].text; } </script> <html> <body> <form runat="server"> 請勾選你的興趣 <br> <asp:CheckBoxList ID="cblInterests" RepeatDirection="Horizontal" RepeatColumns="3" CellSpacing="5" AutoPostBack="true" OnSelectedIndexChanged="Interest" Runat="server"> <asp:ListItemText="籃球"runat="server" /> <asp:ListItemText="音樂" runat="server" /> <asp:ListItemText="圍棋" runat="server" /> <asp:ListItemText="橋牌" runat="server" /> <asp:ListItemText="麻將" runat="server" /> <asp:ListItemText="電影" runat="server" /> </asp:CheckBoxList> 你的興趣是: <asp:Label id="lblMessage" runat="server"><br> 最前面的興趣是: <asp:Label id="lblFirstInterest" runat="server" /> </form> </body> </html> WebPage0310

31. CheckBoxList (a) (b) 圖3.19 瀏覽WebPage0310.aspx Internet Programming Ch.3

32. RadioButton、RadioButtonList (1/2) <%@ Page Languag="C#" %> <script runat="server"> void Report (object obj, EventArgs e) { string strMessage; if (rbMale.Checked) strMessage = "先生, 你"; else strMessage = "小姐, 妳"; switch (rblAge.SelectedIndex) { case 0 : strMessage += "不到20歲."; break; case 1 : strMessage += "在21到40歲之間."; break; case 2 : strMessage += "在41到60歲之間."; break; case 3 : strMessage += "大於60歲."; break; } lblMessage.text = strMessage; } </script> <html><body><form runat="server"> 性別: <asp:RadioButton id="rbMale" GroupName="Sex" Text="男" Checked="True" runat="server" /> <asp:RadioButton id="rbFemale" GroupName="Sex" Text="女" runat="server" /><p> 年齡: <asp:RadioButtonList id="rblAge" RepeatDirection="Horizontal" runat="server" OnSelectedIndexChanged="Report" AutoPostBack="True"> <asp:ListItemText="小於20" runat="server" /> <asp:ListItemText="21~40"Selected="True"runat="server" /> <asp:ListItemText="41~60" runat="server" /> <asp:ListItemText="61以上" runat="server" /> </asp:RadioButtonList> <asp:Label ID="lblMessage" Runat="server" /> </form></body></html> Internet Programming Ch.3

33. RadioButton、RadioButtonList (2/2) 圖3.21 瀏覽WebPage0311.aspx 圖3.22 點選圖中的選項後顯示之畫面 Internet Programming Ch.3

34. ListBox 、 DropDownList (1/2) <%@ Page Language="C#" %> <script runat="server"> void Report(object obj, EventArgs e) { int index; if (obj is DropDownList ) lblDDLMessage.text = "你選了DropDownList中的" + ddlBox.Items[ddlBox.SelectedIndex].text + ". "; else{ lblLBMessage.text = "你選了ListBox中的"; for (index =0 ;index < lbBox.Items.Count ; index++) if (lbBox.Items[index].selected) lblLBMessage.text &= " " + lbBox.Items[index].text; lblLBMessage.text += "." ; } } </script> Internet Programming Ch.3

35. ListBox 、 DropDownList (2/2) <html><body><form runat="server"> <asp:DropDownList ID="ddlBox" OnSelectedIndexChanged="Report" AutoPostBack="True" Runat="server"> <asp:ListItemText="ITem 1" /> <asp:ListItemText="ITem 2" /> <asp:ListItemText="ITem 3" /> <asp:ListItemText="ITem 4" /> <asp:ListItemText="ITem 5" /> <asp:ListItemText="ITem 6" /> <asp:ListItemText="ITem 7" /> <asp:ListItemText="ITem 8" /> <asp:ListItemText="ITem 9" /> <asp:ListItemText="ITem 10" /> <asp:ListItemText="ITem 11" /> <asp:ListItemText="ITem 12" /> </asp:DropDownList> <asp:ListBox id="lbBox" SelectionMode="Multiple" OnSelectedIndexChanged="Report" AutoPostBack="True" runat="server" Rows="10"> <asp:ListItem Text="ITem 1" /> <asp:ListItem Text="ITem 2" /> <asp:ListItem Text="ITem 3" /> <asp:ListItem Text="ITem 4" /> <asp:ListItem Text="ITem 5" /> <asp:ListItem Text="ITem 6" /> <asp:ListItem Text="ITem 7" /> <asp:ListItem Text="ITem 8" /> <asp:ListItem Text="ITem 9" /> <asp:ListItem Text="ITem 10" /> <asp:ListItem Text="ITem 11" /> <asp:ListItem Text="ITem 12" /> </asp:ListBox> <asp:Label ID="lblLBMessage" Runat="server" /> Internet Programming Ch.3

36. Table、TableRow、TableCell Properties (1/3) Internet Programming Ch.3

37. Table、TableRow、TableCell Properties (1/3)

38. Table、TableRow、TableCell Properties (1/3)

39. Table、TableRow、TableCell Properties (2/3) <%@ Page Language ="C#" %> <scr ipt runat="server"> voidReport(object obj, EventArgs e) TableRow NewRow = new TableRow(); TableCell NewCellZero = new TableCell(); TableCell NewCellOne = new TableCell(); NewCellZero.text = tbName.text; NewCellOne.text = tbAge.text; NewRow.Cells.Add(NewCellZero); NewRow.Cells.Add(NewCellOne); tbTable.Rows.Add(NewRow); lblMessage.text = tbTable.Rows[Convert.ToInt16(txtIndex.Text)] .Cells[0].text + "的年齡是"; lblMessage.text = tbTable.Rows[Convert.ToInt16(txtIndex.Text)] .Cells[1].text + "歲." ; end sub </script> <html><body><form runat="server"> <asp:Table id="tbTable" GridLines="Both" runat="server"> <asp:TableRow> <asp:TableCell Text="姓名" /> <asp:TableCell Text="年齡" ID="tcName" /> </asp:TableRow> <asp:TableRow> Internet Programming Ch.3

40. Table、TableRow、TableCell Properties (3/3) <asp:TableCell Text="Jordan" /> <asp:TableCell Text="38" ID="tcAge" /> </asp:TableRow> <asp:TableRow> <asp:TableCell Text="Bryant"/> <asp:TableCell Text="24" /> </asp:TableRow> <asp:TableRow> <asp:TableCell Text="O'Neal" /> <asp:TableCell Text="30" /> </asp:TableRow> </asp:Table> 新增資料:<br>姓名: <asp:TextBox ID="tbName" Runat="server" /><p> 年齡: <asp:TextBox ID="tbAge" Runat="server" /><p> 查詢第 <asp:TextBox ID="tbIndex" Width="20" Runat="server" /> 位Player的資料<p> <asp:Button ID="btnSubmit" OnClick="Report" Text="傳送" Runat="server" /><p> <asp:Label ID="lblMessage" Runat="server" /> </form></body></html> Internet Programming Ch.3

41. 練習 以 <asp:table> 製作一個九九乘法表

42. 練習：九宮格 以 <asp:table> 畫出九宮格 如何製作 5x5, 7x7, 9x9 或更大的？

43. BulletedList、Literal及HiddenField Literal control 通常用來表示網頁中不會改變的文字，或稱常 數文數字 範例程式 <html> <body> <asp:Literal LiteralMode="Transform" Runat="server" > Hello world! <hr/><br/> Welcome! </asp:Literal> </body> </html> Internet Programming Ch.3

44. BulletedList 特有的 Properties及 Event Internet Programming Ch.3

45. BulletedList 特有的 Properties及 Event

46. BulletedList (1/2) voidShowClickedItem(object obj, BulletedListEventArgs e) { Switch (e.Index){ Case 0 : lblMessage.Text = "你點選了第一個選項."; Case 1 : lblMessage.Text = "你點選了第二個選項."; Case 2: lblMessage.Text = "你點選了第三個選項."; } } <asp:BulletedList id="btlItem" BulletStyle="CustomImage" BulletImageUrl="~/Book/WebPage0315.jpg" DisplayMode="HyperLink" OnClick="ShowClickedItem" runat="server"> <asp:ListItem Value="http://www.ncnu.edu.tw">國立暨南大學</asp:ListItem> <asp:ListItem Value="http://www.nthu.edu.tw">國立清華大學</asp:ListItem> <asp:ListItem>淡江大學</asp:ListItem> </asp:BulletedList> <asp:Label id="lblMessage" Font-Size="12" Width="168px" runat="server"/> Internet Programming Ch.3

47. BulletedList (2/2) (a) (b) 圖3.29 瀏覽WebPage0314.aspx Internet Programming Ch.3

48. 2. PrevMonth 1. Title 3. NextMonth 4. SelectMonth 6. DayHeader 5. SelectWeek 7. Day 10. Today 8. OtherMonthDay 9. WeekendDay Calendar、DayRender 、 SelectionChange 圖3.30 Calender control所顯示的月曆 Calendar control Internet Programming Ch.3

49. Calendar Control Properties (1/4)

50. Calendar Control Properties (2/4)