ASP.NET 網頁製作教本 – 從基本語法學起 第14章 訪客留言板、電子賀卡
14-1 訪客留言板
範例網頁的組成
Gform.aspx 網頁
Gbook.aspx 留言板網頁
Gbook.mdb 中的 GuestBook 的資料庫(表)的結構
心情圖片 幾張圖片的檔案名稱分別為 Face01～10.gif。 若將來上網者選取的是第一張圖片，則存放在心情欄位的內容將等於 <Img src="Face01.gif" align="middle">。
資料驗證器的使用 (1) 姓名欄位的資料驗證器 <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Name" EnableClientScript="False"/> 信箱欄位的資料驗證器 <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Email" EnableClientScript="False"/> <asp:RegularExpressionValidator runat="server" ControlToValidate="Email" Text="(Email 應含有 @ 符號)" ValidationExpression=".{1,}@.{3,}" EnableClientScript="False" Display="Dynamic"/>
資料驗證器的使用 (2) 主旨欄位的資料驗證器 <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Subject" EnableClientScript="False"/> 留言欄位的資料驗證器 <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Body" EnableClientScript="False"/>
心情圖示的佈置(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">
心情圖示的佈置(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>
將留言寫入資料庫中(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
將留言寫入資料庫中(2) Gform.aspx #101～113 #101 Cmd.Parameters.Add( New OleDbParameter("@姓名", OleDbType.Char, 255)) #102 Cmd.Parameters.Add( New OleDbParameter("@信箱", OleDbType.Char, 255)) #103 Cmd.Parameters.Add( New OleDbParameter("@主旨", OleDbType.VarChar)) #104 Cmd.Parameters.Add( New OleDbParameter("@留言", OleDbType.VarChar)) #105 Cmd.Parameters.Add( New OleDbParameter("@心情", OleDbType.Char, 255)) #106 Cmd.Parameters(0).Value = Name.Text #107 Cmd.Parameters(1).Value = Email.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()
顯示留言的技巧 (1) 在留言板的慣例中，後來的留言要顯示在前面，要達到此一目的，增加「Order By 時間 Desc」子句 。 SQL = "Select Top 50 * From GuestBook Order By 時間 Desc"
顯示留言的技巧 (2) 應該使用 DataGrid、Repeater 或 DataList 來顯示留言呢？是個困難的抉擇，因為：
顯示留言的技巧(3) – 自定 HTML 欄位 (1) 在 DataTable 物件中建立一個新的欄位，此一欄位名稱定為 HTML，程式如下： Dim Table1 As DataTable = Ds.Tables("GuestBook") Table1.Columns.Add(New DataColumn("HTML", GetType(String)))
顯示留言的技巧(3) – 自定 HTML 欄位 (2)
顯示留言的技巧(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 …
顯示留言的技巧(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
顯示留言的技巧(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
DataGrid 的設定 (1) 一旦產生了上述的 HTML 欄位，再由DataGrid 將其顯示出來 ： <asp:DataGrid runat="server" id="MyGrid" ShowHeader="False" AllowPaging="True" PageSize="5" PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" OnPageIndexChanged="ChangePage"
DataGrid 的設定(2) BorderWidth="0" CellPadding="2" CellSpacing="0" AutoGenerateColumns="false"> <Columns> <asp:BoundColumn DataField="HTML" HeaderText="HTML" /> </Columns> </asp:DataGrid>
14-2 電子賀卡
範例網頁的組成
Ecard.aspx網頁
ViewCard.aspx 網頁
電子賀卡 Email
讀取電子賀卡的網址EcardGet.aspx
Ecard.mdb 資料庫的 Ecard 資料表的結構
圖片的選取與顯示 (1) 12張一般大小的賀卡card01.gif～card12.gif及12張較小的預覽賀卡scard01.gif～scard12.gif，其中較小的賀卡顯示於 Ecard.aspx 網頁，這麼做可以節省網頁下載的時間，至於一般大小的圖片則在以下兩種情況下顯示：(1) 寄件人選取「先檢視賀卡」 (2) 收件人讀取賀卡。
圖片的選取與顯示 (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")%>
信件內容的設定 (1) Ecard.aspx #111～#124 #111 Sub SendCard() #112 ' 產生 EcardGet.aspx 的完整網址 #113 Dim ServerName = Request.ServerVariables("SERVER_NAME") #114 Dim Path = Request.ServerVariables("PATH_INFO") #115 Dim URL = "http://" & ServerName & Path #116 URL = Replace( URL, "Ecard", "EcardGet",,,CompareMethod.Text ) #117 #118 ' 讀取 Ecard.txt 檔案內容 #119 Dim File As String = Server.MapPath("Ecard.txt") #120 Dim sReader As StreamReader #121 sReader = New StreamReader( File, Encoding.Default ) #122 Dim Body As String = sReader.ReadToEnd() #123 sReader.Close() #124
信件內容的設定 (2) Ecard.aspx #125～#134 #125 ' 將 Ecard.txt 中的未定資料取代成真實資料 #126 Body = Replace( Body, "=ToName=", ToName.Text ) #127 Body = Replace( Body, "=FromName=", FromName.Text ) #128 Body = Replace( Body, "=From=", FromEmail.Text ) #129 Body = Replace( Body, "=To=", ToEmail.Text ) #130 Dim EcardID = URL & "?ToEmail=" & ToEmail.Text & _ #131 "&FromEmail=" & FromEmail.Text #132 Body = Replace( Body, "=EcardID=", EcardID ) #133 Body = Replace( Body, "=Now=", Now ) #134
信件內容的設定 (3) Ecard.aspx #135～#152 #135 ' 送出賀卡郵件 #135 ' 送出賀卡郵件 #136 Dim mail As MailMessage = New MailMessage #137 mail.To = ToEmail.Text #138 mail.From = FromEmail.Text #139 mail.Subject = "來自 " & FromName.Text & " 的卡片" #140 mail.BodyFormat = MailFormat.Text #141 mail.Body = Body #142 #143 On Error Resume Next #144 SmtpMail.SmtpServer = "msa.hinet.net" #145 SmtpMail.Send(mail) #146 #147 If Err.Number <> 0 Then #148 Msg.Text = Err.Description #149 Else #150 Msg.Text = "卡片已經送出！" #151 End If #152 End Sub
收件人讀取賀卡 EcardGet.aspx #45～51 #45 SQL = "Select * From Ecard Where ToEmail=@ToEmail And FromEmail=@FromEmail Order By SendDate Desc" #46 Cmd = New OleDbCommand( SQL, Conn ) #47 Cmd.Parameters.Add( New OleDbParameter("@ToEmail", OleDbType.Char, 255)) #48 Cmd.Parameters.Add( New OleDbParameter("@FromEmail", OleDbType.Char, 255)) #49 Cmd.Parameters("@ToEmail").Value = Request("ToEmail") #50 Cmd.Parameters("@FromEmail").Value = Request("FromEmail") #51 Rd = Cmd.ExecuteReader()