ASP.NET 網頁製作教本 – 從基本語法學起

Presentation on theme: "ASP.NET 網頁製作教本 – 從基本語法學起"— Presentation transcript:

1 ASP.NET 網頁製作教本 – 從基本語法學起
第14章 訪客留言板、電子賀卡

2 14-1 訪客留言板

3 範例網頁的組成

4 Gform.aspx 網頁

5 Gbook.aspx 留言板網頁

6 Gbook.mdb 中的 GuestBook 的資料庫(表)的結構

7 心情圖片 幾張圖片的檔案名稱分別為 Face01～10.gif。 若將來上網者選取的是第一張圖片，則存放在心情欄位的內容將等於
<Img src="Face01.gif" align="middle">。

8 資料驗證器的使用 (1) 姓名欄位的資料驗證器
<asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Name" EnableClientScript="False"/> 信箱欄位的資料驗證器 <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate=" " EnableClientScript="False"/> <asp:RegularExpressionValidator runat="server" ControlToValidate=" " Text="( 符號)" EnableClientScript="False" Display="Dynamic"/>

9 資料驗證器的使用 (2) 主旨欄位的資料驗證器 <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Subject" EnableClientScript="False"/> 留言欄位的資料驗證器 <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Body" EnableClientScript="False"/>

10 心情圖示的佈置(1) <asp:RadioButtonList runat="server" id="Icon"
RepeatDirection="Horizontal" RepeatColumns="5"> <asp:ListItem Selected><Img src="Face01.gif" align="middle"> </asp:ListItem> <asp:ListItem><Img src="Face02.gif" align="middle"> <asp:ListItem><Img src="Face03.gif" align="middle"> <asp:ListItem><Img src="Face04.gif" align="middle"> <asp:ListItem><Img src="Face05.gif" align="middle">

11 心情圖示的佈置(2) <asp:ListItem><Img src="Face06.gif" align="middle"> </asp:ListItem> <asp:ListItem><Img src="Face07.gif" align="middle"> <asp:ListItem><Img src="Face08.gif" align="middle"> <asp:ListItem><Img src="Face09.gif" align="middle"> <asp:ListItem><Img src="Face10.gif" align="middle"> </asp:RadioButtonList>

12 將留言寫入資料庫中(1) Gform.aspx #92～100
#92 Dim Provider = "Provider=Microsoft.Jet.OLEDB.4.0" #93 Dim Database = "Data Source=" & Server.MapPath( "Gbook.mdb" ) #94 Conn = New OleDbConnection( Provider & ";" & DataBase ) #95 Conn.Open() #96 #97 Dim SQL As String #98 SQL = "INSERT INTO GuestBook (姓名, 信箱, 主旨, 留言, 心情) VALUES (?, ?, ?, ?, ?)" #99 Cmd = New OleDbCommand( SQL, Conn ) #100

13 將留言寫入資料庫中(2) Gform.aspx #101～113
#101 Cmd.Parameters.Add( New OleDbType.Char, 255)) #102 Cmd.Parameters.Add( New OleDbType.Char, 255)) #103 Cmd.Parameters.Add( New OleDbType.VarChar)) #104 Cmd.Parameters.Add( New OleDbType.VarChar)) #105 Cmd.Parameters.Add( New OleDbType.Char, 255)) #106 Cmd.Parameters(0).Value = Name.Text #107 Cmd.Parameters(1).Value = .Text #108 Cmd.Parameters(2).Value = Subject.Text #109 Cmd.Parameters(3).Value = Body.Text #110 Cmd.Parameters(4).Value = Icon.SelectedItem.Text #111 #112 Cmd.ExecuteNonQuery() #113 Conn.Close()

14 顯示留言的技巧 (1) 在留言板的慣例中，後來的留言要顯示在前面，要達到此一目的，增加「Order By 時間 Desc」子句 。
SQL = "Select Top 50 * From GuestBook Order By 時間 Desc"

15 顯示留言的技巧 (2) 應該使用 DataGrid、Repeater 或 DataList 來顯示留言呢？是個困難的抉擇，因為：

16 顯示留言的技巧(3) – 自定 HTML 欄位 (1)
在 DataTable 物件中建立一個新的欄位，此一欄位名稱定為 HTML，程式如下： Dim Table1 As DataTable = Ds.Tables("GuestBook") Table1.Columns.Add(New DataColumn("HTML", GetType(String)))

17 顯示留言的技巧(3) – 自定 HTML 欄位 (2)

18 顯示留言的技巧(3) – 自定 HTML 欄位 (3)
Gbook.aspx #53～56 #53 Dim I As Integer #54 For I = 0 To Table1.Rows.Count - 1 #55 Table1.Rows(I).Item("HTML") = MakeHTML( Table1.Rows(I) ) #56 Next …

19 顯示留言的技巧(3) – 自定 HTML 欄位 (4)
Gbook.aspx #64～72 #64 Function MakeHTML( row As DataRow ) As String #65 Dim 心情 = row.Item("心情") #66 Dim 姓名 = "<B>姓名: </B>" & Server.HtmlEncode(row.Item("姓名")) #67 Dim 主旨 = "<B>主旨: </B>" & Server.HtmlEncode(row.Item("主旨")) #68 Dim 留言 = "<pre><Font Size=+1>" & Server.HtmlEncode(row.Item("留言")) & "</Font></pre>" #69 Dim 時間 = "<B>時間: </B>" & Server.HtmlEncode(row.Item("時間")) #70 Dim 信箱 = Server.HtmlEncode(row.Item("信箱")) #71 信箱 = "<B>信箱: </B><a href='mailto: " & 信箱 & "'>" & 信箱 & "</a>" #72

20 顯示留言的技巧(3) – 自定 HTML 欄位 (5)
Gbook.aspx #73～83 #73 Dim HTML As String #74 HTML = "<table border=0>" #75 HTML &= "<tr valign=top><td Rowspan=5>" & 心情 & "</td>" #76 HTML &= "<td>" & 姓名 & "</td></tr>" #77 HTML &= "<tr><td>" & 信箱 & "</td></tr>" #78 HTML &= "<tr><td>" & 主旨 & "</td></tr>" #79 HTML &= "<tr><td>" & 時間 & "</td></tr>" #80 HTML &= "<tr><td bgcolor=Yellow>" & 留言 & "</td></tr>" #81 HTML &= "</table>" #82 Return HTML #83 End Function

21 DataGrid 的設定 (1) 一旦產生了上述的 HTML 欄位，再由DataGrid 將其顯示出來 ： <asp:DataGrid
runat="server" id="MyGrid" ShowHeader="False" AllowPaging="True" PageSize="5" PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" OnPageIndexChanged="ChangePage"

22 DataGrid 的設定(2) BorderWidth="0" CellPadding="2" CellSpacing="0"
AutoGenerateColumns="false"> <Columns> <asp:BoundColumn DataField="HTML" HeaderText="HTML" /> </Columns> </asp:DataGrid>

23 14-2 電子賀卡

24 範例網頁的組成

25 Ecard.aspx網頁

26 ViewCard.aspx 網頁

27 電子賀卡

28 讀取電子賀卡的網址EcardGet.aspx

29 Ecard.mdb 資料庫的 Ecard 資料表的結構

30 圖片的選取與顯示 (1) 12張一般大小的賀卡card01.gif～card12.gif及12張較小的預覽賀卡scard01.gif～scard12.gif，其中較小的賀卡顯示於 Ecard.aspx 網頁，這麼做可以節省網頁下載的時間，至於一般大小的圖片則在以下兩種情況下顯示：(1) 寄件人選取「先檢視賀卡」 (2) 收件人讀取賀卡。

31 圖片的選取與顯示 (2) Ecard.aspx 輸入表單上的圖片來自scard01.gif～ scard12.gif，而實際顯示時的 圖片卻來自 card01.gif～card12.gif： 其作用是將 scard01.gif～scard12.gif 的小圖片 替換成 card01.gif～card12.gif 的大圖片。 Ecard.aspx #179 Cmd.Parameters(5).Value = Replace(Card.SelectedItem.Text, "scard", "card") ViewCard.aspx #06 <%=Replace(Request("Card"), "scard", "card")%>

32 信件內容的設定 (1) Ecard.aspx #111～#124 #111 Sub SendCard()
# ' 產生 EcardGet.aspx 的完整網址 # Dim ServerName = Request.ServerVariables("SERVER_NAME") # Dim Path = Request.ServerVariables("PATH_INFO") # Dim URL = " & ServerName & Path # URL = Replace( URL, "Ecard", "EcardGet",,,CompareMethod.Text ) #117 # ' 讀取 Ecard.txt 檔案內容 # Dim File As String = Server.MapPath("Ecard.txt") # Dim sReader As StreamReader # sReader = New StreamReader( File, Encoding.Default ) # Dim Body As String = sReader.ReadToEnd() # sReader.Close() #124

33 信件內容的設定 (2) Ecard.aspx #125～#134 #125 ' 將 Ecard.txt 中的未定資料取代成真實資料
# Body = Replace( Body, "=ToName=", ToName.Text ) # Body = Replace( Body, "=FromName=", FromName.Text ) # Body = Replace( Body, "=From=", From .Text ) # Body = Replace( Body, "=To=", To .Text ) # Dim EcardID = URL & "?To =" & To .Text & _ # "&From =" & From .Text # Body = Replace( Body, "=EcardID=", EcardID ) # Body = Replace( Body, "=Now=", Now ) #134

34 信件內容的設定 (3) Ecard.aspx #135～#152 #135 ' 送出賀卡郵件
# ' 送出賀卡郵件 # Dim mail As MailMessage = New MailMessage # mail.To = To .Text # mail.From = From .Text # mail.Subject = "來自 " & FromName.Text & " 的卡片" # mail.BodyFormat = MailFormat.Text # mail.Body = Body #142 # On Error Resume Next # SmtpMail.SmtpServer = "msa.hinet.net" # SmtpMail.Send(mail) #146 # If Err.Number <> 0 Then # Msg.Text = Err.Description # Else # Msg.Text = "卡片已經送出！" # End If # End Sub

35 收件人讀取賀卡 EcardGet.aspx #45～51
#45 SQL = "Select * From Ecard Where And Order By SendDate Desc" #46 Cmd = New OleDbCommand( SQL, Conn ) #47 Cmd.Parameters.Add( New OleDbType.Char, 255)) #48 Cmd.Parameters.Add( New OleDbType.Char, 255)) #49 = Request("To ") #50 = Request("From ") #51 Rd = Cmd.ExecuteReader()