web 伺服器控制項

40
WEB WEB 伺伺伺伺伺伺 伺伺伺伺伺伺

Upload: duke

Post on 03-Feb-2016

80 views

Category:

Documents


0 download

DESCRIPTION

WEB 伺服器控制項. WEB 伺服器控制項. ASP.NET 全新設計的元件 包含傳統的表單控制項 可以完全取代 HTML 控制項 基本 WEB 控制項、驗證控制項、清單控制項與豐富控制項

TRANSCRIPT

Page 1: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項

Page 2: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 ASP.NETASP.NET 全新設計的元件全新設計的元件 包含傳統的表單控制項包含傳統的表單控制項 可以完全取代可以完全取代 HTMLHTML 控制項控制項 基本基本 WEBWEB 控制項、驗證控制項、清單控制控制項、驗證控制項、清單控制

項與豐富控制項項與豐富控制項 <asp:Literal id=“XXX" runat="server"><<asp:Literal id=“XXX" runat="server"><

/asp:Literal>/asp:Literal>

Page 3: WEB 伺服器控制項

基本基本 WEBWEB 伺服器控制項伺服器控制項HTML ServerHTML Server 控制項翻版控制項翻版

Page 4: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --TextBoxTextBox

Single LineSingle Line MultiLineMultiLine PasswordPassword AutoPostBackAutoPostBack 屬性:只要有異動,自動屬性:只要有異動,自動 SS

ubmitubmit 回回 ServerServer(( 所有控制項都有所有控制項都有 )) EnableViewStateEnableViewState 屬性屬性 (( 所有控制項都有所有控制項都有 ))

True:submitTrue:submit 後資料仍維持顯示在畫面上後資料仍維持顯示在畫面上False:submitFalse:submit 後資料清除後資料清除

Page 5: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --TextBoxTextBox

Page 6: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --TextBoxTextBox

畫面

程式

Page 7: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --TextBoxTextBox

Page 8: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --TextBoxTextBox

Page 9: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --TextBoxTextBox

Page 10: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --TextBoxTextBox

輸入文字後按下 Enter

Page 11: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton

ButtonButton :一般按鈕:一般按鈕 LinkButton:LinkButton: 長的像超連結長的像超連結 ImageButtonImageButton :利用圖片當按鈕:利用圖片當按鈕 三者功能與用法相同,只是畫面呈現上的三者功能與用法相同,只是畫面呈現上的

不同不同

Page 12: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton

Page 13: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton

Page 14: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton

屬於 Submit 按鈕

Page 15: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton

Page 16: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton利用 BUTTON 來傳遞值CommandName 與 CommandArgument 屬性一定要搭配 Command 事件做處理

屬於 Command 按鈕

Page 17: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton

Page 18: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 --ButtonButton

Page 19: WEB 伺服器控制項

e e 與 與 sendersender

Sender as Object :表示觸發某事件的來源物件E as EventArgs :表示傳遞給該事件的 [ 額外描述 ]

Page 20: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 -Label-Label

多用來在「多用來在「固定位置固定位置」顯示文字」顯示文字 操作操作 TextText 屬性屬性 Literal Web ServerLiteral Web Server 控制項 控制項 (( 沒有沒有 <span><span> ,,

無法使用無法使用 CSS)CSS)

Page 21: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 -HyperLink-HyperLink 以前的以前的 <a> </a><a> </a> 標籤標籤 操作操作 TextText 與與 NavigateURLNavigateURL 屬性屬性 TextText :畫面上顯示的文字:畫面上顯示的文字 NavigateURLNavigateURL :網址:網址

Page 22: WEB 伺服器控制項

WEB Server ControlWEB Server Control TableTable Table Table TableRow TableRow TableCell TableCell Table1.Rows(0).Cells(0).Text = "123“Table1.Rows(0).Cells(0).Text = "123“ Table1.Rows(0).Cells(0).ForeColor = Color.BlueTable1.Rows(0).Cells(0).ForeColor = Color.Blue Table1.Rows(0).Cells(0).Width = (New Unit).Pixel(23)Table1.Rows(0).Cells(0).Width = (New Unit).Pixel(23)

九九乘法表

Page 23: WEB 伺服器控制項

WEB Server ControlWEB Server Control -動態產生-動態產生 TableTable

.aspx.aspx 中的中的 formform 要刪除要刪除

Page 24: WEB 伺服器控制項

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load ' 在這裡放置使用者程式碼以初始化網頁 Dim form1 As New HtmlForm

form1.Method = "POST" form1.ID = "form1" form1.Name = "form1"

Dim Tb As Table Dim Tr As TableRow Dim Tc As TableCell

Dim chk As HtmlInputCheckBox

Dim i As Integer

Tb = New Table

Tb.Width = (New Unit).Percentage(100) Tb.BorderWidth = (New Unit).Pixel(1) Tb.BorderColor = Color.Red Tb.CellSpacing = 0 Tb.CellPadding = 3

Tr = New TableRow

Tc = New TableCell Tc.BorderWidth = (New Unit).Pixel(1) Tc.Width = (New Unit).Percentage(100) Tc.BorderColor = Color.Red

Page 25: WEB 伺服器控制項

For i = 1 To 10 Tr = New TableRow

Tc = New TableCell Tc.BorderWidth = (New Unit).Pixel(1) Tc.Width = (New Unit).Percentage(100) Tc.BorderColor = Color.Red

chk = New HtmlInputCheckBox chk.ID = "Chk_Del_" & i.ToString chk.Name = "Chk_Del_" & i.ToString chk.Attributes("onclick") = String.Format("Check_Del(''{0}'');", i.ToString)

Tc.Controls.Add(chk) Tr.Cells.Add(Tc) Tb.Rows.Add(Tr) Next

Tr = New TableRow Tc = New TableCell Tc.BorderWidth = (New Unit).Pixel(1) Tc.Width = (New Unit).Percentage(100) Tc.BorderColor = Color.Red

form1.Controls.Add(Tb) Page.Controls.Add(form1) End Sub

Page 26: WEB 伺服器控制項

WEB Server ControlWEB Server Control -動態產生按鈕-動態產生按鈕 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load ' 在這裡放置使用者程式碼以初始化網頁 Dim mbutton As New WebControls.Button Panel1.Controls.Add(mbutton) mbutton.Text = "Click" AddHandler mbutton.Click, AddressOf button_click

End Sub

Private Sub button_click(ByVal sender As Object, ByVal e As EventArgs) Response.Write("aaaaaaaaTest") End Sub

Page 27: WEB 伺服器控制項

WEB Server ControlWEB Server Control -動態產生-動態產生 CHECCHECKBOXKBOX

Dim chk As CheckBox Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

chk = New CheckBox ' 產生 checkbox chk.ID = "Chk_Del" chk.AutoPostBack = True chk.Text = "gggg" Panel1.Controls.Add(chk) ' 將 form 加入 page AddHandler chk.CheckedChanged, AddressOf chk_click End Sub Private Sub chk_click(ByVal sender As Object, ByVal e As EventArgs) If chk.Checked Then Response.Write("aaaaaaaaTest") Else Response.Write("not ok") End If End Sub

Page 28: WEB 伺服器控制項

WEB Server ControlWEB Server Control -動態產生-動態產生 CHECCHECKBOXKBOX 陣列陣列

Dim chk(5) As CheckBox Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Dim i As Integer For i = 0 To 4 chk(i) = New CheckBox ' 產生 checkbox chk(i).AutoPostBack = True chk(i).Text = i Panel1.Controls.Add(chk(i)) ' 將 form 加入 page AddHandler chk(i).CheckedChanged, AddressOf chk_click Next End Sub Private Sub chk_click(ByVal sender As Object, ByVal e As EventArgs) Dim j As Integer For j = 0 To 4 If chk(j).Checked Then Response.Write("aaaaaaaaTest") Else Response.Write("not ok") End If Next End Sub

Page 29: WEB 伺服器控制項

清單伺服器控制項清單伺服器控制項

Page 30: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - DropDownList- DropDownList

•DropDownList1.SelectedItem.Text 取得使用者選取的文字•DropDownList1.Item.Add(Text1.Text) 將內容加入 DropDownList•只能單選•先記住這個控制項具有 DataSource 屬性可與資料庫進行繫結

Page 31: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 -DropDownList-DropDownList

Page 32: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - DropDownList- DropDownList

Page 33: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - ListBox- ListBox

•可以複選•功能與 DropDownList 控制項大同小異•有 DataSource 屬性

Page 34: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - ListBox- ListBox

Page 35: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - ListBox- ListBox

•ListBox1.Items.Count Box 中共有多少選項•ListBox.Items( 索引 ).Text 取出索引選項內的 Text•ListBox.Items( 索引 ).SelectedIndex 判斷是否被選取•這個控制項具有 DataSource 屬性可與資料庫進行繫結

Page 36: WEB 伺服器控制項

豐富伺服器控制項豐富伺服器控制項

Page 37: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - - 日曆控制日曆控制項項•自動格式化

Page 38: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - - 日曆控制日曆控制項項•自動格式化

Page 39: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - - 日曆控制日曆控制項項

Page 40: WEB 伺服器控制項

WEBWEB 伺服器控制項伺服器控制項 - - 日曆控制日曆控制項項

可以選取區間日期

TextBox1.Text = Calendar1.SelectedDates.countTextBox1.Text = Calendar1.SelectedDates(0)