1 / 92

ASP.NET 2.0 Standard Control Collection

ASP.NET 2.0 Standard Control Collection. 鄧姚文 http://www.ywdeng.idv.tw. Standard Control Collection. Namespace 、 Import Directive Properties in Web Controls Button 、 LinkButton 、 ImageButton Label 、 HyperLink 、 Image 、 ImageMap TextBox. CheckBox 、 CheckBoxList

tassos
Download Presentation

ASP.NET 2.0 Standard Control Collection

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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)

More Related