WEB伺服器控制項.

Presentation on theme: "WEB伺服器控制項."— Presentation transcript:

1 WEB伺服器控制項

2 WEB伺服器控制項 ASP.NET全新設計的元件 包含傳統的表單控制項 可以完全取代HTML控制項
<asp:Literal id=“XXX" runat="server"></asp:Literal>

3 基本WEB伺服器控制項 HTML Server控制項翻版

4 WEB伺服器控制項-TextBox Single Line MultiLine Password
AutoPostBack屬性：只要有異動，自動Submit回Server(所有控制項都有) EnableViewState屬性(所有控制項都有) True:submit後資料仍維持顯示在畫面上 False:submit後資料清除

5 WEB伺服器控制項-TextBox

6 WEB伺服器控制項-TextBox 程式 畫面

7 WEB伺服器控制項-TextBox

8 WEB伺服器控制項-TextBox

9 WEB伺服器控制項-TextBox

10 WEB伺服器控制項-TextBox 輸入文字後按下Enter

11 WEB伺服器控制項-Button Button：一般按鈕 LinkButton:長的像超連結 ImageButton：利用圖片當按鈕
三者功能與用法相同，只是畫面呈現上的不同

12 WEB伺服器控制項-Button

13 WEB伺服器控制項-Button

14 WEB伺服器控制項-Button 屬於Submit按鈕

15 WEB伺服器控制項-Button

16 WEB伺服器控制項-Button 利用BUTTON來傳遞值 CommandName 與 CommandArgument屬性

17 WEB伺服器控制項-Button

18 WEB伺服器控制項-Button

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

20 WEB伺服器控制項-Label 多用來在「固定位置」顯示文字 操作Text屬性
Literal Web Server控制項 (沒有<span>，無法使用CSS)

21 WEB伺服器控制項-HyperLink 以前的<a> </a>標籤 操作Text與NavigateURL屬性

22 WEB Server Control Table Table  TableRow  TableCell
Table1.Rows(0).Cells(0).Text = "123“ Table1.Rows(0).Cells(0).ForeColor = Color.Blue Table1.Rows(0).Cells(0).Width = (New Unit).Pixel(23) 九九乘法表

23 WEB Server Control－動態產生Table
.aspx中的form要刪除

24 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

25 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 form1.Controls.Add(Tb) Page.Controls.Add(form1) End Sub

26 WEB 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")

27 WEB Server Control－動態產生CHECKBOX
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

28 WEB Server Control－動態產生CHECKBOX陣列
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

29 清單伺服器控制項

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

31 WEB伺服器控制項-DropDownList

32 WEB伺服器控制項- DropDownList

33 WEB伺服器控制項- ListBox 可以複選 功能與DropDownList控制項大同小異 有DataSource屬性

34 WEB伺服器控制項- ListBox

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

36 豐富伺服器控制項

37 WEB伺服器控制項- 日曆控制項 自動格式化

38 WEB伺服器控制項- 日曆控制項 自動格式化

39 WEB伺服器控制項- 日曆控制項

40 WEB伺服器控制項- 日曆控制項 可以選取區間日期
TextBox1.Text = Calendar1.SelectedDates.count TextBox1.Text = Calendar1.SelectedDates(0) 可以選取區間日期